javascript - Google map 上的 JSON feed 没有显示任何内容

Question

我想要 Google map 显示带有 JSON feed 的标记。但它不起作用。我找不到真正的问题。所以这是我的代码:

 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;
}

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
   <script src="https:////cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="map-canvas"></div>

我将在 HTML 页面上使用它。虽然 JSON 数据会自动更新，所以我无法更改 JSON 数组。

谢谢!

Answer 1

我在您的代码中发现了这些问题:

• 在创建每个标记的循环中，您将循环遍历 json大批。但是，这不是您的标记数据数组。 json[0]是你的主要对象，并且 json[0].ResponseData是您需要循环的标记数组。所以我将该值放入名为 responses 的变量中并循环播放它。我不知道 JSON 数据的最外层数组中是否可以有多个对象；如果确实如此，您将需要一个外循环来处理这些问题。现在我假设只有一个外部对象，地址为 json[0] .
• 当您调用addClicker时你传入obj.title这是不存在的。想必您的意思是 obj.BuildingName .
• 您的点击处理程序引用了一个名为 infowindow 的变量，但第一次单击时该变量不存在并导致错误。所以我声明infowindow作为一个全局窗口。

那么，我是如何发现这些问题的呢？使用 JavaScript 调试器。通常我会添加 debugger; initialize()开头的声明函数并单步执行代码以查看发生了什么。这将揭示主循环设置 var obj = json[i]; 的位置。它没有得到预期的值。

这在普通网页上效果很好，但在嵌入的代码片段中似乎效果不佳。 (调试器显示错误的源代码行。)所以我开始添加 console.log();看起来可能出现问题的语句，例如 console.log( 'obj:', obj );紧接着 var obj =作业。

此外，根据标记的位置自动缩放和居中 map 也很好。我使用 LatLngBounds 添加了一些代码它针对每个标记进行扩展，然后是 map.fitBounds()创建所有标记后。如果您这样做，则在第一次创建 map 时不需要显式缩放和居中 map ，因此我删除了这些。 (否则 map 将显示在一个位置，然后重新定位。)

关于 fitBounds() 的一个警告:如果没有标记，那么 map 根本不会显示。要处理这种情况，您需要检查 responses.length 的情况。为零并调用 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;
}

 <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
   <script src="https:////cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div id="map-canvas"></div>