个人中心
gpt4 book ai didi

javascript - 从 map 外部动态显示传单标记弹出窗口

转载 作者：行者123 更新时间：2023-11-29 18:40:41 36 4
gpt4 key购买 nike

我正在使用 Leaflet javascript 库来显示一些地震信息。您可以在 map 上看到几个红色圆圈。当您单击该红色圆圈时，它会在弹出窗口中显示一些详细信息。

当您从 map 外部单击链接时，我想显示弹出窗口。这 ( answer ) 很有用。但是，我想在没有ID的情况下实现它？我的意思是，如果我在 map 上有超过 30 个标记，而且我没有任何 ID，只有链接中的类名。从 map 外部单击链接时如何触发弹出窗口？

这个 ( answer ) 很好。在这个答案中，他们提到了标记 1、标记 2 和标记 3。但是，就我而言，我不知道会显示多少标记。有时 5、50、100 或可能超过 150。这就是我问这个问题的原因。

<html>
  <head>
<meta charset="utf-8" />
<title>Leaflet</title>
<link
  rel="stylesheet"
  href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css"
  integrity="sha512-xwE/Az9zrjBIphAcBb3F6JVqxf46+CDLwfLMHloNu6KEQCAWi6HcDUbeOfBIptF7tcCzusKFjFw2yuvEpDL9wQ=="
  crossorigin=""
/>
<script
  src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"
  integrity="sha512-GffPMF3RvMeYyc1LWMHtK8EbPv0iNZ8/oTtHPx9/cc2ILxQ+u905qIwdpULaqDkyBKgOaB57QTMg7ztg8Jm2Og=="
  crossorigin=""
></script>
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
  </head>

  <body>
<div id="map" style="width: 400px; height: 400px;"></div>

<script>
  var object = {
    type: "FeatureCollection",
    metadata: {
      generated: 1564051101000,
      url:
        "https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2019-07-20&endtime=2019-07-21&minmagnitude=5",
      title: "USGS Earthquakes",
      status: 200,
      api: "1.8.1",
      count: 4
    },
    features: [
      {
        type: "Feature",
        properties: {
          mag: 5.2000000000000002,
          place: "79km ENE of L'Esperance Rock, New Zealand",
          time: 1563662132538,
          updated: 1563663302040,
          tz: -720,
          url: "https://earthquake.usgs.gov/earthquakes/eventpage/us70004pu1",
          detail: "https://earthquake.usgs.gov/fdsnws/event/1/query?eventid=us70004pu1&format=geojson",
          felt: null,
          cdi: null,
          mmi: null,
          alert: null,
          status: "reviewed",
          tsunami: 0,
          sig: 416,
          net: "us",
          code: "70004pu1",
          ids: ",us70004pu1,",
          sources: ",us,",
          types: ",geoserve,origin,phase-data,",
          nst: null,
          dmin: 1.9299999999999999,
          rms: 1.28,
          gap: 70,
          magType: "mww",
          type: "earthquake",
          title: "M 5.2 - 79km ENE of L'Esperance Rock, New Zealand"
        },
        geometry: { type: "Point", coordinates: [-178.1173, -31.174800000000001, 35] },
        id: "us70004pu1"
      },
      {
        type: "Feature",
        properties: {
          mag: 5.5999999999999996,
          place: "23km NNW of Kandrian, Papua New Guinea",
          time: 1563655424914,
          updated: 1563741959328,
          tz: 600,
          url: "https://earthquake.usgs.gov/earthquakes/eventpage/us70004psn",
          detail: "https://earthquake.usgs.gov/fdsnws/event/1/query?eventid=us70004psn&format=geojson",
          felt: 1,
          cdi: 4.2999999999999998,
          mmi: 4.4779999999999998,
          alert: "green",
          status: "reviewed",
          tsunami: 1,
          sig: 483,
          net: "us",
          code: "70004psn",
          ids: ",us70004psn,",
          sources: ",us,",
          types: ",dyfi,geoserve,losspager,moment-tensor,origin,phase-data,shakemap,",
          nst: null,
          dmin: 3.2029999999999998,
          rms: 0.89000000000000001,
          gap: 28,
          magType: "mww",
          type: "earthquake",
          title: "M 5.6 - 23km NNW of Kandrian, Papua New Guinea"
        },
        geometry: { type: "Point", coordinates: [149.5069, -6.0086000000000004, 59.789999999999999] },
        id: "us70004psn"
      },
      {
        type: "Feature",
        properties: {
          mag: 5.0999999999999996,
          place: "Easter Island region",
          time: 1563647034336,
          updated: 1563892918040,
          tz: -420,
          url: "https://earthquake.usgs.gov/earthquakes/eventpage/us70004pra",
          detail: "https://earthquake.usgs.gov/fdsnws/event/1/query?eventid=us70004pra&format=geojson",
          felt: null,
          cdi: null,
          mmi: null,
          alert: null,
          status: "reviewed",
          tsunami: 0,
          sig: 400,
          net: "us",
          code: "70004pra",
          ids: ",us70004pra,",
          sources: ",us,",
          types: ",geoserve,origin,phase-data,",
          nst: null,
          dmin: 2.7559999999999998,
          rms: 0.71999999999999997,
          gap: 118,
          magType: "mb",
          type: "earthquake",
          title: "M 5.1 - Easter Island region"
        },
        geometry: { type: "Point", coordinates: [-111.38379999999999, -29.3232, 10] },
        id: "us70004pra"
      },
      {
        type: "Feature",
        properties: {
          mag: 5.0999999999999996,
          place: "136km ESE of Pangai, Tonga",
          time: 1563635789233,
          updated: 1563636880040,
          tz: -720,
          url: "https://earthquake.usgs.gov/earthquakes/eventpage/us70004pp5",
          detail: "https://earthquake.usgs.gov/fdsnws/event/1/query?eventid=us70004pp5&format=geojson",
          felt: null,
          cdi: null,
          mmi: null,
          alert: null,
          status: "reviewed",
          tsunami: 0,
          sig: 400,
          net: "us",
          code: "70004pp5",
          ids: ",us70004pp5,",
          sources: ",us,",
          types: ",geoserve,origin,phase-data,",
          nst: null,
          dmin: 3.2749999999999999,
          rms: 1.3100000000000001,
          gap: 116,
          magType: "mww",
          type: "earthquake",
          title: "M 5.1 - 136km ESE of Pangai, Tonga"
        },
        geometry: { type: "Point", coordinates: [-173.15700000000001, -20.294899999999998, 10] },
        id: "us70004pp5"
      }
    ],
    bbox: [-178.1173, -31.1748, 10, 149.5069, -6.0086, 59.79]
  };

  var i = 0;

  document.writeln("<div>");
  for (i = 0; i < object.features.length; i++) {
    var timestamp = object.features[i].properties.time / 1000;
    date = new Date(timestamp * 1000);
    dateString = date.toUTCString();

    var today = date;
    today.setHours(today.getHours() + 4);

    // maps

    document.writeln("<div class='list'>");
    document.writeln("<div>" + object.features[i].properties.mag + " Mag</div>");
    document.writeln("</div>");
  }
  document.writeln("</div>");

  var map = L.map("map").setView([-31.174800000000001, -178.1173], 2);

  // load a tile layer
  L.tileLayer(
    "https://server.arcgisonline.com/ArcGIS/rest/services/World_Street_Map/MapServer/tile/{z}/{y}/{x}",
    {
      attribution:
        "Tiles &copy; Esri &mdash; Source: Esri, DeLorme, NAVTEQ, USGS, Intermap, iPC, NRCAN, Esri Japan, METI, Esri China (Hong Kong), Esri (Thailand), TomTom, 2012",
      maxZoom: 18
    }
  ).addTo(map);

  // load GeoJSON from an external file
  $.getJSON(
    "https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2019-07-20&endtime=2019-07-21&minmagnitude=5",
    function(data) {
      var geojsonMarkerOptions = {
        opacity: 0.8,
        fillOpacity: 0.6
      };

      // color indication by magnitude
      geoLayer = L.geoJson(data, {
        // popup div content
        onEachFeature: function(feature, layer) {
          // variable1 = L.marker([-31.174800000000001,-178.1173]).bindPopup('The html content').addTo(map);

          var popupText =
            "<b>Magnitude:</b> " +
            feature.properties.mag +
            "<br><b>Location:</b> " +
            feature.properties.place;

          layer.bindPopup(popupText, {
            closeButton: true,
            offset: L.point(0, -20)
          });
          layer.on("click", function() {
            layer.openPopup();
          });
        },

        style: function(feature) {
          var mag = feature.properties.mag;
          if (mag >= 4.0) {
            return { color: "red" };
          } else if (mag >= 3.0) {
            return { color: "orange" };
          } else if (mag >= 2.0) {
            return { color: "yellow" };
          } else {
            return { color: "black" };
          }
        },

        // add GeoJSON layer to the map once the file is loaded
        pointToLayer: function(feature, latlng) {
          return L.circleMarker(latlng, geojsonMarkerOptions);
        }
      }).addTo(map);
    }
  );
</script>
  </body>
</html>

最佳答案

这是一个使用 es6 的可能解决方案的示例:

例如创建一个 div，它将包含要动态添加的 anchor 标记:

<div id="anchors"></div>

现在在js文件中:

  let markersArray = {}; // create the associative array
  let magsArray = {}; // here hold the ids that correspond to the mags


  // load GeoJSON from an external file
  $.getJSON("https://earthquake.usgs.gov/fdsnws/event/1/query?format=geojson&starttime=2019-07-20&endtime=2019-07-21&minmagnitude=5", data => {

    // color indication by magnitude
    L.geoJson(data, {

      // add GeoJSON layer to the map once the file is loaded
      pointToLayer: function(feature, latlng) {
        const mag = feature.properties.mag;
        const geojsonMarkerOptions = {
          opacity: 0.8,
          fillOpacity: 0.6,
          // here define the style using ternary operators for circles
          color: mag >= 4.0 ? 'red' : mag >= 3.0 ? 'orange' : mag >= 2.0 ? 'yellow' : 'black'
        };

        // here store the circle markers in the array
        markersArray[feature.id] = L.circleMarker(latlng, geojsonMarkerOptions)
               .addTo(map)
               .bindPopup(
              `<b>Magnitude:</b> " ${feature.properties.mag} 
               <br><b>Location:</b>  ${feature.properties.place}`, {
          closeButton: true,
          offset: L.point(0, -20)
        });

        // here record the mags
        magsArray[feature.id] = feature.properties.mag;

        return L.circleMarker(latlng, geojsonMarkerOptions);
      },
    })

    // add dynamically anchor tags
    let markup = '';
    for (let i in markersArray) {
      markup += `<a href="#" onclick="markersArray['${i}'].openPopup()"><b>${magsArray[i]} Mag</b></a><br/>`;
    }
    document.getElementById('anchors').innerHTML = markup;
  });

最后但并非最不重要的一点是，我没有看到使用 API 获取数据的原因，并且两者都将其作为文件中的常量变量。

Demo

关于javascript - 从 map 外部动态显示传单标记弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57286300/

36 4 0
文章推荐： javascript - 如何以编程方式将 ngBootstrap 弹出窗口添加到元素？
文章推荐： php - MariaDB 语句与 MySQL 不兼容
文章推荐： php - 我可以在 PHP 中混合使用 MySQL API 吗？
文章推荐： javascript - 从字符串序列中获取 n 对
行者123
个人简介

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

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