在具有不同中心和缩放比例的页面上两次放置相同的地图 w/KML

Question

我正在尝试并排放置两个带有 KMLLayer 的地图。我已经能够让地图出现，但它们都使用相同的中心 lat/long 即 lat/long 没有被第二张地图接受。我想放大到第一张地图的左下角 35.04, -120.56 以显示更多细节。我怎样才能center/zoom第二张图？

我是 Fiddle 的新手 - 希望有用： 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 option, not a google.maps.Map option。请注意，如果您对 KmlLayers 的 both 使用 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>

在具有不同中心和缩放比例的页面上两次放置相同的地图 w/KML

Placing same map w/KML twice on page with different center and zoom

javascript

google-maps-api-3