uniapp中用高德地图实现点击时标点功能

用uniapp中的map标签做标点功能的问题

在uniapp应用中使用 map 标签做一个用户点击标点，遇到了跟下图一样的问题，截图来自unioapp的dcloud社区，就是用户点击地图上的建筑物标识时，无法进行标点，点击事件无法触发

换为高德地图进行标点

直接上代码吧

<template>
	<view style="width: 100%;height:100%;">
		<view id="amap" class="amap" style="width: 100%;height:100%;position: absolute;left: 0;tab-size: 0;"
			:pointList="pointList" :change:pointList="ModuleMap.setParkList">
		</view>
		<u-button type="primary" @click="surePoint">确认选点</u-button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				markers: [],
				longitude: '',
				latitude: '',
				pointList: null,
			};
		},
		methods: {
			surePoint() {
				// 点击按钮，将用户点击的位置信息传出去（this.markers）
			},
			//标记点触发方法
			markerClick(e) {
				this.longitude = e.split(':')[0]
				this.latitude = e.split(':')[1]
				this.markers = [{
					latitude: this.latitude,
					longitude: this.longitude
				}]
			},
		},
		onLoad(e) {
			let point = JSON.parse(e.position)
			point.iconPath = '/static/img/map.png';
			this.markers = [point]
			// 传入的标点（反显用）
			this.longitude = point.longitude
			this.latitude = point.latitude
		},
		mounted() {
			// 将传入的标点传入下面的 ModuleMap 中
			this.pointList = [this.longitude, this.latitude];
		},
	}
</script>
<script module="ModuleMap" lang="renderjs">
	export default {
		data() {
			return {
				map: null,
				layer: null,
				markers: '',
				isExistImplement: false,
				markerId: '',
				parkList: [],
			}
		},
		watch: {
			//监听位置数据的变化，并初始化地图（有位置数据则默认给个标点）
			parkList(v) {
				setTimeout(() => {
					if (window.AMap) {
						this.initAmap(v);
					} else {
						const script = document.createElement('script');
						script.src = 'https://webapi.amap.com/maps?v=1.4.15&key=';  //这里是自己申请的高德的key
						script.onload = () => {
							this.initAmap(v);
						}
						document.head.appendChild(script);
					}
				});
			}
		},
		mounted() {

		},
		methods: {
			initAmap(marker) {
				this.map = new AMap.Map('amap', {
					resizeEnable: true,
					center: [109.189605, 27.731587], //中心点坐标
					zoom: 17, //显示的缩放级别
					zooms: [6, 30], //地图显示的缩放级别范围
				})
				//地图创建完成 标注点
				this.map.on("complete", () => {
					if (marker && marker.length) {
						this.markers = new AMap.Marker({
							icon: new AMap.Icon({
								image: 'static/img/map.png',
								size: new AMap.Size(30, 34), //图标所处区域大小
								imageSize: new AMap.Size(30, 34) //图标大小
							}),
							position: [marker[0], marker[1]],
							offset: new AMap.Pixel(-15, -30)
						});
						this.markers.setMap(this.map);
						this.map.setCenter(marker)
					}
				})
				//点击事件
				this.map.on("click", (e) => {
					if (this.markers) {
						this.markers.setMap(null);
						this.markers = null;
					}
					if (!this.markers) {
						this.markers = new AMap.Marker({
							icon: new AMap.Icon({
								image: 'static/img/map.png',
								size: new AMap.Size(30, 34), //图标所处区域大小
								imageSize: new AMap.Size(30, 34) //图标大小
							}),
							position: [e.lnglat.lng, e.lnglat.lat],
							offset: new AMap.Pixel(-15, -30)
						});
						this.markers.setMap(this.map);
						let str = e.lnglat.lng + ':' + e.lnglat.lat
						//地图点击事件 将位置信息传到上面的markerClick函数中
						this.$ownerInstance.callMethod('markerClick', str)
					}
					// this.createLabelsLayer();
				})
			},
			//接收传入的位置数据
			setParkList(newValue, oldValue, ownerInstance, instance) {
				this.parkList = newValue;
			},
		}
	}
</script>

利用renderjs将高德地图在uniapp中灵活使用，并实现了点击标点的功能，由此还可扩展多种地图功能。
最后，该方法只适用于h5和app，不适用与各种小程序

非教程，仅作记录。