我是leaflet的新手，在美国地图上放置标记时遇到了问题。以下是我的JSON文件片段：
[
{
"site_name": "Chemical & Minerals Reclamation",
"city": "Cleveland",
"epa_id": "OHD980614549",
"npl": "Deleted",
"monitored": "No",
"type_of_company": "Waste Disposal",
"human_exposure": "Under Control",
"groundwater_status": "Not a Groundwater Site",
"lat": 41.49036,
"long": -81.72503,
"icon": "img/deleted.png"
},
{
"site_name": "Krysowaty Farm",
"city": "Hillborough Township",
"epa_id": "NJD980529838",
"npl": "Deleted",
"monitored": "No",
"type_of_company": "Waste Disposal",
"human_exposure": "Under Control",
"groundwater_status": "Under Control",
"lat": 40.50028,
"long": -74.78,
"icon": "img/deleted.png"
},
{
"site_name": "Enterprise Avenue",
"city": "Philadelphia",
"epa_id": "PAD980552913",
"npl": "Deleted",
"monitored": "Yes",
"type_of_company": "Waste Disposal",
"human_exposure": "Under Control",
"groundwater_status": "Under Control",
"lat": 39.885,
"long": -75.2125,
"icon": "img/deleted.png"
}
]
我的JS文件：
function industrialDumping() {
// create variable named map, set viewpoint and default zoom level
var map = L.map('map').setView([37.8, -96], 4);
L.tileLayer('https://api.mapbox.com/styles/v1/mapbox/light-v9/tiles/256/{z}/{x}/{y}?access_token=pk.eyJ1Ijoic3VicmFtaCIsImEiOiJjajV1NTk4dG4wM2V0MzJub2VoemV5YWVwIn0.4dweARrZX3iEWtXVjkp75w', {
maxZoom: 16,
id: 'mapbox.light'
}).addTo(map);
// add a minimal zoom to prevent users from zooming out too far
map._layersMinZoom=5;
// // load json file
$(document).ready(function(){
$.ajax({
type: "GET",
url: "data/sfdataviz.json",
dataType: "json",
mimeType: "application/json",
success: function(data) {processData(data);}
});
});
function processData(allText) {
for (var i in allText) {
data = allText[i];
var customicon = L.icon({
iconUrl: data.icon,
iconSize: [15, 15],
iconAnchor: [20, 40],
popupAnchor: [0, -60]
});
console.log(customicon);
// add the marker to the map
L.marker([data.long, data.lat], {icon: customicon})
.addTo(map)
.bindPopup("Site name: <strong>" + data.site_name + "</strong><br />Type of Company: <strong>" + data.type_of_company + "</strong><br>Location: <strong>" + data.city + "</strong><br />Monitored: <strong>" + data.monitored + "</strong><br>Human exposure: <strong>" + data.human_exposure + "</strong><br />Groundwater Status: <strong>" + data.groundwater_status + "</strong>")
}
}
}
我的 HTML 文件：
<!DOCTYPE html>
<html>
<head>
<title>Industrial Dumping</title>
<meta charset="utf-8">
<link href="//fonts.googleapis.com/css?family=Roboto:400,700" rel="stylesheet" type="text/css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="js/leaflet.js"></script>
<link rel="stylesheet" type="text/css" href="css/leaflet.css">
<!-- additional css and js -->
<style type="text/css">
#map {
height: 650px;
}
.leaflet-popup-content {
/* change size of margin */
margin: 14px 14px;
/* make the line height smaller */
line-height: 1.4;
}
/*.leaflet-map-pane {
z-index: 100;
}*/
/* change color when the cursor hovers over the popup close button */
.leaflet-container a.leaflet-popup-close-button:hover {
color: #9d132a;
}
/* change color of an unvisited link and the zoom symbols */
a:link {
color: #9d132a;
}
/* change color of a visited link */
a:visited {
color: #84b819;
}
/* change color when the cursor hovers over a link */
a:hover {
color: #e11b3c;
}
<script type="text/javascript" src="js/industrial-dumping.js"></script>
</head>
<body onload="industrialDumping()">
<div id="map"></div>
</body>
</html>
地图上没有显示任何标记。Chrome或FF中的开发人员控制台没有显示JS错误。看起来我的JSON文件没有任何问题地被读取，但是只是标记不在地图上显示。我已经查看了其他在这里提出的解决方案，但似乎没有一个适用于我。谢谢。