Google地图上的JSON Feed没有显示任何内容
我希望谷歌地图显示标记与JSON提要。 但它不起作用。 我找不到实际的问题。 所以这是我的代码：
var map; // The JSON data var json = [{ "OpperationErrorMsg":"", "IsSuccess":true, "ResultId":1000, "Timestamp":"2016-10-12T18:00:07.0232702Z", "Echo":null, "InSandbox":true, "DebugMessages":[ ], "MissingDetails":[ ], "ResponseData":[ { "CallTimeLocal":"2016-10-10T06:28:48.7330000", "IncidentId":3374, "IncidentNumber":"HC2016004034", "CallTime":"2016-10-10T10:28:48.7330000", "ElapsedSeconds":0, "Location":"2712 E HANNA AVE", "BuildingName":null, "BuildingNumber":null, "NatureId":6743, "FirePriorityId":1, "CoordinateX":-82.429500000000, "CoordinateY":28.003389000000 }, { "CallTimeLocal":"2016-10-10T11:28:36.7000000", "IncidentId":3382, "IncidentNumber":"HC2016004042", "CallTime":"2016-10-10T15:28:36.7000000", "ElapsedSeconds":0, "Location":"1220 APOLLO BEACH BLVD S", "BuildingName":"Apollo Beach Marina", "BuildingNumber":null, "NatureId":8035, "FirePriorityId":1, "CoordinateX":-82.422369000000, "CoordinateY":27.781254000000 }, { "CallTimeLocal":"2016-10-10T14:29:59.8830000", "IncidentId":3387, "IncidentNumber":"HC2016004047", "CallTime":"2016-10-10T18:29:59.8830000", "ElapsedSeconds":0, "Location":"9600 SHELDONWOOD RD", "BuildingName":null, "BuildingNumber":null, "NatureId":6420, "FirePriorityId":12, "CoordinateX":-82.580530000000, "CoordinateY":28.034779000000 }, { "CallTimeLocal":"2016-10-10T15:27:37.7270000", "IncidentId":3389, "IncidentNumber":"HC2016004049", "CallTime":"2016-10-10T19:27:37.7270000", "ElapsedSeconds":0, "Location":"4691 GALLAGHER RD", "BuildingName":"Strawberry Crest High School", "BuildingNumber":null, "NatureId":7873, "FirePriorityId":2, "CoordinateX":-82.236450000000, "CoordinateY":28.021233000000 } ], "CurrentStatusData":null }]; function initialize() { // Giving the map som options var mapOptions = { zoom: 6, center: new google.maps.LatLng(25.0,-80.0) }; // Creating the map map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); // Looping through all the entries from the JSON data for(var i = 0; i < json.length; i++) { // Current object var obj = json[i]; // Adding a new marker for the object var marker = new google.maps.Marker({ position: new google.maps.LatLng(obj.CoordinateY,obj.CoordinateX), map: map, draggable: true, animation: google.maps.Animation.DROP, title: obj.BuildingName // this works, giving the marker a title with the correct title }); // Adding a new info window for the object var clicker = addClicker(marker, obj.title); } // end loop // Adding a new click event listener for the object function addClicker(marker, content) { google.maps.event.addListener(marker, 'click', function() { if (infowindow) {infowindow.close();} infowindow = new google.maps.InfoWindow({content: content}); infowindow.open(map, marker); }); } } // Initialize the map google.maps.event.addDomListener(window, 'load', initialize); html, body, #map-canvas { height: 100%; margin: 0; padding: 0; }
我将在HTML页面上使用它。 虽然JSON数据会自动更新，但我无法更改JSON数组。
谢谢！
我在你的代码中发现了这些问题：
- 在创建每个标记的循环中，循环遍历
json数组。 但是，这不是您的标记数据数组。json[0]是你的主要对象，json[0].ResponseData是你需要循环的标记数组。 所以我把这个值放在一个名为responses的变量中，然后循环使用它。 我不知道JSON数据在其最外层数组中是否可以有多个对象; 如果它，你需要一个外部循环来处理这些。 现在我假设只有一个外部对象用json[0]寻址。 - 当你调用
addClicker你传入了不存在的obj.title。 大概你的意思是obj.BuildingName。 - 您的单击处理程序引用一个名为
infowindow的变量，但在第一次单击该变量不存在时会导致错误。 所以我宣称infowindow是一个全球窗口。
那么，我是怎么发现这些问题的呢？ 使用JavaScript调试器。 通常我会添加一个debugger; 在initialize()函数开头的语句和单步执行代码，看看是怎么回事。 这将揭示主循环设置var obj = json[i]; 它没有达到预期的价值。
这在普通网页上运行良好，但在SO上的嵌入式代码段中似乎效果不佳。 （调试器显示错误的源代码行。）所以我开始添加console.log(); 看起来可能出错的语句，例如console.log( 'obj:', obj ); var obj =赋值后立即。
此外，根据标记的位置自动缩放和居中地图是很好的。 我使用LatLngBounds添加了一些代码，它为每个标记扩展，然后在创建所有标记后添加map.fitBounds() 。 如果你这样做，你不需要在第一次创建地图时显式缩放和居中，所以我删除了它们。 （否则地图会显示在一个位置，然后重新定位。）
使用fitBounds()一个警告：如果没有标记，则根本不会显示地图。 要处理这种情况，您需要检查map.setZoom()为零的情况，并使用默认值调用map.setZoom()和map.setCenter() 。
我用////标记了更改的行，以便于查找：
var map, infowindow; //// // The JSON data var json = [{ "OpperationErrorMsg":"", "IsSuccess":true, "ResultId":1000, "Timestamp":"2016-10-12T18:00:07.0232702Z", "Echo":null, "InSandbox":true, "DebugMessages":[ ], "MissingDetails":[ ], "ResponseData":[ { "CallTimeLocal":"2016-10-10T06:28:48.7330000", "IncidentId":3374, "IncidentNumber":"HC2016004034", "CallTime":"2016-10-10T10:28:48.7330000", "ElapsedSeconds":0, "Location":"2712 E HANNA AVE", "BuildingName":null, "BuildingNumber":null, "NatureId":6743, "FirePriorityId":1, "CoordinateX":-82.429500000000, "CoordinateY":28.003389000000 }, { "CallTimeLocal":"2016-10-10T11:28:36.7000000", "IncidentId":3382, "IncidentNumber":"HC2016004042", "CallTime":"2016-10-10T15:28:36.7000000", "ElapsedSeconds":0, "Location":"1220 APOLLO BEACH BLVD S", "BuildingName":"Apollo Beach Marina", "BuildingNumber":null, "NatureId":8035, "FirePriorityId":1, "CoordinateX":-82.422369000000, "CoordinateY":27.781254000000 }, { "CallTimeLocal":"2016-10-10T14:29:59.8830000", "IncidentId":3387, "IncidentNumber":"HC2016004047", "CallTime":"2016-10-10T18:29:59.8830000", "ElapsedSeconds":0, "Location":"9600 SHELDONWOOD RD", "BuildingName":null, "BuildingNumber":null, "NatureId":6420, "FirePriorityId":12, "CoordinateX":-82.580530000000, "CoordinateY":28.034779000000 }, { "CallTimeLocal":"2016-10-10T15:27:37.7270000", "IncidentId":3389, "IncidentNumber":"HC2016004049", "CallTime":"2016-10-10T19:27:37.7270000", "ElapsedSeconds":0, "Location":"4691 GALLAGHER RD", "BuildingName":"Strawberry Crest High School", "BuildingNumber":null, "NatureId":7873, "FirePriorityId":2, "CoordinateX":-82.236450000000, "CoordinateY":28.021233000000 } ], "CurrentStatusData":null }]; function initialize() { // Giving the map som options var mapOptions = { //// }; // Creating the map map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); var bounds = new google.maps.LatLngBounds(); //// // Looping through all the entries from the JSON data var responses = json[0].ResponseData; //// for(var i = 0; i < responses.length; i++) { //// // Current object var obj = responses[i]; //// // Adding a new marker for the object var position = new google.maps.LatLng( obj.CoordinateY, obj.CoordinateX ); //// bounds.extend( position ); //// var marker = new google.maps.Marker({ position: position, //// map: map, draggable: true, animation: google.maps.Animation.DROP, title: obj.BuildingName }); // Adding a new info window for the object var clicker = addClicker(marker, obj.BuildingName); //// } // end loop map.fitBounds( bounds ); //// // Adding a new click event listener for the object function addClicker(marker, content) { google.maps.event.addListener(marker, 'click', function() { if (infowindow) {infowindow.close();} infowindow = new google.maps.InfoWindow({content: content}); infowindow.open(map, marker); }); } } // Initialize the map google.maps.event.addDomListener(window, 'load', initialize);
html, body, #map-canvas { height: 100%; margin: 0; padding: 0; }