Proyecto Vue, marcador personalizado en el mapa de Baidu

Proyecto Vue, marcador personalizado en el mapa de Baidu

1. Agrega etiquetas al mapa

El siguiente ejemplo agrega una etiqueta al centro del mapa y usa el estilo de etiqueta predeterminado:

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

2. Agrega etiquetas al mapa

Definición de íconos anotados A través de la clase Icon, puede implementar íconos de anotación personalizados
Clave: En el proyecto vue, ¡importe archivos de imagen por importación! ! !
Por ejemplo: import drugMarkerIcon from '@ / assets/map/[email protected]' // Importar archivos de imagen por importación

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('您点击了标注')   
})