vue项目百度地图如何自定义标注marker
作者：果真zZ
这篇文章主要介绍了vue项目百度地图如何自定义标注marker问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue百度地图自定义标注marker
1、向地图中添加标注
如下示例，向地图中心点添加了一个标注，并使用默认的标注样式：
var point = new BMapGL.Point(116.404, 39.915); var marker = new BMapGL.Marker(point); // 创建标注 map.addOverlay(marker); // 将标注添加到地图中
2、向地图中添加标注
定义标注图标 通过Icon类可实现自定义标注的图标
重点：
vue项目中，以import的方式导入图片文件！！！
如：
import drugMarkerIcon from ‘@/assets/map/drug_mark_icon@2x.png' // 以import的方式导入图片文件
var point = new BMapGL.Point(116.404, 39.915)
var myIcon = new BMapGL.Icon(drugMarkerIcon, new BMapGL.Size(28, 34))
var marker = new BMapGL.Marker(point, { icon: myIcon }) // 创建标注
this.map.addOverlay(marker) // 将标注添加到地图中
marker.addEventListener('click', function () { //监听标注点击事件
alert('您点击了标注')
})vue中Bmap百度地图自定义带标签的图标
效果如图
直接上代码吧
let point = new BMap.Point('经度', '维度')
let mk = new BMap.Marker(point) // 创建一个图像标注实例，enableDragging：是否启用拖拽，默认为false, icon 自定义图标
var label = new BMap.Label(item.address, {
offset: new BMap.Size(0, 25),
});
mk.setLabel(label); // 为marker定义标签
this.map.addOverlay(mk) // 将覆盖物添加到地图中
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。