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

Question

我正在使用 Google 地图 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])
Parameters:
url: string
options (optional): Data.GeoJsonOptions
callback (optional): function(Array)
Return Value: None
Loads GeoJSON from a URL, and adds the features to the collection.
NOTE: The GeoJSON is fetched using XHR, and may not work cross-domain. If you have issues, we recommend you fetch the GeoJSON using your choice of AJAX library, and then call 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 功能

How to access Google Map API v3 features loaded using loadGeoJson()

geojson

google-maps-api-3