2013-12-22 196 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