google maps api javascript загрузить kml, установить зум и центр

Question

Я загружаю 4 разных файла kml на основе взаимодействия с пользователем. Действие по умолчанию при загрузке 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 Long и зумом Я хотел, а затем перезагрузил его, но по какой-то причине мой слой kml не загружен.

Если кто-то должен был сделать это в прошлом, пожалуйста, дайте мне знать, как вы пошли об этом :)

Благодарности

Answer 1

Один из способов сделать это было бы использовать объединение видовых по умолчанию из 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