脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue项目百度地图自定义标注marker

vue项目百度地图如何自定义标注marker

 更新时间：2024年03月19日 09:57:55   作者：果真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)  // 将覆盖物添加到地图中

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

相关文章

最新评论