Google地图上的JSON Feed没有显示任何内容

时间:2016-10-15 02:35:45

标签: javascript jquery json google-maps

我希望Google地图显示标记带有JSON Feed。但它不起作用。我找不到实际的问题。所以这是我的代码:

1008    switch(sequenznummernabgleich(sockfd,c_snd_id,c_rec_id,c_timeout_quit)) {
    (gdb) p sockfd
    $9 = 8
    (gdb) p &sockfd
    $10 = (int *) 0x611024 <sockfd>
    (gdb) p c_snd_id
    $11 = "KR", '\000' <repeats 253 times>
    (gdb) p &c_snd_id
    $12 = (char (*)[256]) 0xfde220 <c_snd_id>
    (gdb) p c_rec_id
    $13 = "CO", '\000' <repeats 253 times>
    (gdb) p &c_rec_id
    $14 = (char (*)[256]) 0xfde560 <c_rec_id>
    (gdb) p c_timeout_quit
    $15 = 20
    (gdb) p &c_timeout_quit
    $16 = (int *) 0xfde660 <c_timeout_quit>
 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数组。

谢谢!

1 个答案:

答案 0 :(得分:3)

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

  • 在创建每个标记的循环中,循环遍历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()的一个警告:如果有没有标记,则地图根本不会显示。要处理这种情况,您需要检查responses.length为零的情况,并使用默认值调用map.setZoom()map.setCenter()

我使用////标记了更改的行,以便于查找:

&#13;
&#13;
 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);
&#13;
html, body, #map-canvas {
  height: 100%;
  margin: 0;
  padding: 0;
}
&#13;
 <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>
&#13;
&#13;
&#13;