微信小程序移动选点定位,获取经纬度,然后我给加了从当前位置开始移动,以及防止移动跑偏太多,后加了右上角图标,回到当前位置的功能。
<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="../../static/images/home/icon1.png" />
</map>
<image src="../../static/images/home/here.png" class="current_location" bindtap="Location"></image>
</view>
const app = getApp()
Page({
data: {
longitude: '',
latitude: '',
},
onLoad() {
this.Location()
},
regionchange(e) {
// 地图发生变化的时候,获取中间点,也就是用户选择的位置toFixed
if (e.type == 'end' && (e.causedBy == 'scale' || e.causedBy == 'drag')) {
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();
},
Location: function() {
var that = this;
wx.getLocation({
type: "gcj02",
success: function(res) {
that.setData({
latitude: res.latitude,
longitude: res.longitude
})
}
})
}
})
.container{
width: 100%;
margin: 0 auto ;
padding: 0;
}
.current_location{
width: 94rpx;height: 94rpx;position: absolute;
right: 23rpx;
top: 53rpx;
z-index: 200;
}
.cover-image {
position: absolute;
top: 50%;
left: 50%;
margin-top: -25rpx;
margin-left: -25rpx;
width: 54.3rpx;
height: 49.3rpx;
}
.cover-image_confirm {
width: 50rpx;
height: 50rpx;
}
.map {
width: 950rpx;
height: 1002rpx;
}