【发布时间】:2017-04-25 17:21:49
【问题描述】:
我正在尝试使用 Google Maps API 来显示许多多个地图标记,数据位于外部 JSON 文件中的一系列数组中。
相关 HTML/Javascript 的 sn-p
<div id="map_canvas" style="width:100%; height:100%"></div>
<script type="text/javascript" src="https://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript">
var map;
function initialize() {
var mapOptions = {
center: new google.maps.LatLng(40.8039941, -77.863459),
zoom: 14,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById("map_canvas"),
mapOptions);
}
//get JSON data
$(document).ready(function() {
$.getJSON("crime_maps_test.json", function(json1) {
$.each(json1, function(key, data) {
var latLng = new google.maps.LatLng(data.lat, data.lng);
// Creating a marker and putting it on the map
var marker = new google.maps.Marker({
position: latLng,
title: data.Incident
});
marker.setMap(map);
});
});
});
</script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_key&callback=initialize"></script>
crime_maps_test.json sn-p(实际文件包含几百个数组)
[
{
"Incident": "PSU201701139"
,"Occurred": "3/25/17 23:25"
,"reported": "3/25/17 23:25"
,"nature of incident": "Resident Assistant reported the odor of marijuana, origin not located"
,"offenses": "Possession of Small Amount of Marijuana"
,"location": "Porter Hall"
,"disposition": "Open"
,"lat": 40.8008254
,"lng": -77.8587917
},
{
"Incident": "PSU201701136"
,"Occurred": "03/25/2017 9:25 PM to 9:30 PM"
,"reported": "3/25/17 21:31"
,"nature of incident": "Visitor observed highly intoxicated"
,"offenses": "Public Drunkenness"
,"location": "Bryce Jordan Center"
,"disposition": "Open"
,"lat": 40.8086228
,"lng": -77.8642905
},
{
"Incident": "PSU201701134"
,"Occurred": "03/25/2017 8:52 PM to 8:58 PM"
,"reported": "3/25/17 20:58"
,"nature of incident": "Resident Assistant reported the odor of marijuana, origin not located"
,"offenses": "Possession of Small Amount of Marijuana"
,"location": "Curtin Hall 5Th Floor"
,"disposition": "Open"
,"lat": 40.8051407
,"lng": -77.8633569
}
]
我在 GitHub 上托管该项目以避免交叉引用错误。在显示地图且开发人员工具控制台未记录任何错误时,标记未显示。我的代码中是否遗漏了阻止标记显示的内容?有谁知道是什么导致或可能导致此问题?
【问题讨论】:
-
The posted code works with the posted JSON,也许你在加载它时遇到问题,也许在 $getJSON 中添加一些错误处理,看看为什么你没有得到结果)
-
发布的 JSON 仅包含 3 个数组。实际的 JSON 包含几百个数组。您知道如何将错误处理添加到 $getJSON 吗?
-
您的 JSON 文件有效吗?你检查了吗?如果您的代码适用于 3 个项目,为什么它会因“数百个”而失败?使用例如 http://jsonlint.com/ 验证您的 JSON 文件,并按照建议尝试调试您的 get 请求结果。
-
如何调试?使用您的 JavaScript 控制台。
console.log(json1)上面的$.each循环应该是一个好的开始。然后检查你的控制台,看看里面有什么。 -
MrUpsidown 是的,有几个无效条目。谢谢!
标签: javascript json google-maps google-maps-api-3