Projeto Vue, marcador personalizado no mapa do Baidu
1. Adicione rótulos ao mapa
O exemplo a seguir adiciona um rótulo ao centro do mapa e usa o estilo de rótulo padrão:
var point = new BMapGL.Point(116.404, 39.915);
var marker = new BMapGL.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
2. Adicione rótulos ao mapa
Definindo ícones anotados Por meio da classe Icon, você pode implementar ícones de anotação personalizados
Chave: No projeto vue, importe arquivos de imagem por importação! ! !
Por exemplo: import drugMarkerIcon de '@ / assets/map/[email protected]' // Importar arquivos de imagem por importação
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('您点击了标注')
})