// View
// 注意点： 这里不论view还是cover-view标签在微信小程序平台上都已经实现了跟map同级同层了，但我还是建议不要把view跟cover-view嵌套进map，否则只要你对view或者cover-view标签设置的样式占满Map，就会导致无法拖动map

<map id="map" ref="map" class="map" :scale="scale" :markers="markers" :longitude="longitude" show-location
　　:latitude="latitude" :style="{width:'100%', height:'680rpx'}" @regionchange="regionchange" @touchend="touchEndFun">
</map>
<view class="center-point-box">
　　<image src="区别markers默认图标的图片用于定位中间位置" class="center-point" @click="onControltap" />
</view>
<cover-view class="cover-view-box">
　　<cover-image src="回到我的位置图片" class="be-back-myself" @click="onControltap" />
</cover-view>

// Css

// center-point-box 、center-point样式是为了让中心点图片始终居中定位，这样就实现了拖动地图时中心点markers消失的问题，也省了设置中心点markers。

// cover-view-box是定位到我的盒子

.map {
　　position: relative;
}

.cover-view-box {
　　position: absolute;
　　top: 500rpx;
　　right: 60rpx;
}

.center-point-box {
　　position: absolute;
　　top: 280rpx;
　　right: 50%;
}

.center-point {
　　width: 40rpx;
　　height: 60rpx;
}

.be-back-myself {
　　width: 60rpx;
　　height: 60rpx;
}

// JS
// 引入腾讯地图js

var QQMapWX = require('../../libs/qqmap-wx-jssdk.min.js');
var qqmapsdk = new QQMapWX({
　　key: '腾讯地图key'
});

//onReady内写入如下

this.mapContext = uni.createMapContext('map', this)

// methods内写入如下方法

//获取位置信息
async getLocationInfo() {
　　let that = this
　　return new Promise((resolve) => {
　　//位置信息默认数据
　　let location = {
　　　　longitude: 0,
　　　　latitude: 0,
　　　　province: "",
　　　　city: "",
　　　　area: "",
　　　　street: "",
　　　　address: "",
　　};
　　uni.getLocation({
　　　　type: "gcj02",
　　　　altitude: true,
　　　　success(res) {
　　　　　　location.longitude = res.longitude
　　　　　　location.latitude = res.latitude // 腾讯地图
　　　　　　that.longitude = location.longitude
　　　　　　that.latitude = location.latitude
　　　　　　qqmapsdk.reverseGeocoder({
　　　　　　　　location,
　　　　　　　　success(response) {
　　　　　　　　　　let info = response.result;
　　　　　　　　　　location.province = info.address_component.province;
　　　　　　　　　　location.city = info.address_component.city;
　　　　　　　　　　location.area = info.address_component.district;
　　　　　　　　　　location.street = info.address_component.street;
　　　　　　　　　　location.address = info.address;
　　　　　　　　　　resolve(location);
　　　　　　　　}
　　　　　　})
　　　　}
　　})
})
},

//　regionchange是在map被拖动或放大缩小中触发的，回调有两个状态，在安卓上type = e.type  在 ios上 type = e.detail.type

//手指触摸 移动结束 事件 
touchEndFun(e) {
  this.touchMoveFinish = true
},
// 移动地图，更改中心坐标
async regionchange(e) {
　　// 这里我对map的touchend事件做的监听，停止滑动才触发regionchange，否则每次进入map页面都会触发就会很影响页面的加载。
   if (!this.touchMoveFinish) {
   　　return
   }
   let difference = 0
   let that = this
   let type = '';
   const { platform } = uni.getSystemInfoSync();
　　// 判断是安卓还是IOS，取值方式不同
   switch (platform) {
        case 'android':
              type = e.type;
              break;
        case 'ios':
              type = e.detail.type;
              break;
    }
    if (type === 'end') {
       // 处理拖拽结束时的逻辑
       this.mapContext.getCenterLocation({
           success: res => {
           if (res.errMsg === "getMapCenterLocation:ok") {
               // 当前中心经纬度位置
               that.markers = []
               var location = res.longitude + ',' + res.latitude
　　　　　　　　　// 这里是计算拖动的距离，计算的是getCenterLocation获取到的中心点经纬度跟map上的中心经纬度距离
               difference = getGreatCircleDistance(Number(that.latitude), Number(that.longitude), res.latitude, res.longitude)
               if (Number(difference) <= 0) {
                   return
                } else {
                   // difference大于0执行的操作
                }
            }
        })
　　　　　// 更新地图markers标记点
        this.mapContext.addMarkers({
             markers: this.markers,
             clear: true
        })
        this.$forceUpdate()
  }
},

// 回到我的定位点
async onControltap() {
　　this.markers = []
　　let that = this
　　let nowLocationObj = await this.getLocationInfo();
　　let nowLocation = nowLocationObj.longitude + ',' + nowLocationObj.latitude
　　this.mapContext.moveToLocation({
　　　　longitude: nowLocationObj.longitude,
　　　　latitude: nowLocationObj.latitude,
　　});
},

// 以上用到的属性均在data中定义，import的js文件在script头部引入定义当前页面全局属性，方法均写入method内，
// 其中获取自身定位可在onReady、onLoad、onShow内使用，若是组件内使用map，在created或者mouted都可以执行获取定位方法。