单击并显示弹出窗口时切换标记颜色

时间:2015-09-28 16:08:40

标签: leaflet mapbox

我有一个geojson featurelayer,对于每个标记,我可以绑定一个弹出窗口  我可以修改属性以更改标记颜色,但我无法混合两者。 我想改变颜色并显示弹出窗口。我跟着这个 mapbox example

似乎当我添加点击事件来更改颜色时,它会停用"停用"弹出窗口...... 只要我删除此点击事件,就会显示弹出窗口 编辑:此代码正在运行

featureLayer = L.mapbox.featureLayer()
.loadURL( getUrl() )
.on('ready', setStyle)
.on('click', function(e) {
    e.layer.bindPopup(e.layer.feature.properties.name);
    resetColors();
    e.layer.feature.properties['old-color'] = e.layer.feature.properties['marker-color'];
    e.layer.feature.properties['marker-color'] = '#ffffb2';
    featureLayer.setGeoJSON(geoJson);
    setPopup();
})
.addTo(map);
function resetColors() {
for (var i = 0; i < geoJson.features.length; i++) {
    geoJson.features[i].properties['marker-color'] = geoJson.features[i].properties['old-color'] || geoJson[i].features.properties['marker-color'];
}
}

function setStyle() { 

geoJson = featureLayer.getGeoJSON();
for (var i = 0; i < geoJson.features.length; i++) {

    if(geoJson.features[i].properties['d'] <= distanceLocal)
        var color = '#a1d99b';
    else
        var color = '#636363';

    geoJson.features[i].properties['marker-color'] = color;
    geoJson.features[i].properties['old-color'] = color;
}
featureLayer.setGeoJSON(geoJson);
setPopup();
}
function setPopup() { 


featureLayer.eachLayer(function(marker) {
    marker.bindPopup(marker.feature.properties.name);
});
}

1 个答案:

答案 0 :(得分:0)

当您使用此行featureLayer.setGeoJSON(geoJson);

这样您每次都可以更改要素图层的上下文,因此为了触发弹出窗口和颜色更改,您需要执行以下两个步骤

  • 使用e.layer.openPopup();
  • 更改e.layer.bindPopup();
  • resetColors();之前移动此行,即此行e.layer.bindPopup();将成为点击功能内的第一行。

注意:如果不起作用,请不要犹豫,在评论中提及