博客 / 詳情

返回

在vue3+ts+vite項目中用BMap百度地圖自定義定位icon不顯示

image.png

  1. 自定義icon路徑,不能直接使用路徑地址,需要require包裹

    var myIcon = new window.BMap.Icon(require("@/assets/icon.png", new window.BMap.Size(26, 32));
  2. 那麼問題來了,vite+typescript項目不允許使用靜態資源加載方法require,如果使用require關鍵字就會報錯,那肯定沒法顯示座標點。
  3. 所以我們使用import來解決
let imgUrl = ref('')

onMounted(async () => {
    let img = await import("/@/assets/41-placeholder.svg")
    imgUrl.value = img.default
}
  1. 使用
var map = new window.BMap.Map("container");          // 創建地圖實例
map.centerAndZoom(point, 15);
map.enableScrollWheelZoom(true); // 鼠標滾動縮放
// 自定義座標路徑地址
var myIcon = new window.BMap.Icon(imgUrl.value, new window.BMap.Size(26, 32));
myIcon.setImageSize(new window.BMap.Size(26, 32))
var marker = new window.BMap.Marker(new window.BMap.Point(116.399, 39.910), {icon: myIcon});
map.addOverlay(marker);
user avatar iamguyu 頭像 wangji_5d01acdfdd139 頭像
2 位用戶收藏了這個故事!

發佈 評論

Some HTML is okay.