将具有相同的地图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>