钉钉小程序 - map组件 - 拖动地图选择位置并获取该位置的经纬度

钉钉小程序功能要求：在页面中输入地址名称，获取地址所对应的经纬度，然后传给服务器。

但是钉钉小程序的map组件以及地图API貌似不支持这个功能，所以想了两个折中的方法：

方法一

将固定定位标记置于地图中心点，拖动地图，将需要搜索的位置拖至该标记点，然后获取地图中心点的经纬度，这就是我们所需要的经纬度了

1、效果图 2、代码演示 json 文件

{ "defaultTitle": "获取冷库位置" }

axml 文件

<map id="map" latitude="{{latitude}}" longitude="{{longitude}}" controls="{{controls}}" onControlTap="onControlTap" onRegionChange="onRegionChange"></map> <view class="longitude">当前经度：{{longitude}}</view> <view class="latitude">当前维度：{{latitude}}</view> <view class="save flex2" onTap="onSave">保存</view>

js 文件

Page({ data: { longitude: '', latitude: '', controls: [] }, onLoad() { var _this = this; // 页面一加载，获取当前经纬度，绑定到地图上 dd.getLocation({ success(res) { _this.setData({ longitude: res.longitude, latitude: res.latitude, }) }, fail() { dd.alert({ content: '定位失败' }); }, }) }, onReady() { var _this = this; // 创建并返回一个地图上下文对象 _this.mapCtx = dd.createMapContext('map'); // 显示比例尺 _this.mapCtx.showsScale({isShowsScale:1}); dd.createSelectorQuery().select("#map").boundingClientRect().exec(res => { // console.log(res) // 得到map元素的宽高以及位置信息，以便于让固定定位标记位于地图的正中间 const controls = [{ iconPath: '/images/icon_map.png', position: { left: res[0].width / 2, top: res[0].height / 2, width: 36, height: 36 }, clickable: true }]; _this.setData({ controls: controls }) }) }, // 点击 control 时触发 onControlTap(e) { dd.alert({ content: '拖动地图可以改变当前经纬度', buttonText: '我知道了' }); }, // 视野发生变化时触发，重新设置经纬度 onRegionChange(e) { var _this = this; _this.setData({ latitude: e.latitude, longitude: e.longitude }) }, // 点击保存时触发 onSave() { var _this = this; // 保存的逻辑 console.log(_this.data.latitude) // 我们需要的维度 console.log(_this.data.longitude) // 我们需要的经度 } });

acss 文件

#map { width: 100%; height: 800rpx; margin-bottom: 30rpx; } .longitude, .latitude { color: #666; line-height: 50rpx; font-size: 28rpx; padding-left: 30rpx; } .save { background-color: #557DFF; color: #fff; width: 100%; height: 100rpx; font-size: 36rpx; margin-top: 30rpx; } .flex2 { display: flex; align-items: center; justify-content: space-around; }

3、注意：部分功能在开发者工具中无法调试，会报错，请使用真机调试

方法二

页面一加载，获取到当前位置的经纬度并添加位置标记，拖动地图寻找到指定位置时，点击该位置，将位置标记移动到该处，然后点击标记，就可以获取我们所需要的经纬度了。

1、效果图

初始的位置 要查找的位置

2、代码演示 json 文件

{ "defaultTitle": "获取冷库位置" }

axml 文件

<map id="map" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" scale="{{scale}}" onTap="onTap" onMarkerTap="onMarkerTapOrCalloutTap" onCalloutTap="onMarkerTapOrCalloutTap"></map>

js 文件

Page({ data: { longitude: '', latitude: '', scale: 18, markers: [], }, onLoad() { var _this = this; // 页面一加载，获取当前经纬度 dd.getLocation({ success(res) { const markers = [{ id: 0, latitude: res.latitude, longitude: res.longitude, width: 36, height: 25, iconPath: '/images/leng.png', iconAppendStr: '点击地图，将冷库移动到指定位置', // 必须有的，否则无法触发onCalloutTap事件 callout: { content: "" }, customCallout: { "type": 1, "descList": [{ "desc": "点击确定冷库位置", "descColor": "#3982F2" }], "isShow": 1 } }]; // 设置经纬度和标记 _this.setData({ longitude: res.longitude, latitude: res.latitude, markers: markers }) }, fail() { dd.alert({ title: '定位失败' }); }, }) }, onReady() { var _this = this; // 创建并返回一个地图上下文对象，必须在onReady函数里面 _this.mapCtx = dd.createMapContext('map'); }, // 手指点击地图时，实时获取地图上的位置 onTap(e) { var _this = this; console.log(e.latitude) // 手指点击地图时，地图中心的维度 console.log(e.longitude) // 手指点击地图时，地图中心的经度 // mapCtx.updateComponents 接口可用性判断 if (!dd.canIUse('createMapContext.return.updateComponents')) { dd.alert({ content: '不支持updateComponents' }); return; } // mapCtx.updateComponents 增量更新地图接口，主要是更新经纬度 _this.mapCtx.updateComponents({ scale: 18, // 地图中心的经纬度 latitude: e.latitude, longitude: e.longitude, markers: [{ id: 0, // marker标记的经纬度 latitude: e.latitude, longitude: e.longitude, width: 36, height: 25, iconPath: '/images/leng.png', iconAppendStr: '点击地图，将冷库移动到指定位置', // 必须有的，否则无法触发onCalloutTap事件 callout: { content: "" }, customCallout: { "type": 1, "descList": [{ "desc": "点击确定冷库位置", "descColor": "#3982F2" }], "isShow": 1 } }] }) }, // 点击Marker标记时 或 点击Marker对应的callout时 触发 onMarkerTapOrCalloutTap(e) { // 我们自己的逻辑区 console.log(e.latitude) // 我们需要的维度 console.log(e.longitude) // 我们需要的经度 }, });

acss 文件

#map { width: 100%; height: 1000rpx; margin-bottom: 30rpx; }

3、注意：部分功能在开发者工具中无法调试，会报错，请使用真机调试

4、这种方法使用的是点击地图事件onTap，触发不太灵敏，原因还没有找到