javascript - 传单 - 标记上的中心地图,缩放和打开弹出窗口
问题描述
我有从 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);
});
推荐阅读
- vb.net - 使用按钮单击以另一个表单调用表单
- python - 在每个组的范围内插入天数
- c# - VSIX 风格的项目,以 .NET Standard 为目标并使用新的 csproj 格式
- linkedin - Linkedin JavaScript SDK 并不总是返回用户的电子邮件地址
- angular - Angular ngrx:具有副作用的防护
- html - 指向 PayPal Gving Fund 的 HTML 按钮不起作用
- vue.js - 为什么 babelConfig 在 webpack encore 中不起作用?
- python-3.x - 熊猫删除重复但保持关系
- ios - 导航到另一个视图后阻止显示 UIAlertViewController
- javascript - Angular 2如何将对象数组放入另一个对象数组