【问题标题】: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 });
      }
    });
    

    【讨论】:

      猜你喜欢
      • 1970-01-01
      • 1970-01-01
      • 2020-04-09
      • 2014-03-07
      • 2021-01-25
      • 2015-07-18
      • 2016-08-18
      • 2016-10-14
      • 1970-01-01
      相关资源
      最近更新 更多