个人中心
gpt4 book ai didi

javascript - 让 OverlappingMarkerSpiderfier 和 Leaflet 工作的问题

转载 作者：行者123 更新时间：2023-11-30 06:22:23 25 4
gpt4 key购买 nike

我正在尝试按照传单插件的演示进行操作 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>

编辑:更正代码中的拼写错误

让 pt1LatLong = L.latLng(21, 142.6);让pt1Marker = L.marker(pt1LatLong,

粗体部分更正为 pt1a... 以匹配 oms.addMarker 命令。

最佳答案

问题是定义每个标记后的 .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>

关于javascript - 让 OverlappingMarkerSpiderfier 和 Leaflet 工作的问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/52419821/

25 4 0
文章推荐： javascript - 将组件连接到 redux 全局状态 vs 将 props 传递给 React-Native 中的子组件
文章推荐： java - 设置 GridLayout 列的宽度
文章推荐： javascript - 如何在 R 的 Leaflet 中将 preferCanvas 标志设置为 True
文章推荐： javascript - 使用 jsPDF 从远程 URL 创建 PDF 文件
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com