Множественный маркер на одной и той же позиции на карте листовки

Question

Мы используем буклет JS, чтобы показать карты с около 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 является то, что https://github.com/Leaflet/Leaflet.markercluster требует кластеризации, которая может не подходить в зависимости от ваших требований, т.е. вам нужно всегда отображать отдельные маркеры.

В этом случае хорошо работает https://github.com/jawj/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);

Однако есть небольшое расхождение, основанное на коммитах между ними, так что YMMV.

FWIW Я использую оригинал.

Answer 3

Если кто-то ищет рабочий образец для 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 в том же месте, где вы добавляете маркеры на карту, чтобы омы могли их правильно отслеживать. this.oms.addMarker(marker);

xlm уже дал полный ответ . Спасибо ему за этот ответ. Но это немного измененный ответ, который сработал для меня в angular.

Answer 4

У нас была та же проблема, следует 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',
});