显示带有数据信息的标记弹出窗口

Question

我运行我的代码，但是不能不显示数据信息的弹窗，只能显示标记。

JS

    var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
        osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
        osm = L.tileLayer(osmUrl, { maxZoom: 20, attribution: osmAttrib });
    var map = L.map('map').setView([24.151687694799833, 120.64116954803465
    ], 15).addLayer(osm);              //顯示地圖
    L.control.scale().addTo(map);

    $.getJSON("https://sta.ci.taiwan.gov.tw/STA_Rain/v1.0/Things?$expand=Locations&$select=name,properties&$count=true", function (data) {
        var markerGroup = L.featureGroup();
        data.value.forEach(function (itemData, itemInd) {
            var latLng = L.latLng(itemData.Locations[0].location.coordinates[1], itemData.Locations[0].location.coordinates[0]);
            var myMarker = L.marker(latLng).addTo(markerGroup);
            //myMarker.bindPopup('ID: ' + itemData.properties.stationID + '<br />Name: ' + itemData.properties.stationName);

            var popupContent = "<p>stationID <b>" +
                itemData.properties.stationID + "</b> stationName </br>" +
                itemData.properties.stationName + "</br>";


            if (itemData.properties && itemData.properties.popupContent) {
                popupContent += itemData.properties.popupContent;
            }
            myMarker.bindPopup(popupContent);
        });


        markerGroup.addTo(map);
        map.fitBounds(markerGroup.getBounds());
    });      

</script>

HTML

<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml">

我希望我可以单击标记并弹出数据信息。（如：姓名、city_SN、town_SN、属性、坐标）

我的json数据URL

Answer 1

我没有发现您的代码有任何问题。也许您的脚本文件的顺序有问题。例如，您导入 jquery 的位置和定义 script 的位置。这是使用您的代码的示例：

<!DOCTYPE html>
<html>

<head>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.5.1/dist/leaflet.css" />
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://unpkg.com/leaflet@1.5.1/dist/leaflet.js"></script>

</head>

<body>
  <div id="map" style="width: 100%; height: 100vh;"></div>
  <script>
    var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
      osmAttrib = '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
      osm = L.tileLayer(osmUrl, {
        maxZoom: 20,
        attribution: osmAttrib
      });

    var map = L.map('map').setView([24.151687694799833, 120.64116954803465], 15).addLayer(osm); //顯示地圖

    L.control.scale().addTo(map);

      $.getJSON("https://sta.ci.taiwan.gov.tw/STA_Rain/v1.0/Things?$expand=Locations&$select=name,properties&$count=true", function(data) {
        var markerGroup = L.featureGroup();
        data.value.forEach(function(itemData, itemInd) {
          var latLng = L.latLng(itemData.Locations[0].location.coordinates[1], itemData.Locations[0].location.coordinates[0]);
          var myMarker = L.marker(latLng).addTo(markerGroup);
          //myMarker.bindPopup('ID: ' + itemData.properties.stationID + '<br />Name: ' + itemData.properties.stationName);

          var popupContent = "<p>stationID <b>" +
            itemData.properties.stationID + "</b> stationName </br>" +
            itemData.properties.stationName + "</br>";


          if (itemData.properties && itemData.properties.popupContent) {
            popupContent += itemData.properties.popupContent;
          }
          myMarker.bindPopup(popupContent);
        });


        markerGroup.addTo(map);
        map.fitBounds(markerGroup.getBounds());
      });
  </script>
</body>

</html>

显示带有数据信息的标记弹出窗口

Display marker popup with data information

javascript

popup

marker

leaflet