將具有相同的地圖W/KML兩次放置在具有不同中心和縮放的頁面上

Question

我試圖將KMLLayer並排放置兩張地圖。我已經能夠得到地圖出現，但他們都使用相同的中心經緯度，即緯度/長度不被用於第二張地圖。我想放大第一張地圖35.04，-120.56的左下角以顯示更多細節。我如何居中/放大第二張地圖？

我是新來的小提琴 - 希望工程： http://jsfiddle.net/BobH_SLOAPCD/d427zc46/4/

地圖腳本

function initialize() { 
    var myLatlng = new google.maps.LatLng(35.3, -120.3); 

    var mapOptions = { 
    maxZoom: 12, 
    minZoom: 7, 
    center: myLatlng, 
    preserveViewport: true 
    }; 

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

    var kmlLayer = new google.maps.KmlLayer({ 
    url: 'http://www.slocleanair.org/air/AQI_III/AQI_2015_yy_yy.kml', 
    suppressInfoWindows: true, 
    map: map 
    }); 

    var myLatlng2 = new google.maps.LatLng(34.9, -120.5); 

    var mapOptions2 = { 
    maxZoom: 18, 
    minZoom: 8, 
    zoom: 9, 
    center: myLatlng2, 
    preserveViewport: true 
    }; 

    var map2 = new google.maps.Map(document.getElementById('map-canvas2'), 
    mapOptions2); 

    var kmlLayer2 = new google.maps.KmlLayer({ 
    url: 'http://www.slocleanair.org/air/AQI_III/AQI_2015_yy_yy.kml', 
    suppressInfoWindows: true, 
    map: map2 
    }); 
} 
initialize(); 

HTML：

<script src="http://maps.googleapis.com/maps/api/js?sensor=false"></script> 
<p>Test KML Layers</p> 
<div id="map-canvas"></div> 
<div id="map-canvas2"></div> 

CSS

#map-canvas { 
    width: 260px; 
    height: 180px; 
    padding: 10px; 
    border: 2px solid #999; 
    float:left; 
} 
#map-canvas2 { 
    width: 260px; 
    height: 180px; 
    padding: 10px; 
    border: 2px solid #999; 

Answer 1

preserveViewport選項是KmlLayers選項，而不是google.maps.Map option。請注意，如果您使用KViewLayers的兩個的preserveViewport，則需要爲地圖（縮放和居中）設置兩個必需選項。

working fiddle

工作代碼片段：

function initialize() { 
 
    var myLatlng = new google.maps.LatLng(35.3, -120.3); 
 

 
    var mapOptions = { 
 
     maxZoom: 12, 
 
     minZoom: 7, 
 
     center: myLatlng 
 
    }; 
 

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

 
    var kmlLayer = new google.maps.KmlLayer({ 
 
     url: 'http://www.slocleanair.org/air/AQI_III/AQI_2015_yy_yy.kml', 
 
     suppressInfoWindows: true, 
 
     map: map, 
 
     // preserveViewport: true 
 
    }); 
 

 
    var myLatlng2 = new google.maps.LatLng(34.9, -120.5); 
 

 
    var mapOptions2 = { 
 
     maxZoom: 18, 
 
     minZoom: 8, 
 
     zoom: 9, 
 
     center: myLatlng2 
 
    }; 
 

 
    var map2 = new google.maps.Map(document.getElementById('map-canvas2'), 
 
    mapOptions2); 
 

 
    var kmlLayer2 = new google.maps.KmlLayer({ 
 
     url: 'http://www.slocleanair.org/air/AQI_III/AQI_2015_yy_yy.kml', 
 
     suppressInfoWindows: true, 
 
     map: map2, 
 
     preserveViewport: true 
 
    }); 
 
} 
 

 
initialize();

#map-canvas { 
 
    width: 260px; 
 
    height: 180px; 
 
    padding: 10px; 
 
    border: 2px solid #999; 
 
    float:left; 
 
} 
 
#map-canvas2 { 
 
    width: 260px; 
 
    height: 180px; 
 
    padding: 10px; 
 
    border: 2px solid #999; 
 
}

<script src="http://maps.googleapis.com/maps/api/js"></script> 
 
<p>Test KML Layers</p> 
 
<div id="map-canvas"></div> 
 
<div id="map-canvas2"></div> 
 
<p>Big Map</p>