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/[email protected]’ // 以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('您点击了标注')   
})

猜你喜欢

转载自blog.csdn.net/qq_39367226/article/details/109579874