高德地图使用-marker标记点

效果如图

1.标记点列表

var markersList =[{position: [118.922723, 31.915307],icon: {image: '../images/start.png',size: [30, 30],},name: "监控一"
}, {position: [118.903333, 31.91563],icon: {image: '../images/start.png',size: [30, 30],},name: "监控二"
}]

2.最终渲染的marker

var markers = []

3.标记点的组合渲染

for (var i = 0; i < markersList.length; i++) {markers.push({label: markersList[i].name,icon: markersList[i].icon,position: markersList[i].position,});
}markers.forEach((marker) => {var Amarker = new AMap.Marker({map: map,icon: new AMap.Icon(marker.icon),position: marker.position,offset: new AMap.Pixel(-15, -30),});Amarker.setLabel({offset: new AMap.Pixel(0, 0), //设置文本标注偏移量content: "" + marker.label + "", //设置文本标注内容direction: 'bottom' //设置文本标注方位});// 点击标记点Amarker.on('click',  (e)=> {this.popupStatus = true})
})

4.如果样式有问题也可以通过css样式去控制

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！