如何在传单.js中显示每个choropleth弹出窗口的唯一名称和URL

How to show the unique name and URL of a each choropleth popup in Leaflet.js

本文关键字：窗口 唯一 URL choropleth js 显示      更新时间：2023-09-26

我在处理传单choropleth的例子，试图有一个弹出窗口，显示每个州的名称和它自己的URL，这些都写在varStatesjson中。

在我的本地示例中，我将每个状态的名称和URL作为属性，但我无法获得.bindPopup来引用json中的道具。它只能显示"中包含的文本。

我的例子是：jsfiddle.net/yLa4acvy/1/

我试过类似的东西

    .bindPopup( props.name + "<br> <a href='localhost/'" + props.url_id + "'>This company</a>")

但是，即使我为属性创建了新的var并引用了它们，也无法使其工作。

编辑：我找到了一个地图框解决方案，尽管我仍然想知道如何在传单中做到这一点：https://www.mapbox.com/mapbox.js/example/v1.0.0/custom-marker-tooltip/

正如我之前在评论中提到的，您必须在onEachFeture函数中绑定弹出窗口，类似于以下内容：

L.geoJson('data', {
    onEachFeature: function(feature, layer) {
        layer.on('click', function() {
            //you bind the popup here, you can acces any property of your Geojson with feature.properties.propertyname
            layer.bindPopup('<p>' + feature.properties.name + '</p><p>' + feature.properties.density + '</p>').openPopup();
        });
    }
});

以下是一个更新的JSFiddle演示：http://jsfiddle.net/yLa4acvy/2/

相关文章：