Удалить Google Map многоугольник геойсон

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

Вы создаете новый объект google.maps.Data каждый раз, когда вызываете функцию reloadGeoJson.Это нормально, но вы теряете ссылку на старую при создании новой.Удалите старый слой с карты (если он существует) перед созданием новой версии.

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>