Vueプロジェクト、Baiduマップ上のカスタムマーカー
1.マップにラベルを追加します
次の例では、マップの中央にラベルを追加し、デフォルトのラベルスタイルを使用します。
var point = new BMapGL.Point(116.404, 39.915);
var marker = new BMapGL.Marker(point); // 创建标注
map.addOverlay(marker); // 将标注添加到地图中
2.マップにラベルを追加します
注釈付きアイコンの定義Iconクラスを使用して、カスタム注釈アイコンを実装できます。
キー:vueプロジェクトで、インポートによって画像ファイルをインポートします。!!
次に例を示します。importdrugMarkerIconfrom '@ / assets / map / Drug_mark_icon @ 2x.png' //インポートによって画像ファイルをインポートします
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('您点击了标注')
})