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

working fiddle

工作代码段：

＆＃13;

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();

＆＃13;

#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;
}

＆＃13;

<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>

＆＃13;

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

1 个答案: