刪除Google Map 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>