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

浅浅的花香味﹌ 2022-10-31 12:28 626阅读 0赞

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

![版权属于莫成尘][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzgyMTI4MQ_size_16_color_FFFFFF_t_70_pic_center]

### 注意：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的疑问或者此方法不理解的地方您可留言，我会尽快回复并帮您解决。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NzgyMTI4MQ_size_16_color_FFFFFF_t_70_pic_center]: /images/20221024/d62bee4a4be04574a40e9db6b0010baa.png