传单-标记未显示 [英] Leaflet - Markers not showing
本文介绍了传单-标记未显示的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我是传单的新手，在将标记放置在美国地图上时遇到问题.以下是我的JSON文件的代码段:
I am new to leaflet and am having an issue placing markers on a US map. Below is my snippet of my JSON file:
[
{
"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文件没有任何问题，但是标记没有显示在地图上.我看过这里建议的其他解决方案，但似乎没有一种对我有用.预先感谢.
None of the markers are showing on the map. Developers console in Chrome or FF show no JS errors. It seem like my JSON file is being read without any issues, but just that the markers don't show on the map. I've looked at other solutions suggested here, but none seem to work for me. Thanks in advance.
推荐答案
显示的标记 ，但未在您期望的位置.
Your markers are shown, but not at the position you expect.
在Leaflet中，坐标顺序为[lat, lng]，而在代码中已设置:
In Leaflet, the coordinates order is [lat, lng], whereas in your code you have set:
L.marker([data.long, data.lat])
实时演示: https://plnkr.co/edit/UC6io0jPh9HJVoDAgJS1?p=preview
这篇关于传单-标记未显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
