在Maps API中切換kml圖層

我正在嘗試添加切換kmls和checkbox選項的功能，以便用戶將kmls添加到已默認加載kmls的地圖。在Maps API中切換kml圖層

我使用具有與該品種的其他職位很多共同點這個職位的建議，擴大對我自己的腳本 - Toggle multiple KML/KML layers in google maps API v3 但是，在一個非常簡單的方法添加這是行不通的。有沒有人有任何建議？感謝您的期待。

<script src="https://maps.googleapis.com/maps/api/js?v=3"></script> 

<script>  
    // layers to toggle 

     var layers=[]; 

    layers[0] = new google.maps.KmlLayer('https://example.com/kmz/groundWater_well_2010.kml', 
    {preserveViewport: true}); 

    layers[1] = new google.maps.KmlLayer('https://example.com/kmz/snowPole_2010.kml', 
    {preserveViewport: true}); 
    var map; 

    // end layers to toggle 
    // intialize 

    function initialize() { 
    var myLatlng = new google.maps.LatLng(0,0); 
     var mapOptions = { 
      zoom: 1, 
      center: myLatlng, 
      mapTypeId: google.maps.MapTypeId.SATELLITE 
     }; 


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

     loadKml=function(opts,map){ 
     var layer=new google.maps.KmlLayer(); 
     opts.preserveViewport=true; 
     if(map){opts.map=map;} 

     google.maps.event.addListener(layer,'defaultviewport_changed',function(){ 
      var map=this.getMap(), 
       bounds=map.get('kmlBounds')||this.getDefaultViewport(); 

      bounds.union(this.getDefaultViewport()); 
      map.set('kmlBounds',bounds); 
      map.fitBounds(bounds); 
     }); 
     layer.setOptions(opts); 
     return layer; 
     } 

     var sitesLayer = loadKml({ 
     url: 'https://example.com/kmzbasins.kml', 
     map:map 
     }); 

     var basinLayer = loadKml({ 
     url: 'https://example.com/kmz/boundries.kml', 
      map:map 
     }); 

     // toggle layers at the beginning 

    function toggleLayers(i,theMap) 
    { 

    if(layers[i].getMap()==null) { 
     layers[i].setMap(theMap); 
     } 
     else { 
     layers[i].setMap(null); 
    } 
     document.getElementById('status').innerHTML += "toggleLayers("+i+") [setMap("+layers[i].getMap()+"] returns status: "+layers[i].getStatus()+"<br>"; 
    } 
    // end toggle layers 

    } 

    google.maps.event.addDomListener(window, 'load', initialize); 

     </script>

然後在身體我有─

<body onload="initialize()"> 

    <div id="map"></div> 
    Layer1 <input type="checkbox" id="layer_01" onclick="toggleLayers(0);"/> 
    Layer2 <input type="checkbox" id="layer_02" onclick="toggleLayers(1);"/>

來源

2015-07-10 Eric

你有兩個選擇：

製作地圖可變全球（目前您的本地初始化函數），使toggleLayers的功能也是全局的（它們需要是全局的，才能用於HTML點擊處理程序中）

proof of concept fiddle

使用google.maps.event.addDomListener點擊偵聽器添加到複選框，保持每一件事本地的初始化函數。

proof of concept fiddle

代碼片段：

// layers to toggle 
 
var layers = []; 
 

 
layers[0] = new google.maps.KmlLayer('http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSouthern_kml.xml', { 
 
    preserveViewport: true 
 
}); 
 

 
layers[1] = new google.maps.KmlLayer('http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSoutheastern_kml.xml', { 
 
    preserveViewport: true 
 
}); 
 

 
// end layers to toggle 
 
// intialize 
 

 
function initialize() { 
 
    var myLatlng = new google.maps.LatLng(40, -110); 
 
    var mapOptions = { 
 
    zoom: 5, 
 
    center: myLatlng, 
 
    mapTypeId: google.maps.MapTypeId.SATELLITE 
 
    }; 
 

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

 
    loadKml = function(opts, map) { 
 
    var layer = new google.maps.KmlLayer(); 
 
    opts.preserveViewport = true; 
 
    if (map) { 
 
     opts.map = map; 
 
    } 
 

 
    google.maps.event.addListener(layer, 'defaultviewport_changed', function() { 
 
     var map = this.getMap(), 
 
     bounds = map.get('kmlBounds') || this.getDefaultViewport(); 
 

 
     bounds.union(this.getDefaultViewport()); 
 
     map.set('kmlBounds', bounds); 
 
     map.fitBounds(bounds); 
 
    }); 
 
    layer.setOptions(opts); 
 
    return layer; 
 
    }; 
 

 
    function toggleLayers(i) { 
 
     if (layers[i].getMap() == null) { 
 
     layers[i].setMap(map); 
 
     } else { 
 
     layers[i].setMap(null); 
 
     } 
 
     google.maps.event.addListener(layers[i], 'status_changed', function() { 
 

 
     document.getElementById('status').innerHTML += "toggleLayers(" + i + ") [setMap(" + layers[i].getMap() + "] returns status: " + layers[i].getStatus() + "<br>"; 
 
     }); 
 
    } 
 
    // end toggle layers 
 
    google.maps.event.addDomListener(document.getElementById('layer_01'), 'click', function(evt) { 
 
    toggleLayers(0); 
 
    }); 
 
    google.maps.event.addDomListener(document.getElementById('layer_02'), 'click', function(evt) { 
 
    toggleLayers(1); 
 
    }); 
 
    // toggle layers at the beginning 
 
    toggleLayers(0); 
 
    toggleLayers(1); 
 
} 
 

 
google.maps.event.addDomListener(window, 'load', initialize);

body, 
 
html, 
 
#map { 
 
    height: 100%; 
 
    width: 100%; 
 
}

<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
Layer1 
 
<input type="checkbox" id="layer_01" checked="checked" />Layer2 
 
<input type="checkbox" id="layer_02" checked="checked" /> 
 
<div id="map"></div> 
 
<div id="status"></div>

來源

2015-07-10 18:57:58 geocodezip

您沒有提供[最小的，完整的，經過測試和讀示例]（HTTP：//計算器.com/help/mcve），所以沒有經過測試。通過經過測試的示例更新答案。 – geocodezip

我在您提供的鏈接上收到了javascript錯誤：'未捕獲的ReferenceError：toggleLayers未定義（通過我更新的答案解決）。 – geocodezip

即使我試圖直接執行腳本，它仍然無法正常工作，但沒有「Uncaught ReferenceError」？這是我正在做的事情嗎？http：//czo.colorado.edu/geGIS/toggleTest3stack.html – Eric

在Maps API中切換kml圖層

回答

相關問題