如何在Leaflet地图多边形上触发事件？

Question

我正在试图弄清楚如何手动触发Leaflet多边形的事件（通过GeoJSON加载）。

简而言之，我有一张带有多个多边形的Leaflet地图。我还在地图外部有一个常规超链接，当点击它时，应该触发特定多边形上的鼠标悬停事件（或任何事件）。

如何为所有多边形分配ID，以便我可以将超链接绑定到特定多边形的事件？或者这甚至是最合乎逻辑的做法？

最终，我正在尝试创建一个包含大量多边形的地图以及与每个多边形相关联的html文本标签表。单击HTML表格文本时，我想在地图多边形上触发事件（反之亦然）。我只是不知道如何引用每个多边形。

这是我非常简化的HTML：

<body>

    <div id="map" style="height: 550px; width:940px"></div>

    <a href="#" id="testlink">Click to trigger a specific polygon mouseover event</a>

</body>

这是我非常简化的JS：

$(document).ready(function () {

// build the map and polygon layer
function buildMap(data) {

    var map = new L.Map('map');

    var cloudmadeUrl = 'http://{s}.tile.cloudmade.com/***yourkeyhere***/66267/256/{z}/{x}/{y}.png',
        cloudmadeAttribution = '',
        cloudmade = new L.TileLayer(cloudmadeUrl, {maxZoom: 18, attribution: cloudmadeAttribution});

    var mapLoc = new L.LatLng(43.675198,-79.383287);
    map.setView(mapLoc, 12).addLayer(cloudmade);

    var geojsonLayer = new L.GeoJSON(null, {});

    geojsonLayer.on("featureparse", function (e){

        // apply the polygon style
        e.layer.setStyle(polyStyle);

        (function(layer, properties) {
            layer.on("mouseover", function (e) {
                // change the style to the hover version
                layer.setStyle(polyHover);
                });
            });
            layer.on("mouseout", function (e) {
                // reverting the style back
                layer.setStyle(polyStyle);
            });
            layer.on("click", function (e) {
                // do something here like display a popup
                console.log(e);
            });
        })(e.layer, e.properties);

    });

    map.addLayer(geojsonLayer);

    geojsonLayer.addGeoJSON(myPolygons);    

}

// bind the hyperlink to trigger event on specific polygon (by polygon ID?)
$('#testlink').click(function(){
    // trigger a specific polygon mouseover event here
});

});

Answer 1

另一答案

Answer 2

另一答案