英文:
Leaflet popupclose fuction is not reseting the map view as defined
问题
我有一个Leaflet地图，用于可视化市中心地区的许多要素。我正在使用弹出窗口来可视化有关每个要素的附加信息。
当用户关闭弹出窗口时，我希望地图重新居中到原始位置和缩放级别。这应该使用popupclose和setview来支持。然而，这段代码似乎不起作用。我的脚本如下。
<script>
var map = L.map('map', {minZoom: 15,}).setView([40.66,-73.6466], 17);
L.tileLayer('http://basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
/* GeoJSON要素数据的开始 */
var geojsonFeature = /* 帖子中省略了要素数据 */
/* GeoJSON要素数据的结束 */
L.geoJSON(geojsonFeature, {
onEachFeature: function(feature, layer) {
var picture;
if (feature.properties.picture_url) {
picture = '<img src="' + feature.properties.picture_url + '"/>';
} else {
picture = '<img class="default-img" src="default_image.png" style="visibility:hidden;"/>';
}
var popup = L.popup({autoPan: true, keepInView: true, maxHeight: 500, autoPanPadding: [50, 50]})
.setContent('<div class="popup_name">' + feature.properties.name + '</div>' + '<br>' + '<div class="popup_address">' + feature.properties.address + '</div>' + '<br>' + '<br>' + '<div class="popup_description">' + feature.properties.description + '</div>' + '<br>' + '<div class="popup_picture">' + picture + '</div>');
layer.bindPopup(popup);
}
}).addTo(map);
map.on('popupclose', function(e) {
console.log("关闭弹出窗口!!!!");
map.setView([40.66,-73.6466], 17);
}
</script>
地图可视化正常，弹出窗口也是正确的。但是当关闭弹出窗口时，地图没有重新居中。有人能告诉我为什么这不起作用吗？
请注意，我已经校正了您提供的HTML代码，以便更清晰地显示内容。如果您仍然遇到问题，您可能需要检查JavaScript代码是否正确，确保map.on('popupclose', function(e) {...}的括号放在正确的位置。
英文:
I have a Leaflet map that visualizes a bunch of features in a downtown area. I am using popups to visualize additional information about each feature.
When the user closes the popup, I want the map to re-center to the original position and zoom level. This should be supported using popupclose and setview. However, this code does not seem to be working. My script is below.
<script>
var map = L.map('map', {minZoom: 15,}).setView([40.66,-73.6466], 17);
L.tileLayer('http://basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png', {
attribution: '&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
/* Beginning of Feature Data in GeoJSON */
var geojsonFeature = /* feature data omitted from post */
/* End of Feature Data in GeoJSON */
L.geoJSON(geojsonFeature, {
onEachFeature: function(feature, layer) {
var picture;
if (feature.properties.picture_url) {
picture = '<img src="' + feature.properties.picture_url + '"/>';
} else {
picture = '<img class="default-img" src="default_image.png" style="visibility:hidden;"/>';
}
var popup = L.popup({autoPan: true, keepInView: true, maxHeight: 500, autoPanPadding: [50, 50]})
.setContent('<div class="popup_name">' + feature.properties.name + '</div>' + '<br>' + '<div class="popup_address">' + feature.properties.address + '</div>' + '<br>' + '<br>' + '<div class="popup_description">' + feature.properties.description + '</div>' + '<br>' + '<div class="popup_picture">' + picture + '</div>');
layer.bindPopup(popup);
}
}).addTo(map);
map.on('popupclose'), function(e) {
console.log("closing popup!!!!")
map.setView([40.66,-73.6466], 17);
}
</script>
The the map is visualizing correctly and the popups are correct. But the map is not re-centering when the popup is closed. Can anyone tell me why this isn't working?
</details>
# 答案1
**得分**: 1
可能是因为有一个错误。
```javascript
map.on("popupclose", function (e) {
console.log("closing popup!!!!");
map.setView([40.66, -73.6466], 17);
});
英文:
Maybe because there is an error.
map.on('popupclose'), function(e) {
console.log("closing popup!!!!")
map.setView([40.66,-73.6466], 17);
}
and it should be
map.on("popupclose", function (e) {
console.log("closing popup!!!!");
map.setView([40.66, -73.6466], 17);
});
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论