在标记上设置自动缩放/中心基础

Question

我的Google地图中有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>

我的目标

是为了得到这个

Answer 1

对map.fitBounds(bounds)的调用将地图置于数据中心。 缩放级别是整数。 fitBounds缩放地图以获得最佳效果（尽管边缘周围有少量填充）。最佳结果取决于您在问题中未指定的HTML视口的大小和形状。

来自the documentation：

  

fitBounds（bounds：LatLngBounds | LatLngBoundsLiteral）|   返回值：无

     

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

代码段

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));
  }
  var rectangle = new google.maps.Rectangle({
    map: map,
    bounds: bounds,
    strokeColor: 'red',
    fillColor: 'red'
  });
  map.fitBounds(bounds);
}

function loadScript() {
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = 'https://maps.googleapis.com/maps/api/js?v=3.exp&' + 'callback=initialize';
  document.body.appendChild(script);
}
window.onload = loadScript;
var $locations = [{
  name: "New York, NY",
  lat: 40.7127837,
  lng: -74.0059413
}, {
  name: "Boston, MA",
  lat: 42.3600825,
  lng: -71.05888
}, {
  name: "San Francisco",
  lat: 37.7749295,
  lng: -122.4194155
}];

html,
body,
#map {
  height: 100%;
  width: 100%;
  margin: 0px;
  padding: 0px
}

<div id="map"></div>

Answer 2

map.fitBounds会自动缩放地图，不要使用map.setZoom，因为它会覆盖它。

  

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

＆＃13;

＆＃13;

function initialize() {

  var data = [{
    name: 'Recoleta',
    lat: -34.585287,
    lng: -58.397765
  }, {
    name: 'Palermo',
    lat: -34.587117,
    lng: -58.421475
  }, {
    name: 'Belgrano',
    lat: -34.562704,
    lng: -58.454754
  }];
  
  //locations wasn't needed, since data had all the info already.

  window.map = new google.maps.Map(document.getElementById('map'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    maxZoom: 15 //In case you only have one marker.
  });

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

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

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

    bounds.extend(marker.position);

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

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

  map.fitBounds(bounds);
}

window.onload = initialize;

＆＃13;

#map { width: 300px; height: 180px; }

＆＃13;

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


<div id="map"></div>

＆＃13;

＆＃13;

＆＃13;

您应该将maxZoom属性设置为地图，以防您只有一个标记，因为fitBounds缩放不会很漂亮。

window.map = new google.maps.Map(document.getElementById('map'), {
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    maxZoom: 15 //In case you only have one marker.
});