Google Map API v3 - đặt giới hạn và trung tâm

Gần đây tôi đã chuyển sang API Google Maps V3. Tôi đang làm việc với một ví dụ đơn giản, vẽ các điểm đánh dấu từ một mảng, tuy nhiên tôi không biết cách căn giữa và thu phóng tự động đối với các điểm đánh dấu.

Tôi đã tìm kiếm mạng cao và thấp, bao gồm cả tài liệu của chính Google, nhưng không tìm thấy câu trả lời rõ ràng. Tôi biết đơn giản là tôi có thể lấy trung bình các tọa độ, nhưng làm cách nào để đặt mức thu phóng phù hợp?

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(-33.9, 151.2),


    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions);

  setMarkers(map, beaches);
}


var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.423036, 151.259052, 5],
  ['Cronulla Beach', -34.028249, 121.157507, 3],
  ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
  ['Maroubra Beach', -33.450198, 151.259302, 1]
];

function setMarkers(map, locations) {

  var image = new google.maps.MarkerImage('images/beachflag.png',
      new google.maps.Size(20, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));
    var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',

      new google.maps.Size(37, 32),
      new google.maps.Point(0,0),
      new google.maps.Point(0, 32));


      var lat = map.getCenter().lat(); 
      var lng = map.getCenter().lng();      


  var shape = {
      coord: [1, 1, 1, 20, 18, 20, 18 , 1],
      type: 'poly'
  };
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
        position: myLatLng,
        map: map,
        shadow: shadow,
        icon: image,
        shape: shape,
        title: beach[0],
        zIndex: beach[3]
    });
  }
}

Có, bạn có thể khai báo đối tượng giới hạn mới của bạn.

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

Sau đó, cho mỗi điểm đánh dấu, mở rộng đối tượng giới hạn của bạn:

bounds.extend(myLatLng);
map.fitBounds(bounds);

API: google.maps.LatLngBound

Đã sắp xếp mọi thứ - xem vài dòng cuối cùng cho mã - ( bounds.extend(myLatLng); map.fitBounds(bounds);)

function initialize() {
  var myOptions = {
    zoom: 10,
    center: new google.maps.LatLng(0, 0),
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
  var map = new google.maps.Map(
    document.getElementById("map_canvas"),
    myOptions);
  setMarkers(map, beaches);
}

var beaches = [
  ['Bondi Beach', -33.890542, 151.274856, 4],
  ['Coogee Beach', -33.923036, 161.259052, 5],
  ['Cronulla Beach', -36.028249, 153.157507, 3],
  ['Manly Beach', -31.80010128657071, 151.38747820854187, 2],
  ['Maroubra Beach', -33.950198, 151.159302, 1]
];

function setMarkers(map, locations) {
  var image = new google.maps.MarkerImage('images/beachflag.png',
    new google.maps.Size(20, 32),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 32));
  var shadow = new google.maps.MarkerImage('images/beachflag_shadow.png',
    new google.maps.Size(37, 32),
    new google.maps.Point(0,0),
    new google.maps.Point(0, 32));
  var shape = {
    coord: [1, 1, 1, 20, 18, 20, 18 , 1],
    type: 'poly'
  };
  var bounds = new google.maps.LatLngBounds();
  for (var i = 0; i < locations.length; i++) {
    var beach = locations[i];
    var myLatLng = new google.maps.LatLng(beach[1], beach[2]);
    var marker = new google.maps.Marker({
      position: myLatLng,
      map: map,
      shadow: shadow,
      icon: image,
      shape: shape,
      title: beach[0],
      zIndex: beach[3]
    });
    bounds.extend(myLatLng);
  }
  map.fitBounds(bounds);
}

Đề xuất của tôi cho google maps api v3 sẽ là (đừng nghĩ rằng nó có thể được thực hiện hiệu quả hơn):

gmap : {
    fitBounds: function(bounds, mapId)
    {
        //incoming: bounds - bounds object/array; mapid - map id if it was initialized in global variable before "var maps = [];"
        if (bounds==null) return false;
        maps[mapId].fitBounds(bounds);
    }
}

Trong kết quả, bạn sẽ phù hợp với tất cả các điểm trong giới hạn trong cửa sổ bản đồ của bạn.

Ví dụ hoạt động hoàn hảo và bạn có thể tự do kiểm tra nó ở đây www.zemelapis.lt

Các câu trả lời là hoàn hảo để điều chỉnh ranh giới bản đồ cho các điểm đánh dấu nhưng nếu bạn muốn mở rộng ranh giới Google Maps cho các hình dạng như đa giác và vòng tròn, bạn có thể sử dụng các mã sau:

Đối với vòng kết nối

bounds.union(circle.getBounds());

Đối với đa giác

polygon.getPaths().forEach(function(path, index)
{
    var points = path.getArray();
    for(var p in points) bounds.extend(points[p]);
});

Đối với hình chữ nhật

bounds.union(overlay.getBounds());

Đối với Polylines

var path = polyline.getPath();

var slat, blat = path.getAt(0).lat();
var slng, blng = path.getAt(0).lng();

for(var i = 1; i < path.getLength(); i++)
{
    var e = path.getAt(i);
    slat = ((slat < e.lat()) ? slat : e.lat());
    blat = ((blat > e.lat()) ? blat : e.lat());
    slng = ((slng < e.lng()) ? slng : e.lng());
    blng = ((blng > e.lng()) ? blng : e.lng());
}

bounds.extend(new google.maps.LatLng(slat, slng));
bounds.extend(new google.maps.LatLng(blat, blng));

Phương thức setCenter () vẫn có thể áp dụng cho phiên bản API API mới nhất cho Flash nơi không tồn tại fitBound ().

Sử dụng dưới một,

map.setCenter (bound.getCenter (), map.getBoundZoomLevel (giới hạn));