如何从谷歌地图数据层中删除数据

How to remove data from a Google Maps Data Layer?

本文关键字：数据 删除 谷歌地图      更新时间：2023-09-26

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

举最后一个"谷歌"的例子，我如何才能点击一个按钮添加一个新的Geojson层，并点击另一个按钮切换/删除"谷歌"甚至一个字母？在我看来，map.data似乎是单层，而不是多层。

数据层是单层，这一点是正确的。但是，如果手动检索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，以获得可以使用的工作示例）

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

这对我有效：

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

虽然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

作为@mensi回答的后续内容，跟踪从不同数据源加载的不同特征集可能很重要。你可以通过为每个功能添加一个属性来做到这一点：

feature.setProperty('kind', 'region');
feature.setProperty('kind', 'lake');

但是，创建多个数据层可能更容易。默认情况下，谷歌地图从一个数据层开始，但您并不局限于此。你可以做：

var datalayer = new google.maps.Data({ map: mymap });

（设置map选项很重要，否则您的数据层将不会显示。）

这样，可以更容易地按层对功能进行分组，并打开或关闭整个层。

map.data.forEach（（feature）=>map.data.remove（feature））

相关文章：