我们使用leafletJS 来显示带有大约100 个标记的 map 。其中一些标记位于完全相同的位置。 Marker2 在 Marker1 上方,因此 Marker1 不可见。有没有办法以一种你可以看到有多个标记的方式旋转标记?
最佳答案
walla's answer 的缺点是Leaflet.markercluster需要聚类,这可能不是一个选项,具体取决于您的要求,即您需要始终显示单个标记。
OverlappingMarkerSpiderfier-Leaflet (有点拗口)在这种情况下效果很好,而且有据可查。只有当它们重叠时,它才会在单击时显示标记的“蜘蛛”,即如果缩放级别增加,标记不会重叠,那么点击时它不会“蜘蛛”,这非常好。 Demo .
它以 NPM package 的形式提供但它不是一个合适的 ES 模块,所以如果你期待一个 ES 模块,使用起来会比平时更棘手:
// Need to specifically import the distributed JS file
import 'overlapping-marker-spiderfier-leaflet/dist/oms';
// Note access to constructor via window object
// map refers to your leaflet map object
const oms = new window.OverlappingMarkerSpiderfier(map);
oms.addListener('click', (marker) => {
// Your callback when marker is clicked
});
// Markers need to be added to OMS to spider overlapping markers
markers.forEach((marker) => {
oms.addMarker(marker);
});
// Conversely use oms.removeMarker(marker) if a marker is removed
或者,有一个名为 OverlappingMarkerSpiderfier 的 fork 版本(令人困惑)。这是一个合适的 ES 模块,所以你可以这样做:import OverlappingMarkerSpiderfier from 'overlapping-marker-spiderfier'
const oms = new OverlappingMarkerSpiderfier(map);
然而,截至 2020 年 1 月 24 日,基于两者之间的提交存在相当大的分歧,因此 YMMV。FWIW我使用的是原版。
关于leaflet - 传单 map 上完全相同位置上的多个标记,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22168558/