2016-11-16 61 views
-1

我有一個谷歌地圖上有幾個kml文件「就可以了」。我喜歡將縮放因子設置爲動態,以便顯示所有kml文件內容。是可以計算的KML文件的界限,將它們合併,並設置縮放,以顯示所有KML東西gmaps - 幾個kml文件集縮放

+0

我想,如果你不設置縮放它像你描述會工作。 – rheitzman

回答

0

嘗試使用preserveVieport

var kmlLayer = new google.maps.KmlLayer('your.kml', { 
    map: map, 
    preserveViewport: true 
}); 
0

你需要做兩件事情:

  1. 設置preserveViewport選項每個KmlLayer爲true(防止自動縮放以適應)
var mapLayer1 = new google.maps.KmlLayer({ 
    url: kmlUrl, 
    preserveViewport: true 
}); 
  1. 計算所有KmlLayers所需的邊界。
var bounds = new google.maps.LatLngBounds(); // global 
// determine the bounds for layer 1 
google.maps.event.addListener(mapLayer1, 'defaultviewport_changed', function() { 
    bounds.union(mapLayer1.getDefaultViewport()); 
    map.fitBounds(bounds); 
}); 
// include the bounds for layer 2 
google.maps.event.addListener(mapLayer2, 'defaultviewport_changed', function() { 
    bounds.union(mapLayer2.getDefaultViewport()); 
    map.fitBounds(bounds); 
}); 
// repeat for all KmlLayers you want shown 

proof of concept fiddle

代碼片段:

function initialize() { 
 
    var location = new google.maps.LatLng(52.0, 5.1); 
 
    var mapOptions = { 
 
    zoom: 15, 
 
    center: location, 
 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
 
    } 
 

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

 
    //Add MapLayers 
 
    var mapLayer1 = new google.maps.KmlLayer({ 
 
    url: 'http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSouthern_kml.xml', 
 
    preserveViewport: true 
 
    }); 
 
    google.maps.event.addListener(mapLayer1, 'defaultviewport_changed', function() { 
 
    bounds.union(mapLayer1.getDefaultViewport()); 
 
    map.fitBounds(bounds); 
 
    }); 
 
    mapLayer1.setMap(map); 
 

 
    var mapLayer2 = new google.maps.KmlLayer({ 
 
    url: 'http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerSoutheastern_kml.xml', 
 
    preserveViewport: true 
 
    }); 
 
    google.maps.event.addListener(mapLayer2, 'defaultviewport_changed', function() { 
 
    bounds.union(mapLayer2.getDefaultViewport()); 
 
    map.fitBounds(bounds); 
 
    }); 
 
    mapLayer2.setMap(map); 
 

 
    var mapLayer3 = new google.maps.KmlLayer({ 
 
    url: 'http://www.geocodezip.com/geoxml3_test/utah-hunt_com_DeerNorthern_kml.xml', 
 
    preserveViewport: true 
 
    }); 
 
    google.maps.event.addListener(mapLayer3, 'defaultviewport_changed', function() { 
 
    bounds.union(mapLayer3.getDefaultViewport()); 
 
    map.fitBounds(bounds); 
 
    }); 
 

 
    mapLayer3.setMap(map); 
 
} 
 
google.maps.event.addDomListener(window, "load", initialize);
html, 
 
body, 
 
#map-canvas { 
 
    height: 100%; 
 
    width: 100%; 
 
    margin: 0px; 
 
    padding: 0px 
 
}
<script src="https://maps.googleapis.com/maps/api/js"></script> 
 
<div id="map-canvas"></div>