我运行我的代码，但它无法不显示带有数据信息的弹出窗口，只能显示标记。
JS
var osmUrl = 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
osmAttrib = '© <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、Attribute、坐标)
我的json数据URL
最佳答案
我没有发现您的代码有任何问题。也许您的脚本文件的顺序有问题。例如，您在何处导入 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 = '© <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>关于javascript - 显示带有数据信息的标记弹出窗口，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/57160403/