javascript - 如何从 Google map 数据层中删除数据？

Question

我看到 Google map 支持 geojson。查看这里的文档: https://developers.google.com/maps/documentation/javascript/datalayer#load_geojson

鉴于“Google”的最后一个示例，我怎样才能使其可以单击一个按钮来添加新的 Geojson 层，以及另一个按钮来切换/删除“Google”甚至一个字母？在我看来，map.data似乎是单层，而不是多层。

Answer 1

您是正确的，数据层是单层。但是，如果您手动检索 GeoJSON 并使用 addGeoJson 函数而不是 loadGeoJson，您将获得返回的添加功能。您可以稍后删除它们。

所以而不是

map.data.loadGeoJson('https://storage.googleapis.com/maps-devrel/google.json');

您可以执行类似以下操作(此示例使用 jQuery 获取数据并假设有一个 ID 为 removeBtn 的按钮):

// Load the GeoJSON manually (works cross-origin since google sets the required HTTP headers)
$.getJSON('https://storage.googleapis.com/maps-devrel/google.json', function (data) {
  var features = map.data.addGeoJson(data);

  // Setup event handler to remove GeoJSON features
  google.maps.event.addDomListener(document.getElementById('removeBtn'), 'click', function () {
    for (var i = 0; i < features.length; i++)
      map.data.remove(features[i]);
  }); 
}); 

( See this JSbin for a working example you can play around with )

在更复杂的情况下，您可能必须跟踪用户加载的数据源以及因此创建的功能，以便您可以在请求时删除它们。