Question

是否有标准方法可以在同一页面中同步两张Google地图的位置和缩放。

除了two maps之外，这个想法也是如此。它应该适用于鼠标缩放和重定位。

Answer 1

我会尝试这个，在你的拖拽事件中设置第二个地图的中心，从第一个地图

map2.setCenter(map1.getCenter());

你可以用缩放

做同样的事情

map2.setZoom(map1.getZoom());

在这里工作小提琴： https://jsfiddle.net/mervinsamy/w076uaL4/

var map1, map2;
var listener1;
var listener2;

function initMap() {
  var mapOptions = {
    zoom: 15,
    center: new google.maps.LatLng(33.8120918, -117.9211629),
    mapTypeId: 'terrain'
  };
  var mapOptions2 = {
    zoom: 15,
    center: new google.maps.LatLng(33.8120918, -117.9211629),
    mapTypeId: 'hybrid'
  };

  map1 = new google.maps.Map(document.getElementById('map1'), mapOptions);
  map2 = new google.maps.Map(document.getElementById('map2'), mapOptions2);


  map1.addListener('mouseover', function() {
    google.maps.event.removeListener(listener2);
    listener1 = google.maps.event.addListener(map1, 'bounds_changed', (function() {
      map2.setCenter(map1.getCenter());
      map2.setZoom(map1.getZoom());
    }));
  });


  map2.addListener('mouseover', function() {
    google.maps.event.removeListener(listener1);
    listener2 = google.maps.event.addListener(map2, 'bounds_changed', (function() {
      map1.setCenter(map2.getCenter());
      map1.setZoom(map2.getZoom());
    }));
  });


}

#map1,
#map2 {
  width: 450px;
  height: 400px;
}

<div id="map1">
</div>


<div id="map2"></div>

<script async defer src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAmj6gxqgx_9AUOSJoXY6f7q2WrsexIlqE&callback=initMap">
</script>

Google地图 - 同步多个地图的缩放/位置

1 个答案: