Javascript 如何使用传单更改每个图层上的地图标记颜色?

Javascript 如何使用传单更改每个图层上的地图标记颜色?,javascript,html,leaflet,Javascript,Html,Leaflet,我试图改变地图标记颜色的每一层从一个答案,我收到以前。下面的代码创建不同的图层,所有地图标记的颜色相同。我有3个png文件本地组成的红色,蓝色和绿色地图标记图像 // create groups to add the markers var solarGroup = L.featureGroup().addTo(map); var hydroGroup = L.featureGroup().addTo(map); var windGroup = L.featureGroup().addTo(ma

我试图改变地图标记颜色的每一层从一个答案,我收到以前。下面的代码创建不同的图层,所有地图标记的颜色相同。我有3个png文件本地组成的红色,蓝色和绿色地图标记图像

// create groups to add the markers
var solarGroup = L.featureGroup().addTo(map);
var hydroGroup = L.featureGroup().addTo(map);
var windGroup = L.featureGroup().addTo(map);

// use the L.geoJSON to convert the geojson into layers
L.geoJSON(json,{
    onEachFeature: function (feature, layer) {
    // create a marker and add them to the correct group
    if(feature.properties.primary_fuel === "Solar"){
        L.marker(layer.getLatLng())
          .bindPopup("<h2>" + feature.properties.name + "<h2> <hr> <h3>Primary Fuel " + feature.properties.primary_fuel + "</h3>")
          .addTo(solarGroup);
    }else if(feature.properties.primary_fuel === "Hydro"){
        L.marker(layer.getLatLng(), {icon: myIcon})
          .bindPopup("<h2>" + feature.properties.name + "<h2> <hr> <h3>Primary Fuel " + feature.properties.primary_fuel + "</h3>")
          .addTo(hydroGroup);
    } else if(feature.properties.primary_fuel === "Wind"){
        L.marker(layer.getLatLng())
          .bindPopup("<h2>" + feature.properties.name + "<h2> <hr> <h3>Primary Fuel " + feature.properties.primary_fuel + "</h3>")
          .addTo(windGroup);
    }
  }
})

// create Layer Control
var overlayMaps = {
    "Solar": solarGroup,
    "Hydro": hydroGroup,
    "Wind": windGroup
}
L.control.layers(null, overlayMaps).addTo(map);


您显示的代码中似乎没有任何特别错误。你的蓝色图标看起来像什么?弹出内容是否正确填写?你的3个不同的图层是否都相应地填充了你的数据?我得到了地图,但卸载的图像图标作为地图标记,这是一个更具体的问题。屏幕截图会很好,但最重要的是共享您的项目文件结构是必要的。您是否使用任何框架或构建引擎?这是一个查找图像问题的过程,我使用../static/images/file.pngI修复了它。我投票结束这个问题,因为它在评论中得到了回答,并且是一个特定的用户问题,其他用户的回答比OP self更好。
var myIcon = L.icon({
  iconUrl: 'static/images/blue.png',
  iconSize: [38, 95],
  iconAnchor: [22, 94],
  popupAnchor: [-3, -76],
  shadowUrl: 'my-icon-shadow.png',
  shadowSize: [68, 95],
  shadowAnchor: [22, 94]
});