Я пытаюсь следовать этой демонстрации для плагина листовки OverlappingMarkerSpiderfier , чтобы получить маркеры перекрытия для паука, но с маркерами я определил себя, но не могу заставить его работать.(Я также не могу заставить их скрипт работать).
Приведенный ниже код запускается и отображает два маркера, как я ожидаю, однако не отображает ожидаемое поведение (паук).Если кто-то может указать мне, где я иду не так, это будет оценено.Я подозреваю, что проблема в том, как я добавляю маркеры в слой oms, или я не добавляю этот слой правильно, но я не знаю, как это исправить.Я не смог найти много минимальных примеров онлайн, чтобы попробовать мимику.
<!DOCTYPE html>
<html>
<head>
<title> My Leaflet.js Map</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.4/dist/leaflet.css" integrity="sha512-puBpdR0798OZvTTbP4A8Ix/l+A4dHDD0DGqYW6RQ+9jxkRFclaxxQb/SJAWZfWAkuyeQUytO7+7N4QKrDh+drA==" crossorigin="" />
<script src="https://unpkg.com/leaflet@1.3.4/dist/leaflet.js" integrity="sha512-nMMmRyTVoLYqjP9hrbed9S+FzjZHW5gY1TWCHA5ckwXZBadntCNs8kEqAWdrb9O7rxbCaA4lKTIWjDXZxflOcA==" crossorigin=""></script>
<script src="oms.min.js"></script>
<style>
#map {
height: 800px;
}
</style>
<script type="text/javascript">
function init() {
let map = new L.map('map', {
minZoom: 3,
maxZoom: 6
}).setView([20.91, 142.70], 5);
let osmLink = "<a href='http://www.openstreetmap.org'>Open StreetMap</a>"
let osm = L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: 'Map data © ' + osmLink,
maxZoom: 18,
}).addTo(map)
var oms = new OverlappingMarkerSpiderfier(map);
var popup = new L.Popup({
closeButton: false,
offset: new L.Point(0.5, -24)
});
oms.addListener('click', function(marker) {
popup.setContent(marker.desc);
popup.setLatLng(marker.getLatLng());
map.openPopup(popup);
});
oms.addListener('spiderfy', function(markers) {
for (var i = 0, len = markers.length; i < len; i++) markers[i].setIcon(new lightIcon());
map.closePopup();
});
oms.addListener('unspiderfy', function(markers) {
for (var i = 0, len = markers.length; i < len; i++) markers[i].setIcon(new darkIcon());
});
let pt1aLatLong = L.latLng(21, 142.6);
let pt1aMarker = L.marker(pt1aLatLong, {
title: "This is the first marker that I have added",
alt: "A marker",
opacity: 0.7
}).addTo(map);
let pt1bLatLong = L.latLng(21.1, 142.6);
let pt1bMarker = L.marker(pt1bLatLong, {
title: "This is a copy marker",
alt: "A marker",
opacity: 0.9
}).addTo(map);
oms.addMarker(pt1bMarker);
oms.addMarker(pt1aMarker);
}
</script>
</head>
<h1></h1>
<body onload=init()>
<div id="map"> </div>
</html>
РЕДАКТИРОВАТЬ: опечатка в коде исправлена
let pt1LatLong = L.latLng (21, 142,6);let pt1Marker = L.marker ( pt1LatLon g,
с полужирным сечением исправлен так, чтобы он соответствовал pt1a ... в соответствии с командой oms.addMarker.