javascript - 传单 - 将 map 置于标记中心、缩放并打开弹出窗口

Question

我有传单 map ，它从 geojson 中绘制标记并将弹出窗口绑定(bind)到它们。 GeoJSON 特征集合存储在 geojsonFeature 变量中。代码如下所示:

<script>
    var map = L.map('map').setView([42.652, 18.102], 13);

    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    var sidebar = L.control.sidebar('sidebar').addTo(map);

    function onEachFeature(feature, layer) {
        var popupContent = '<h3>'+feature.properties.Naziv+'</h>';
        if (feature.properties.Slika) {
            popupContent += '<br /><img src="slike/'+feature.properties.Slika+'.jpg" alt="Slika" style="width:300px;">';
        }     
    layer.bindPopup(popupContent);
}

    L.geoJSON(geojsonFeature, {
        onEachFeature: onEachFeature
    }).addTo(map);
</script>

这工作正常，但我想添加一个包含 map 外部要素的列表。该列表将是可单击的，并且 onClick 事件会将要素 id 传递给在选定要素上缩放 map 并打开弹出窗口的函数。

唯一的问题是我不知道如何将 map 缩放到要素并使用源 GeoJSON 中的点 ID 以编程方式打开弹出窗口。

Answer 1

找到了解决这个问题的方法。我在 map 之外添加了一个可点击的功能列表，其中包含 ID 和“ref”类。然后我制作了以下 jQuery 监听器:

$(".ref").click(function () {
        //extract ID from list HTML element
        var id=eval(this.id);
        //find object with extracted ID in original GeoJSON 
        //use object's coordinates and features to pan the map and display popup
        map.setView([geojsonFeature.features[id].geometry.coordinates[1], geojsonFeature.features[id].geometry.coordinates[0]], 16);
        var popupData = '<h3>'+geojsonFeature.features[id].properties.Naziv+'</h>';;
        if(geojsonFeature.features[id].properties.Slika) {
            popupData += '<br /><img src="slike/'+geojsonFeature.features[id].properties.Slika+'.jpg" alt="Slika" style="width:300px;">';
        }
        var popup = L.popup()
        .setLatLng([geojsonFeature.features[id].geometry.coordinates[1], geojsonFeature.features[id].geometry.coordinates[0]])
        .setContent(popupData)
        .openOn(map);            
    });