Question

我们使用leafletJS来显示圆形约100个标记的地图。这些标记中的一些位于完全相同的位置。 Marker2高于Marker1，因此Marker1不可见。有没有办法旋转标记，你可以看到有多个标记？

Answer 1

可能你应该看看https://github.com/Leaflet/Leaflet.markercluster插件这里演示 - http://leaflet.github.io/Leaflet.markercluster/example/marker-clustering-realworld.388.html

Answer 2

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的分支版本（令人困惑），它是一个合适的ES模块，因此您可以这样做：

import OverlappingMarkerSpiderfier from 'overlapping-marker-spiderfier'
const oms = new OverlappingMarkerSpiderfier(map);

但是，基于两者之间的提交，YMMV存在相当大的差异。

我正在使用原图。

Answer 3

如果有人正在寻找以下 Angular 的工作示例，请执行以下步骤

通过 npm 安装：npm i --save overlapping-marker-spiderfier-leaflet
然后在需要的组件中导入：import 'overlapping-marker-spiderfier-leaflet/dist/oms';
在导入文件的顶部添加以下行：const OverlappingMarkerSpiderfier = (<any>window).OverlappingMarkerSpiderfier;
像这样添加 oms 标记：this.oms = new OverlappingMarkerSpiderfier(this.map, { nearbyDistance: 20, keepSpiderfied: true });
在将标记添加到地图的同一位置将标记添加到 oms，以便 oms 可以正确跟踪它们this.oms.addMarker(marker);

xlm 已经给出了完整的 answer。感谢他的回答。但这是一个稍微改变的答案，在角度上对我有用。

Answer 4

我们遇到了同样的问题，遵循jsFiddle我们找到的解决方案http://jsfiddle.net/atma_tecnologia/mgkuq0gf/2/

from("jms:queue:xyz).to(MyBean.class)

在传单地图上的完全相同位置上的多个标记

4 个答案: