uniapp 百度地图 位置点击选择

<template>
	<view>
		<view class="allmap-container">
			<view @click="allmap.onClick" :prop="mapList" :change:prop="allmap.updateinitMap" id="allmap"></view>
		</view>
		<view style="position: relative; z-index: 999;">


			<view @click="nextTo" class="bottomPbulic">
				下一步
			</view>
		</view>

	</view>
</template>
<script module="allmap" lang="renderjs">
	import {
		mymap
	} from "static/map.js";
	let map;


	export default {
		data() {
			return {
				map: null,
				ak: '',
				ownerInstance: null,
			}
		},


		methods: {
			updateinitMap(newValue, oldValue, ownerInstance, instance) {
				this.initMap(newValue)
				this.ownerInstance = ownerInstance

			},
			onClick(event, isClick) {
				// 调用 service 层的方法
				this.ownerInstance.callMethod('onViewClick', {
					maplist: event,
					isClick: isClick
				})
			},
			initMap(mapList) {
				this.$nextTick(() => {
					let _this = this;
					mymap(_this.ak).then((mymap) => {
						let list = mapList
						map = new BMapGL.Map("allmap");
						let point = new BMapGL.Point(list.lng, list.lat);
						map.centerAndZoom(point, 16);
						map.setTilt(0);
						map.setHeading(0);
						map.enableScrollWheelZoom();
						var marker = new BMapGL.Marker(point);
						map.addOverlay(marker);
						map.on('click', (e) => {
							console.log(e)
							map.clearOverlays();
							var marker = new BMapGL.Marker(new BMapGL.Point(e.latlng.lng, e.latlng
								.lat));
							map.addOverlay(marker);
							_this.onClick(e.latlng, true)
						})
					});

				});
			},

		}
	}
</script>
<script>
	export default {
		data() {
			return {
				mapList: {
					lat: '',
					lng: ''
				},
				isClick: false,
				latlng: {},
				isEdit: false,
				list: {
					plotType: '',
					plotName: '',
					id:''
				}
			};
		},
		onLoad(options) {

			if (options.isEdit) {
				let list = JSON.parse(options.list)
				delete list.coordinates
				console.log(list)
				this.list = list
				this.isEdit = options.isEdit

			}
			let that = this
			uni.getLocation({
				type: 'wgs84',
				geocode: true, //设置该参数为true可直接获取经纬度及城市信息
				success: function(res) {
					console.log(res)
					that.isMap = true
					that.mapList.lat = res.latitude;
					that.mapList.lng = res.longitude;
				},
				fail: function(err) {
					console.log("获取定位失败", err);
					uni.showToast({
						title: '获取定位失败',
						icon: 'none'
					});
				}
			});
		},

		methods: {
			rightClick() {
				uni.navigateBack({
					delta: 1
				})
			},
			onViewClick(detail) {
				this.latlng = detail.maplist
				this.isClick = detail.isClick
			},
			gcj02tobd09(lng, lat) {
				var x_PI = 3.14159265358979324 * 3000.0 / 180.0;
				var PI = 3.1415926535897932384626;
				var a = 6378245.0;
				var ee = 0.00669342162296594323;
				var z = Math.sqrt(lng * lng + lat * lat) + 0.00002 * Math.sin(lat * x_PI);
				var theta = Math.atan2(lat, lng) + 0.000003 * Math.cos(lng * x_PI);
				var bd_lng = z * Math.cos(theta) + 0.0065;
				var bd_lat = z * Math.sin(theta) + 0.006;
				return {
					longitude: bd_lng,
					latitude: bd_lat
				}
			},
			nextTo() {
				let coordinates = {
					latitude: '',
					longitude: ''
				}
				if (this.isClick) {
					coordinates.latitude = this.latlng.lat
					coordinates.longitude = this.latlng.lng
				} else {
					coordinates.latitude = this.mapList.lat
					coordinates.longitude = this.mapList.lng
				}
				let b9 = this.gcj02tobd09(coordinates.longitude, coordinates.latitude)
				let list = {
					coordinates: JSON.stringify([coordinates]),
					...this.list
				}

				if (this.isEdit) {
					uni.navigateTo({
						url: `/pages/parcelInformation/parcelInformation?isEdit=${true}&list=${JSON.stringify(list)}`
					})
				} else {
					uni.navigateTo({
						url: `/pages/parcelInformation/parcelInformation?list=${JSON.stringify(list)}`
					})
				}
			},
		}
	};
</script>

<style scoped lang="scss">
	#allmap {
		width: 100vw;
		height: 100vh;
	}

	.bottomBox {
		width: 670rpx;
		height: 100rpx;
		background: #00B561;
		border-radius: 50rpx;
		margin: 12rpx auto;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
		line-height: 100rpx;
		text-align: center;
	}
</style>

map.js 地图

export function mymap(ak) {
  return new Promise(function(resolve, reject) {
    window.init = function() {
      resolve(mymap)
    }
    var script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = `http://api.map.baidu.com/api?v=1.0&type=webgl&ak=${ak}&callback=init`
    script.onerror = reject
    document.head.appendChild(script)
  })
}