Question

我正在尝试按照本演示程序来制作传单插件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 &copy; ' + 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）; 让 pt1Marker = L.marker（ pt1LatLon g，

将匹配的部分修正为 pt1a ... ，以匹配oms.addMarker命令。

Answer 1

问题在于定义每个标记后的.addTo(map)-应该将其删除并替换为map.addLayer(pt1bMaker)

    <!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 &copy; ' + 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
      })
      map.addLayer(pt1aMarker)
      oms.addMarker(pt1aMarker);

      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
      })
      map.addLayer(pt1bMarker);
      oms.addMarker(pt1bMarker);


    }
  </script>
</head>
<h1></h1>

<body onload=init()>
  <div id="map"> </div>

</html>

使OverlappingMarkerSpiderfier和Leaflet起作用的问题

1 个答案: