如何使用 NUXT.js 為我的傳單地圖設置自定義標記圖標

Question

我正在嘗試更改 OpenStreetMap 上單獨標記的標記圖標。

  mapIconsReinit(L) {
    delete L.Icon.Default.prototype._getIconUrl;

    L.Icon.Default.imagePath = ''
    L.Icon.Default.mergeOptions({
      iconRetinaUrl: require('@/assets/img/map_markers/default/marker-icon-2x.png'),
      iconUrl: require('@/assets/img/map_markers/default/marker-icon.png'),
      shadowUrl: require('@/assets/img/map_markers/default/marker-shadow.png'),
    });
  },

  getMarkerIcon(L, color) {
    return L.divIcon({
      iconRetinaUrl: require('@/assets/img/map_markers/marker-icon-2x-' + color + '.png'),
      iconUrl: require('@/assets/img/map_markers/marker-icon-' + color + '.png'),
      shadowUrl: require('@/assets/img/map_markers/marker-shadow.png'),
      iconSize: [25, 41],
      iconAnchor: [12, 41],
      popupAnchor: [1, -34],
      shadowSize: [41, 41]
    })
  }

第一個函數適用於像'@/...'這樣'@/...'路徑，但第二個函數 - 不。

默認標記工作正常：

L.marker([marker.lat, marker.lng]).addTo(_context.map)

但如果我嘗試使用自定義標記：

L.marker([marker.lat, marker.lng], {icon: this.getMarkerIcon(L, "red")}).addTo(_context.map)

我看到一個白色方塊

Answer 1

您實例化一個 Leaflet DivIcon，同時傳遞適用於 Leaflet Icon 的選項。

在這種情況下使用L.icon而不是L.divIcon 。

Icon 需要 iconUrl（和其他 *Url）選項將相應的圖像放置在地圖上。

DivIcon 不放置圖像，而是放置一個裸 HTML div 元素，因此您可以用任意 HTML 內容填充它。 默認情況下，它的樣式為帶有黑色邊框的白色方塊。