Question

我正在使用Google Maps API，并尝试访问使用loadGeoJson（）加载的功能。该文档似乎建议map.data.forEach（function（feature））应该能够遍历所有功能。但是，当我使用loadGeoJson加载数据时，它会在地图上创建图钉，而不会在数据中创建任何特征。

示例：http://www.wittprojects.net/dev/overflow/load_no_features.php 我的代码尝试将要素数据输出到console.log（请参见下文），因此，如果您访问该页面并打开开发人员工具，您将能够看到尝试访问数据的各种方式失败。

这是我的地图代码：

  map = new google.maps.Map(document.getElementById('map'), {
    center: {lat: 40.397, lng: 0.644},
    zoom: 6
  });

  var json = 'overflow.geojson';
  map.data.loadGeoJson(json);
  console.log("Logging the data features:");
  console.log(map.data.features);
  console.log("Using map.data.forEach:");
  map.data.forEach(function(feature) {
  });
  console.log("Here's the whole map object:");
  console.log(map);
}

要加载的GeoJson：http://www.wittprojects.net/dev/overflow/overflow.geojson

{  
   "type":"FeatureCollection",
   "features":[  
      {  
         "properties":{  
            "name":"Toledo",
            "traveler":6
         },
         "type":"Feature",
         "geometry":{  
            "type":"Point",
            "coordinates":[  
               -3.9853,
               39.8208
            ]
         }
      },
      {  
         "properties":{  
            "name":"Madrid",
            "traveler":6
         },
         "type":"Feature",
         "geometry":{  
            "type":"Point",
            "coordinates":[  
               -3.665398,
               40.373363
            ]
         }
      }
   ]
}

我的数据要去哪里？

Answer 1

.loadGeoJson是异步的。您需要等待回调运行，然后数据才可用。

来自the documentation

loadGeoJson（URL [，options，callback]）
  参数：
  网址：字符串
  选项（可选）：Data.GeoJsonOptions
  回调（可选）：function（Array）
  返回值：无
  从URL加载GeoJSON，并将功能添加到集合中。
  注意：GeoJSON是使用XHR提取的，可能无法跨域工作。如果遇到问题，建议您使用选择的AJAX库获取GeoJSON，然后调用addGeoJson（）。

map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json', {}, function(features) {
  console.log("Logging the data features:");
  // note that there is no map.data.features property, but the callback returns the array of added features
  console.log(map.data.features); // == undefined
  console.log(features); // array of added features
  console.log("Using map.data.forEach:");
  map.data.forEach(function(feature) {
    console.log(feature);
  });
});

或者您可以使用在回调函数中传递的features数组：

map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json', {}, function(features) {
  console.log("Logging the data features:");
  console.log(features);
  console.log("Using map.data.forEach:");
  features.forEach(function(feature) {
    console.log(feature);
  });
})

proof of concept fiddle

代码段：

function initialize() {
  map = new google.maps.Map(document.getElementById('map'), {
    center: {
      lat: -28,
      lng: 137
    },
    zoom: 4
  });

  map.data.loadGeoJson('https://storage.googleapis.com/mapsdevsite/json/google.json', {}, function(features) {
    console.log("Logging the data features:");
    // note that there is no map.data.features property, but the callback returns the array of added features
    console.log(features);
    console.log("Using map.data.forEach:");
    map.data.forEach(function(feature) {
      console.log(feature);
    });
  });
}
google.maps.event.addDomListener(window, "load", initialize);

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js"></script>
<div id="map"></div>

如何访问使用loadGeoJson（）加载的Google Map API v3功能

1 个答案: