删除谷歌地图geojson多边形

Question

加载新数据时如何删除以前的数据？

var map = null,
drawLayerSite = null;
map = new google.maps.Map(document.getElementById('mapDiv'), {
zoom: 11,
// mapTypeId: 'satellite'
mapTypeId: 'terrain'
});
function reloadGeoJson(geoJson) {
map.data.forEach(function(feature) {
map.data.remove(feature);
});

drawLayerSite = new google.maps.Data({map:map});
drawLayerSite.setStyle({
fillColor:    'rgba(1, 84, 90, 0.5)',
fillOpacity:   0.5,
strokeWeight:  1,
strokeColor:   '#01545A',
strokeOpacity: 0.8
});
drawLayerSite.addGeoJson(geoJson);
}

第二次加载数据时，旧数据仍然存在。它们不会被删除。

地图要素为空。

Answer 1

每次调用reloadGeoJson函数时都会创建一个新的google.maps.Data对象。 这没关系，但是在创建新引用时会丢失对旧引用的引用。 在创建新版本之前，从地图中移除旧图层(如果存在(。

function reloadGeoJson(geoJson) {
// Remove the old layer from the map, if it exists
if (drawLayerSite && drawLayerSite.setMap)
drawLayerSite.setMap(null);
drawLayerSite = new google.maps.Data({
map: map
});
drawLayerSite.setStyle({
fillColor: 'rgba(1, 84, 90, 0.5)',
fillOpacity: 0.5,
strokeWeight: 1,
strokeColor: '#01545A',
strokeOpacity: 0.8
});
drawLayerSite.addGeoJson(geoJson);
}

概念验证小提琴

代码片段：

var map;
var drawLayerSite = null;
function initialize() {
map = new google.maps.Map(document.getElementById('mapDiv'), {
zoom: 4,
// mapTypeId: 'satellite'
mapTypeId: 'terrain',
center: {
lat: -25.76,
lng: 128.84
}
});
setInterval(function() {
modify(geoJson1);
reloadGeoJson(geoJson1)
}, 1000);
}
function reloadGeoJson(geoJson) {
if (drawLayerSite && drawLayerSite.setMap)
drawLayerSite.setMap(null);
drawLayerSite = new google.maps.Data({
map: map
});
drawLayerSite.setStyle({
fillColor: 'rgba(1, 84, 90, 0.5)',
fillOpacity: 0.5,
strokeWeight: 1,
strokeColor: '#01545A',
strokeOpacity: 0.8
});
drawLayerSite.addGeoJson(geoJson);
}
google.maps.event.addDomListener(window, "load", initialize);
function modify(geoJson) {
var heading = Math.random() * 360;
for (var i = 0; i < geoJson.features.length; i++) {
var pt = new google.maps.LatLng(
geoJson.features[i].geometry.coordinates[1],
geoJson.features[i].geometry.coordinates[0]);
var newPt = google.maps.geometry.spherical.computeOffset(pt, 50000, heading);
geoJson.features[i].geometry.coordinates = [newPt.lng(), newPt.lat()];
}
}
var geoJson1 = {
"type": "FeatureCollection",
"features": [{
"type": "Feature",
"properties": {
"letter": "G",
"color": "blue",
"rank": "7",
"ascii": "71"
},
"geometry": {
"type": "Point",
"coordinates": [123.61, -22.14]
}
},
{
"type": "Feature",
"properties": {
"letter": "o",
"color": "red",
"rank": "15",
"ascii": "111"
},
"geometry": {
"type": "Point",
"coordinates": [128.84, -25.76]
}
},
{
"type": "Feature",
"properties": {
"letter": "o",
"color": "yellow",
"rank": "15",
"ascii": "111"
},
"geometry": {
"type": "Point",
"coordinates": [131.87, -25.76]
}
},
{
"type": "Feature",
"properties": {
"letter": "g",
"color": "blue",
"rank": "7",
"ascii": "103"
},
"geometry": {
"type": "Point",
"coordinates": [138.12, -25.04]
}
},
{
"type": "Feature",
"properties": {
"letter": "l",
"color": "green",
"rank": "12",
"ascii": "108"
},
"geometry": {
"type": "Point",
"coordinates": [140.14, -21.04]
}
},
{
"type": "Feature",
"properties": {
"letter": "e",
"color": "red",
"rank": "5",
"ascii": "101"
},
"geometry": {
"type": "Point",
"coordinates": [144.14, -27.41]
}
}
]
};

html,
body,
#mapDiv {
height: 100%;
width: 100%;
margin: 0px;
padding: 0px
}

<script src="https://maps.googleapis.com/maps/api/js?libraries=geometry"></script>
<div id="mapDiv"></div>