钉钉小程序 - 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、效果图

1. 初始的位置
   
2. 要查找的位置
   

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，触发不太灵敏，原因还没有找到