传单 - 地图上更多不同的图标答案

【问题标题】：Leaflet - more different icons on the map传单 - 地图上更多不同的图标
【发布时间】：2021-12-03 19:32:21
【问题描述】：

我目前正在为我的项目使用这个库

https://github.com/codersgyan/leaflet-store-locator

我想为类别添加不同的图标，比如这里

我将它添加到 JSON，但我无法显示图标

{
        "type": "Feature",
        "geometry": {
          "type": "Point",
          "coordinates": [ xxxxx, xxxxxx]
        },
        "properties": {
          "name": "xxx",
          "city": "xxx",
          "address": "xxx",
    
           "icon": {
            "iconUrl": "https icon url",
            "iconSize": [55, 55],
            "iconAnchor": [50, 50],
            "popupAnchor": [-15, -50],
            "className": "dot"
        }
        }
      },

【问题讨论】：

标签： javascript leaflet mapbox

【解决方案1】：

这段代码中有一个地方需要修改： leaflet-store-locator

var myIcon = L.icon({
  iconUrl: 'marker.png',
  iconSize: [30, 40]
});

const shopsLayer = L.geoJSON(storeList, {
  onEachFeature: onEachFeature,
  pointToLayer: function(feature, latlng) {
    return L.marker(latlng, { icon: myIcon });
  }
});

您需要将其添加到 pointToLayer 函数中，而不是全局设置标记。

const shopsLayer = L.geoJSON(storeList, {
  onEachFeature: onEachFeature,
  pointToLayer: function(feature, latlng) {

    // check what you have exactly in the 'feature'
    // console.log(feature);
    var myIcon = L.icon({     
      // I'm not sure of the path, that's why it's above console.log(feature);
      iconUrl: feature.properties.icon.iconUrl,
      iconSize: feature.properties.icon.iconSize, 
      // and here is the rest of the icon configuration
    }); 
    return L.marker(latlng, { icon: myIcon });
  }
});

【讨论】：