我的大boss今天突发奇想要做一个拖拽地图，需获取所展示地图中心的点位置，因此我搜索的半天的度娘，终于出来了我想要的效果，与大家分享一下。当做一个学习参考。
css样式
.cover-image{
position: absolute;
top:50%;
left:50%;
margin-top:-25rpx;
margin-left:-25rpx;
width:50rpx;
height: 50rpx;
}
.cover-image_confirm{
width:50rpx;
height: 50rpx;
}
.map{
width:950rpx;
height: 1002rpx;
}
wxml
<view class="container">
<map id="map4select" longitude="{{longitude}}" latitude="{{latitude}}" scale="14" controls="{{controls}}" markers="{{markers}}" show-location bindcontroltap="controltap" polyline="{{polyline}}" bindmarkertap="markertap" circles="{{circles}}" bindregionchange="regionchange" class='map'>
<cover-image class="cover-image" bindtap="my_location" src="/imgs/icon-20.png" />
<cover-image class="cover-image_confirm" bindtap="confirm_bag" src="/imgs/icon-29.png" />
</map>
</view>
js
//index.js
//获取应用实例
const app = getApp()
Page({
data: {
longitude: '108.947040',
latitude: '34.259430',
},
onLoad(){
},
regionchange(e) {
console.log(e)
// 地图发生变化的时候，获取中间点，也就是用户选择的位置toFixed
if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {
console.log(e)
var that = this;
this.mapCtx = wx.createMapContext("map4select");
this.mapCtx.getCenterLocation({
type: 'gcj02',
success: function (res) {
console.log(res,11111)
that.setData({
latitude: res.latitude,
longitude: res.longitude,
circles: [{
latitude: res.latitude,
longitude: res.longitude,
color: '#FF0000DD',
fillColor: '#d1edff88',
radius: 3000,//定位点半径
strokeWidth: 1
}]
})
}
})
}
},
//定位到自己的位置事件
my_location: function (e) {
var that = this;
that.onLoad();
},
})
快来试试吧(*^__^*) 嘻嘻