【记录4】uniapp Map地图组件 动态渲染markers

使用map组件加载地图后，动态添加标记点

1. 首先在map标签绑定要标记的点

2. 在data里面定义point,地图加载一开始没有标记的话就为空数组

要是一开始需要标记就按以下格式填入数据

points:[{
					id:1,//点击事件会调用此id,建议不同点设置不同id
					title:'兰州',//标记点的名称
					latitude:36.061089,//纬度
					longitude:103.834303,//经度
					iconPath:'/static/image/point.png',//图标样式路径,用绝对路径,不要写前面的../
					width:20,//图标宽度
					height:20,//图标高度
				}]

注意:小程序的话,iconPath路径使用绝对路径,去掉前面的…/,图标格式的话svg好像是不行,建议png

3. 下面调用后台数据,更改marker位置

拿到后台数据后,不能直接改data里面的point下的value,要定义一个其它的变量,然后用这个变量替换data里面的整个points

let updatePoints = [
					{
						id:1,
						title:res.data.address,
						latitude:res.data.lat,
						longitude:res.data.lng,
						iconPath: '/static/image/point.png',
						width:20,
						height:20
					}
				]
				that.Points = updatePoints

这里面的iconPath还是绝对路径

//这里我
let that = this