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

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之间存在相当大的差异。

FWIW我正在使用原稿。

Answer 3

我们有同样的问题，遵循我们发现的解决方案http://jsfiddle.net/atma_tecnologia/mgkuq0gf/2/的jsFiddle >>

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',
});