20

我们使用leafletJS 来显示带有大约100 个标记的地图。其中一些标记位于完全相同的位置。Marker2 在 Marker1 上方,因此 Marker1 不可见。有没有办法以一种你可以看到有多个标记的方式旋转标记?

4

4 回答 4

21

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

于 2014-03-04T13:37:33.467 回答
4

walla 的答案的缺点是Leaflet.markercluster需要聚类,根据您的要求,这可能不是一个选项,即您需要始终显示单个标记。

OverlappingMarkerSpiderfier-Leaflet(有点拗口)在这种情况下效果很好,并且记录得很好。只有当它们重叠时,它才会在点击时显示一个“蜘蛛”标记,即如果缩放级别增加所以标记不重叠,那么它不会在点击时“蜘蛛”,这非常好。演示

它可以作为NPM 包使用,但它不是一个合适的 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);

然而,截至 2020 年 1 月 24 日,基于两者之间的提交存在相当大的分歧,因此 YMMV。

FWIW我使用的是原版。

于 2020-01-24T04:06:47.530 回答
1

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

  1. 通过 npm 安装它:npm i --save overlapping-marker-spiderfier-leaflet

  2. 然后在需要的组件中导入:import 'overlapping-marker-spiderfier-leaflet/dist/oms';

  3. 在导入它的文件顶部添加这一行:const OverlappingMarkerSpiderfier = (<any>window).OverlappingMarkerSpiderfier;

  4. 像这样添加 oms 标记:this.oms = new OverlappingMarkerSpiderfier(this.map, { nearbyDistance: 20, keepSpiderfied: true });

  5. 在将标记添加到地图的同一位置将标记添加到 oms,以便 oms 可以正确跟踪它们this.oms.addMarker(marker);

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

于 2021-07-28T10:35:17.297 回答
-5

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

var marker1 = new google.maps.Marker({
  position: myLatLng,
  map: map,
  icon: {
    url: image,
    size: new google.maps.Size(134,130), //different sizes
  },
  zIndex: 2, //different overlays
  title: '1º marker',
});
于 2015-06-01T14:49:56.670 回答