Vue project, custom marker on Baidu map

Vue project, custom marker on Baidu map

1. Add labels to the map

The following example adds a label to the center of the map and uses the default label style:

var point = new BMapGL.Point(116.404, 39.915);   
var marker = new BMapGL.Marker(point);        // 创建标注   
map.addOverlay(marker);                     // 将标注添加到地图中

2. Add labels to the map

Define annotated icons through the Icon class to achieve custom annotation of the icon.
Key: In the vue project, import image files by way of import! ! !
Such as: import drugMarkerIcon from'@/assets/map/[email protected]' // Import image files by 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('您点击了标注')   
})