如何从Google地图数据层中删除数据？

Question

我看到谷歌地图支持geojson.查看此处的文档:https: //developers.google.com/maps/documentation/javascript/datalayer#load_geojson

鉴于"谷歌"的最后一个例子,我怎样才能让我点击一个按钮添加一个新的Geojson图层,另一个按钮来切换/删除"谷歌"甚至一封信？在我看来,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]);
  }); 
}); 

(请参阅此JSbin以获取可以使用的工作示例)

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

Answer 2

这对我有用:

map.data.forEach(function(feature) {
    // filter...
    map.data.remove(feature);
});

Answer 3

虽然map.data设计为单个数据源的常见情况的占位符,但您可以使用多个,并且仍然使用addGeoJSon如下内容:

// load data - do the same for data2, data3 or whatever
data1 = new google.maps.Data();
data1.loadGeoJson(url1);

// create some layer control logic for turning on data1
data1.setMap(map) // or restyle or whatever

// turn off data1 and turn on data2
data1.setMap(null) // hides it
data2.setMap(map) // displays data2