Javascript 如何使用传单更改每个图层上的地图标记颜色?
我试图改变地图标记颜色的每一层从一个答案,我收到以前。下面的代码创建不同的图层,所有地图标记的颜色相同。我有3个png文件本地组成的红色,蓝色和绿色地图标记图像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
// 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]
});