微信小程序移动选点定位,获取经纬度,然后我给加了从当前位置开始移动,以及防止移动跑偏太多,后加了右上角图标,回到当前位置的功能。

在这里插入图片描述

<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;

}

主要功能转自:

https://blog.csdn.net/qq_40372395/article/details/86624430?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromMachineLearnPai2-1.add_param_isCf