我有一个用于位置共享的 Leaflet 地图。当用户分享他们的位置时,会在地图上添加一个标记以供其他用户查看。每当添加、移动或删除标记时,它会自动调整地图以显示所有标记。我还添加了一个自定义控件,可以切换自适应行为。这一切都很好,但我还想让地图变得更智能,能够在用户平移或缩放地图时自动关闭自适应行为。
这实际上相当困难,因为我无法找到一个好的方法来区分用户还是自动适配所引起的平移/缩放操作。我最初是监听 panstart 和 zoomstart 事件,但这些事件也会被自适应所触发。我想设置一个标志,告诉它在自适配引起的缩放/平移时不要关闭自适应。我先检查这个标志,然后在收到 panstart 和 zoomstart 后才关闭自适应,并在收到 panend 和 zoomend 时清除它。
这似乎可以正常工作,直到发生一个不导致平移或缩放的自适应。假设我们有一个大的自适应聚类标记,并且其中一个标记被移除。由于边界框没有改变,因此不会触发平移或缩放,因此告诉它不要关闭自适应的标志永远不会被清除。用户下次平移或缩放地图时,它不会像应该一样关闭自适应,因为它认为仍处于自适应操作中。 我该如何可靠地在用户直接平移或缩放地图时关闭自适应,但在其他情况下保留它? 以下是相关代码:
这实际上相当困难,因为我无法找到一个好的方法来区分用户还是自动适配所引起的平移/缩放操作。我最初是监听 panstart 和 zoomstart 事件,但这些事件也会被自适应所触发。我想设置一个标志,告诉它在自适配引起的缩放/平移时不要关闭自适应。我先检查这个标志,然后在收到 panstart 和 zoomstart 后才关闭自适应,并在收到 panend 和 zoomend 时清除它。
这似乎可以正常工作,直到发生一个不导致平移或缩放的自适应。假设我们有一个大的自适应聚类标记,并且其中一个标记被移除。由于边界框没有改变,因此不会触发平移或缩放,因此告诉它不要关闭自适应的标志永远不会被清除。用户下次平移或缩放地图时,它不会像应该一样关闭自适应,因为它认为仍处于自适应操作中。 我该如何可靠地在用户直接平移或缩放地图时关闭自适应,但在其他情况下保留它? 以下是相关代码:
var markers = []; // Map markers are stored in this array.
var autoFit = true; // Whether auto-fit is turned on
var lockAutoFit = false; // Temporarily lock auto-fit if true
var map; // Leaflet map object
function initMap() {
// Leaflet map initialized here
map.on('movestart zoomstart', function() {
if (!lockAutoFit) {
autoFit = false;
}
});
map.on('moveend zoomend', function() {
lockAutoFit = false;
});
}
function toggleAutoFit() {
autoFit = !autoFit;
if (autoFit) {
lockAutoFit = true;
fitMap();
}
}
function addOrUpdateMarker(marker, coords) {
lockAutoFit = true;
// do the marker update here
fitMap();
}
function removeMarker(marker) {
lockAutoFit = true;
// remove the marker here
fitMap();
}
// Pans and zooms the map so that all markers fit in the map view.
// Invoked whenever a marker is added, moved or deleted, or when
// the user turns on auto-fit.
function fitMap() {
if (!autoFit || !markers.length) {
return;
}
map.fitBounds(new L.featureGroup(markers).getBounds());
}