在應用新的kml層之前，清除所有KML層

Question

我剛剛開始一個很棒的新項目，但是我遇到了一些簡單的問題。

我正在嘗試通過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> 

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（在創建它的函數之外無法訪問），並將其添加到地圖中。 從聲明var ctaLayer = ...刪除var

工作代碼段（來自小提琴的更新版本 ）：

 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>