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

Question

我刚刚开始一个很棒的新项目，但我在一些本应简单的事情上遇到了问题。

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

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

这就是你清除 map 的方式吗？

  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>

Answer 1

这是问题代码:

        $( "#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 的本地版本(在创建它的函数之外无法访问)并将其添加到 map 中。从声明 var ctaLayer = ...

中删除 var

工作代码片段(来自 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>