google-maps - 确定 Google Maps API 中 Geojson 的绘制何时完成

Question

在 Google Maps API 中使用 loadGeoJson() 方法时，是否会在所有要素绘制完成时触发事件？

我读到您可以监听 map 的“空闲”状态，但似乎在加载完成时但在绘制要素之前 map 被视为空闲。 参见下面的 fiddle : https://jsfiddle.net/z3tu0epb/

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: new google.maps.LatLng(40.755690, -73.975938)
  });

  // Load GeoJSON.
  map.data.loadGeoJson(
    'https://services5.arcgis.com/GfwWNkhOj9bNBqoJ/arcgis/rest/services/nybb/FeatureServer/0/query?where=1=1&outFields=*&geometryPrecision=8&outSR=4326&f=geojson');

  google.maps.event.addListenerOnce(map, 'idle', function() {
    alert("map is idle");
  });

}

我还知道 addFeature() 监听器，当向 map 添加任何功能时，该监听器会被触发，但我需要 alert() 在所有功能之后运行功能已添加到 map 中。

谢谢

Answer 1

恐怕没有可行的方法来捕获数据层的“绘制所有要素后”事件。如果数据层公开了内部使用的绘图管理器的实例，则这是可能的。在这种情况下，您可以收听 overlaycomplete事件

https://developers.google.com/maps/documentation/javascript/reference#OverlayCompleteEvent

但是数据层不会公开其绘图管理器实例，因此您无法添加监听器。

https://developers.google.com/maps/documentation/javascript/reference#Data

您可以做的独特事情是确定所有功能何时加载(添加到集合中)。在这种情况下，您可以使用回调函数 loadGeoJson(url:string, options?:Data.GeoJsonOptions, callback?:function(Array<Data.Feature>))

var map;

function initMap() {
  map = new google.maps.Map(document.getElementById('map'), {
    zoom: 12,
    center: new google.maps.LatLng(40.755690, -73.975938)
  });

  // Load GeoJSON.
  map.data.loadGeoJson(
    'https://services5.arcgis.com/GfwWNkhOj9bNBqoJ/arcgis/rest/services/nybb/FeatureServer/0/query?where=1=1&outFields=*&geometryPrecision=8&outSR=4326&f=geojson',
    {},
    function(features) {
        alert("Loaded " + features.length + " features");
    });

  google.maps.event.addListenerOnce(map, 'idle', function() {
    alert("map is idle");
  });
  
  

}

#map {
  height: 100%;
}


/* Optional: Makes the sample page fill the window. */

html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
}

<div id="map"></div>
<!-- Replace the value of the key parameter with your own API key. -->
<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDztlrk_3CnzGHo7CFvLFqE_2bUKEq1JEU&callback=initMap">


</script>

此外，请随时在 Google issue tracker 中提交此类事件的功能请求。