将具有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选项 。 请注意，如果您对两个 KmlLayers 都使用preserveViewport，则需要为地图设置两个必填选项（缩放和居中）。

工作小提琴

工作代码片段：

 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>