2013-12-22 154 views
-1

我正在根據用戶交互加載4個不同的kml文件。使用以下代碼加載KML時的默認操作:谷歌地圖api javascript加載kml,設置縮放和中心

SW4KML = "http://kml.url" 
var sw4KmlLayer = new google.maps.KmlLayer({url: SW4KML}); 
sw4KmlLayer.setMap(map); 

它是放大到KML圖層的邊界。我想要的是能夠將縮放比例降低一或兩個,並且還可以將地圖中心略微向右移動。

我就得到了與使用「preserveViewport,用於:真正的」

SW4KML = "http://kml.url" 
var sw4KmlLayer = new google.maps.KmlLayer({url: SW4KML, preserveViewport: true}); 
sw4KmlLayer.setMap(map); 

,但我還沒有完全想通了如何從那裏,我試圖改變地圖選項給LAT長和縮放我想然後重新加載它,但出於某種原因,我的kml圖層沒有加載。

如果任何人有過這樣做,在過去,請讓我知道你是怎麼去一下:)

感謝

做到這一點是使用默認的視口的工會
+0

你不應該重新加載地圖,只是改變了中心和縮放到那些你想要的。 – geocodezip

+0

你的意思是這樣的? http://www.geocodezip.com/v3_SO_toggleKmlLayers.html – geocodezip

回答

0

的一種方式的KmlLayers。

var G = google.maps; 
    var layers = []; 

function computeBounds() { 
    var bounds = new G.LatLngBounds(); 
    for (var i=0; i<layers.length;i++) { 
    if (layers[i].getMap() != null) { 
     if ((typeof bounds == "undefined") || bounds.isEmpty()) bounds = layers[i].getDefaultViewport(); 
     else bounds.union(layers[i].getDefaultViewport()); 
    } 
    } 
    if (!bounds.isEmpty()) map.fitBounds(bounds); 
} 

function toggle() { 
    if (!this.kmlLayer) { 
    this.kmlLayer = new G.KmlLayer(
     'http://www.geocodezip.com/geoxml3_test/kmz/' + this.id + '.kmz', 
     { preserveViewport:true }); 
    this.kmlLayer.myId = layers.length; 
    layers.push(this.kmlLayer); 
    G.event.addListener(this.kmlLayer, "status_changed", function() { 
     document.getElementById('status').innerHTML += this.url+':'+this.getStatus()+"<br>"; 
    }); 
    G.event.addListener(this.kmlLayer,"defaultviewport_changed", function() { 
     this.bounds = this.getDefaultViewport(); 
     computeBounds(); 
    }); 
    } 

    if (this.kmlLayer.getMap() != null) { 
    this.kmlLayer.setMap(null); 
    } else { 
    this.kmlLayer.setMap(map); 
    }; 
    computeBounds(); 
}; 

function initialize() { 
    var layers = document.getElementsByTagName('input'); 
    var options = { 
      center: new G.LatLng(34.9, 137.3), 
      zoom: 10, 
      mapTypeId: G.MapTypeId.TERRAIN, 
      scaleControl: true, 
      overviewMapControl: true, 
      mapTypeControlOptions: { 
       style:G.MapTypeControlStyle.DROPDOWN_MENU } 
     }; 

    map = new G.Map(document.getElementById('map'), options); 

    for (var i=0; i<layers.length; i++) { 
    layers[i].type = 'checkbox'; 
    G.event.addDomListener(layers[i], 'click', toggle) 
    }; 
}; 

G.event.addDomListener(window, 'load', initialize); 

working example

+0

感謝geocodezip,這看起來不錯,但對我來說有點複雜,所以我會花一些時間去理解它。 – Mattec