Question

我有......

var ctaLayer = new google.maps.KmlLayer({
  url: var_url,
  suppressInfoWindows: false,
  map: map,
  preserveViewport: true
});

其中var_url是一个web服务，其中传递日期，以便返回的内容根据日期选择而变化。我遇到的问题是显示的所有标记都堆叠，好像之前的eyars标记没有被删除。由于我创建了图层ctaLayer，我希望下次调用此代码时它会被销毁，但是没有..

有没有办法检查ctaLayer是否存在并在我再次调用之前将其删除？我认为当地的var ctaLayer = new google.maps.KmlLayer会这样做。感谢

Answer 1

ctaLayer.setMap(null);从地图中删除图层。

Answer 2

每次都不要创建新的KMLLayer，而是使用单个KMLLayer并在后续调用中为现有图层设置新的url：

ctaLayer.setUrl(var_url);

      function initMap() {
        var map = new google.maps.Map(document.getElementById('map'), {
          zoom: 4,
          center: {lat: 33.7489954, lng:  -84.3879824},
          noClear:true
        }),
        select=map.getDiv().querySelector('select'),
        ctaLayer = new google.maps.KmlLayer({preserveViewport:true,map:map});
          map.controls[google.maps.ControlPosition.TOP_CENTER].push(select);
        
        google.maps.event.addDomListener(document.getElementsByTagName('select')[0],'change',function(){
          ctaLayer.setUrl('https://Services.oci.ga.gov/Geo_kml_Dust/default.aspx?Y='+this.value+'&t='+new Date().getTime());
          
          
        });
        google.maps.event.trigger(document.getElementsByTagName('select')[0],'change')
      }

html, body ,#map {
        height: 100%;
        margin: 0;
        padding: 0;
      }

    <div id="map">
        <select>
  <option>2016</option>
  <option>2015</option>
  <option>2014</option>
  <option>2013</option>
  <option>2012</option>
  <option>2011</option>
  <option>2010</option>
</select>
    </div>

    <script async defer
    src="https://maps.googleapis.com/maps/api/js?callback=initMap">
    </script>

如何擦除图层

2 个答案: