[英]Leaflet - Center map on marker, zoom and open popup
我有傳單地圖,可從geojson繪制標記並將彈出窗口綁定到它們。 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: '© <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>
效果很好,但我想添加一個地圖外的列表。 該列表將是可單擊的,並且onClick事件會將功能ID傳遞給該功能,該功能會縮放所選功能上的地圖並打開彈出窗口。
唯一的問題是,我不知道如何使用源GeoJSON中的點的ID來縮放地圖至地圖項並以編程方式打開彈出窗口。
找到了解決此問題的方法。 我在地圖外部添加了一個可點擊的功能列表,其中包含ID-s和“ 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);
});
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.