Google Maps API v3 中带有多个标记的自动居中地图 [英] Auto-center map with multiple markers in Google Maps API v3

问题描述

这是我用来显示带有 3 个图钉/标记的地图的方法:

This is what I use to display a map with 3 pins/markers:

<script>
  function initialize() {
    var locations = [
      ['DESCRIPTION', 41.926979, 12.517385, 3],
      ['DESCRIPTION', 41.914873, 12.506486, 2],
      ['DESCRIPTION', 41.918574, 12.507201, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 15,
      center: new google.maps.LatLng(41.923, 12.513),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  }

  function loadScript() {
    var script = document.createElement('script');
    script.type = 'text/javascript';
    script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false&' + 'callback=initialize';
    document.body.appendChild(script);
  }

  window.onload = loadScript;
</script>

<div id="map" style="width: 900px; height: 700px;"></div>

我正在寻找的是一种避免必须使用 center: new google.maps.LatLng(41.923, 12.513)手动"找到地图中心的方法.有没有办法让地图自动以三个坐标为中心?

What I’m looking for is a way to avoid having to "manually" find the center of the map with center: new google.maps.LatLng(41.923, 12.513). Is there a way to automatically have the map centered on the three coordinates?

推荐答案

有一种更简单的方法，通过扩展一个空的 LatLngBounds 而不是从两点显式地创建一个.(有关详细信息，请参阅此问题)

There's an easier way, by extending an empty LatLngBounds rather than creating one explicitly from two points. (See this question for more details)

应该看起来像这样，添加到您的代码中:

Should look something like this, added to your code:

//create empty LatLngBounds object
var bounds = new google.maps.LatLngBounds();
var infowindow = new google.maps.InfoWindow();    

for (i = 0; i < locations.length; i++) {  
  var marker = new google.maps.Marker({
    position: new google.maps.LatLng(locations[i][1], locations[i][2]),
    map: map
  });

  //extend the bounds to include each marker's position
  bounds.extend(marker.position);

  google.maps.event.addListener(marker, 'click', (function(marker, i) {
    return function() {
      infowindow.setContent(locations[i][0]);
      infowindow.open(map, marker);
    }
  })(marker, i));
}

//now fit the map to the newly inclusive bounds
map.fitBounds(bounds);

//(optional) restore the zoom level after the map is done scaling
var listener = google.maps.event.addListener(map, "idle", function () {
    map.setZoom(3);
    google.maps.event.removeListener(listener);
});

这样，你可以使用任意数量的点，并且不需要事先知道顺序.

This way, you can use an arbitrary number of points, and don't need to know the order beforehand.

演示 jsFiddle 在这里:http://jsfiddle.net/x5R63/

Demo jsFiddle here: http://jsfiddle.net/x5R63/

这篇关于Google Maps API v3 中带有多个标记的自动居中地图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！