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