Javascript 基于标记设置自动缩放/居中

我的谷歌地图上有5个标记。他们都在美国境内

我想放大所有标记并将其居中

这是我现在拥有的

<script src="http://maps.google.com/maps/api/js"></script>


<script type="text/javascript">

  function initialize() {


    var data = $locations;
    var locations = [];

    for (i = 0; i < data.length; i++) {
      locations[i] = [];
      locations[i][0] = data[i]['name'];
      locations[i][1] = data[i]['lat'];
      locations[i][2] = data[i]['lng'];
      locations[i][3] = i;
    }



    console.log(JSON.stringify(locations))

    window.map = new google.maps.Map(document.getElementById('map'), {
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

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

    var bounds = new google.maps.LatLngBounds();

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

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

    map.fitBounds(bounds);

    var listener = google.maps.event.addListener(map, "idle", function () {
      map.setZoom(3);
      google.maps.event.removeListener(listener);
    });
  }

  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>

函数初始化（）{
var数据=$位置；
var位置=[]；
对于（i=0；i

---

我的目标 就是得到这个

---

map.fitBounds

会自动为您缩放地图，不要使用

map.setZoom

，因为它会覆盖地图

fitBounds：将视口设置为包含给定边界

函数初始化（）{
风险值数据=[{
名称：“Recoleta”，
lat:-34.585287，
液化天然气：-58.397765
}, {
名称：“巴勒莫”，
lat:-34.587117，
液化天然气：-58.421475
}, {
名称：“贝尔格拉诺”，
lat:-34.562704，
液化天然气：-58.454754
}];
//不需要位置，因为数据已经包含了所有信息。
window.map=new google.maps.map（document.getElementById（'map'）{
mapTypeId:google.maps.mapTypeId.ROADMAP，
maxZoom:15//以防只有一个标记。
});
var infowindow=new google.maps.infowindow（）；
var bounds=new google.maps.LatLngBounds（）；
对于（i=0；i
#地图{宽度：300px；高度：180px；}

调用将地图集中在数据上。
缩放级别是整数
fitBounds
缩放贴图以获得最佳匹配（尽管边缘周围有少量填充）。最佳结果取决于HTML视口的大小和形状，您在问题中没有指定

发件人：

fitBounds（边界：LatLngBounds | LatLngBounds横向）|
返回值：无

将视口设置为包含给定边界

代码片段：


函数初始化（）{
var数据=$位置；
var位置=[]；
对于（i=0；i
html，
身体，
#地图{
身高：100%；
宽度：100%；
边际：0px；
填充：0px
}
它不工作了吗？请提供一个例子来说明这个问题。@geocodezip：我并不是说它不起作用。它正在工作，但我正在尝试居中/缩放它。你这是什么意思（“我正在尝试居中/缩放它”）？您对
map.fitBounds（bounds）
的调用将地图集中在数据上。听起来好像它没有做你想做的。请说明正在发生的事情以及您期望发生的事情。我的两个最远的标记分别位于加利福尼亚州和马萨诸塞州。伊娃