javascript - 根据标记设置自动缩放/中心基准

Question

我的 Google map 中有 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)将 map 置于数据的中心。缩放级别是整数。 fitBounds 缩放 map 以获得最佳拟合(尽管边缘周围有少量填充)。最佳结果取决于 HTML 视口(viewport)的大小和形状，您在问题中没有指定。

来自the documentation :

fitBounds(bounds:LatLngBounds|LatLngBoundsLiteral) | Return Value: None

Sets the viewport to contain the given bounds.

代码片段:

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>