uniapp微信小程序实现对地图多点或单点标记（@莫成尘）

先看代码，复制使用即可。您将看到以下效果：

注意：icon图标需要自行下载并替换，此外调用我本地的地图密钥可能有上线次数，请使用调试不要超过50次！如果无法出现效果 请注意报错信息 可能是调用上线 请自行在高德地图申请密钥

<template>
	<view class="box">
		<map name="" :markers="markers"></map>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				addressA:"北京市昌平区", //标记点A 
				addressB:"天津市西青区", //标记点B  其他多点或单点请自行尝试
				list:[],
				markers:[
					{ //标记点A 的信息
						iconPath: "../../static/weizhi.png",  //图标
						id: 0,
						width: 20, //图标icon 宽度
						height: 28 //图标icon 高度
					},
					{
						iconPath: "../../static/weizhi3.png",
						id: 1,
						width: 20,
						height: 28
					}
				]
			}
		},
		methods: {
			map() {
				let _this = this
				var key = "ff309ed17221397704ae790a6dacea43"; //地图密钥  请注意调用次数  或自行在高德地图申请密钥
				var URL =
					"https://restapi.amap.com/v3/geocode/geo?batch=true&address=" +
					_this.addressA + //标记点A
					"|" +
					_this.addressB + //标记点B
					"&key=" +
					key;
				uni.request({
					url:URL,
					success(res) {
						_this.list = res.data.geocodes //获取到地图信息
						_this.markers[0].longitude =Number(_this.list[0].location.split(",")[0]) //标记点A经度
						_this.markers[0].latitude = Number(_this.list[0].location.split(",")[1]) //标记点A纬度
						_this.markers[1].longitude = Number(_this.list[1].location.split(",")[0]) //标记点B经度
						_this.markers[1].latitude = Number(_this.list[1].location.split(",")[1]) //标记点B纬度
						console.log(_this.markers[0],_this.markers[1]) //完整的标记信息
					}
				})
			},
			
		},
		onLoad() {
			let _this = this;
			_this.map() //需要自执行
		}
	}
</script>

<style lang="scss" scoped>
	.box {
		width: 100%;
		height: 100%;
	}

	map {
		width: 100%;
		height: 1000rpx;
		color: red;
	}
</style>

其他有关uniapp的疑问或者此方法不理解的地方您可留言，我会尽快回复并帮您解决。