谷歌地图APIJavaScript加载KML，设置缩放和中心

Question

我正在根据用户交互加载 4 个不同的 kml 文件。使用以下代码加载 KML 时的默认操作：

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

是缩放到 KML 图层的边界。我想要的是能够将缩放比例更改为少一两个，并将地图的中心稍微向右移动。

我已经使用"保留视口：真"

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

但是我还没有完全弄清楚如何从那里开始，我尝试将地图选项更改为我想要的纬度和缩放，然后重新加载它，但由于某种原因我的 kml 图层没有加载。

如果有人过去不得不这样做，请让我知道你是怎么做的:)

谢谢

Answer 1

一种方法是使用 KmlLayer 的默认视口的联合。

    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);

工作示例