gpt4 book ai didi

javascript - 传单标记簇 : open popup on childmarker after zoom in

转载 作者:行者123 更新时间:2023-11-28 14:39:38 28 4
gpt4 key购买 nike

我有一张传单 map 并使用 Leaflet.markercluster 。标记的数据来自外部服务,格式为 json。

加载 map 后,所有可见标记的弹出窗口都会按照我的意愿打开。但是当我缩小 map 时,标记将聚集在一起并且弹出窗口消失。此时一切正常,但当我放大时,我想再次打开每个子标记的弹出窗口,而不单击标记本身。

目前代码如下所示:

vehicleClusterMarkers = L.markerClusterGroup({
maxClusterRadius: 45,
spiderfyOnMaxZoom: false
});
vehicleClusterMarkers.addLayer(TTJsonLayer);

//vehicleClusterMarkers.addTo(map);
map.addLayer(vehicleClusterMarkers);

vehicleClusterMarkers.eachLayer(function(layer) {
layer.openPopup();
});

我做了一些研究,但目前我不知道如何解决这个问题。

如果有人能提供一些建议那就太好了。谢谢!

最佳答案

您有几种可能的解决方案来自动打开非聚集标记的弹出窗口。你必须使用事件监听器,你可以监听 "zoomend" ,或者可能更好,到 "layeradd"事件(因为 Leaflet.markercluster 也会从 View 中删除标记,因此在不更改缩放级别的情况下进行平移会使一些新标记出现)。

Leaflet.markercluster 插件会在标记聚集时自动从 map 中删除标记,并在标记取消聚集时将其添加回来。

“layeradd”上,检查添加的层是否是一个单独的Marker(即L.Marker类的实例),而不是一个Cluster。如果是单个Marker,则打开其弹出窗口:

var map = L.map("map", {
closePopupOnClick: false,
maxZoom: 18
}).setView([48.85, 2.35], 11);

map.on('layeradd', function(event) {
var layer = event.layer;

if (layer instanceof L.Marker && !(layer instanceof L.MarkerCluster)) {
layer.openPopup();
}
});

var mcg = L.markerClusterGroup();

for (var i = 0; i < 10; i += 1) {
L.marker(getRandomLatLng()).addTo(mcg).bindPopup('Marker ' + i, {
autoClose: false,
autoPan: false
});
}

mcg.addTo(map);

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

function getRandomLatLng() {
return [
48.8 + 0.1 * Math.random(),
2.25 + 0.2 * Math.random()
];
}
<!-- Leaflet assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.1/dist/leaflet.css" integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.1/dist/leaflet-src.js" integrity="sha512-IkGU/uDhB9u9F8k+2OsA6XXoowIhOuQL1NTgNZHY1nkURnqEGlDZq3GsfmdJdKFe1k1zOc6YU2K7qY+hF9AodA==" crossorigin=""></script>

<!-- Leaflet.markercluster assets -->
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.css">
<link rel="stylesheet" href="https://unpkg.com/leaflet.markercluster@1.3.0/dist/MarkerCluster.Default.css">
<script src="https://unpkg.com/leaflet.markercluster@1.3.0/dist/leaflet.markercluster-src.js"></script>

<div id="map" style="height: 200px"></div>

关于javascript - 传单标记簇 : open popup on childmarker after zoom in,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48524082/

28 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com