javascript - 在应用新的kml层之前，清除所有KML层

我刚刚开始一个很棒的新项目，但是我遇到了一些简单的问题。

我试图在通过Ajax应用新的KML层之前清除所有KML层。

https://jsfiddle.net/fkbxdaLc/2/

这是您清除地图的方式吗？

  ctaLayer.setMap(map);

$(document).ready(function() {

  Google = new google.maps.LatLng(41.875696, -87.624207);
  var mapOptions = {
    zoom: 2,
    center: Google
  }

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  ctaLayer = new google.maps.KmlLayer({
    url: 'http://portfolio.amir-meshkin.com/_timeline/years/0.kml',
    suppressInfoWindows: true,
    map: map
      //url: data
  });

  ctaLayer.setMap(map);

  google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
    var text = kmlEvent.featureData.description;
    showInContentWindow(text);
  });

  function showInContentWindow(text) {
    var sidediv = document.getElementById('history');
    sidediv.innerHTML = text;
  }




  $("#years a").click(function(e) {

    google.maps.event.trigger(map, 'resize');
    ctaLayer = new google.maps.KmlLayer(null);
    ctaLayer.setMap(null);
    //console.log( $( this ).data('y') );

    year = $(this).data('y');
    var ctaLayer = new google.maps.KmlLayer({
      map: map,
      url: 'http://portfolio.amir-meshkin.com/_timeline/years/' + year + '.kml'
        //url: data
    });



    ctaLayer.setMap(map);

    //return false;
    e.preventDefault();
  });




});

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0;
  background: #000;
}
#map-canvas {
  height: 90%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="map-canvas"></div>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<div id="history">histor:</div>
<div id="years">
  <a href="javascript:void(0);" data-y="0">0</a>
  <a href="javascript:void(0);" data-y="100">100</a>
  <a href="javascript:void(0);" data-y="200">200</a>
  <a href="javascript:void(0);" data-y="300">300</a>
  <a href="javascript:void(0);" data-y="400">400</a>
  <a href="javascript:void(0);" data-y="500">500</a>
</div>

最佳答案

这是问题代码：

        $( "#years a" ).click(function(e) {
            google.maps.event.trigger(map,'resize');
            ctaLayer = new google.maps.KmlLayer(null);
            ctaLayer.setMap(null);
            year = $( this ).data('y') ;
            var ctaLayer = new google.maps.KmlLayer({
                map: map,
                url: 'http://portfolio.amir-meshkin.com/_timeline/years/'+ year+'.kml'
            });
            ctaLayer.setMap(map);
            //return false;
            e.preventDefault();
        });

它创建本地版本的ctaLayer（在创建它的函数之外无法访问）并将其添加到地图中。从声明var中删除​​var ctaLayer = ...

工作代码段（来自updated version of your fiddle）：

var ctaLayer, map;
$(document).ready(function() {

  Google = new google.maps.LatLng(41.875696, -87.624207);
  var mapOptions = {
    zoom: 2,
    center: Google
  };

  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);

  ctaLayer = new google.maps.KmlLayer({
    url: 'http://portfolio.amir-meshkin.com/_timeline/years/0.kml',
    suppressInfoWindows: true,
    map: map
  });

  ctaLayer.setMap(map);

  google.maps.event.addListener(ctaLayer, 'click', function(kmlEvent) {
    var text = kmlEvent.featureData.description;
    showInContentWindow(text);
  });

  function showInContentWindow(text) {
    var sidediv = document.getElementById('history');
    sidediv.innerHTML = text;
  }




  $("#years a").click(function(e) {

    google.maps.event.trigger(map, 'resize');
    ctaLayer.setMap(null);
    //console.log( $( this ).data('y') );

    year = $(this).data('y');
    ctaLayer = new google.maps.KmlLayer({
      map: map,
      url: 'http://portfolio.amir-meshkin.com/_timeline/years/' + year + '.kml'
    });

    //return false;
    e.preventDefault();
  });




});

html,
body {
  height: 100%;
  margin: 0px;
  padding: 0;
  background: #000;
}
#map-canvas {
  height: 90%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&signed_in=true"></script>
<div id="map-canvas"></div>
<div id="history">histor:</div>
<div id="years"> <a href="javascript:void(0);" data-y="0">0</a>
  <a href="javascript:void(0);" data-y="100">100</a>
  <a href="javascript:void(0);" data-y="200">200</a>
  <a href="javascript:void(0);" data-y="300">300</a>
</div>