Trung tâm / Đặt Thu phóng bản đồ để bao gồm tất cả các Dấu hiển thị?

Tôi đang đặt nhiều điểm đánh dấu trên bản đồ của mình và tôi có thể đặt tĩnh các mức thu phóng và trung tâm nhưng điều tôi muốn là, bao gồm tất cả các điểm đánh dấu và thu phóng càng nhiều càng tốt để có thể nhìn thấy tất cả các thị trường

Phương pháp có sẵn là sau

setZoom(zoom:number)

và

setCenter(latlng:LatLng)

Không setCenterhỗ trợ nhiều vị trí hoặc đầu vào mảng Vị trí cũng như setZoomkhông có loại chức năng này

Bạn cần sử dụng fitBounds()phương pháp.

var markers = [];//some array
var bounds = new google.maps.LatLngBounds();
for (var i = 0; i < markers.length; i++) {
 bounds.extend(markers[i]);
}

map.fitBounds(bounds);

Tài liệu từ developers.google.com/maps/documentation/javascript :

fitBounds(bounds[, padding])

Thông số:

`bounds`:  [`LatLngBounds`][1]|[`LatLngBoundsLiteral`][1]
`padding` (optional):  number|[`Padding`][1]

Giá trị trả về: Không

Đặt chế độ xem để chứa các giới hạn đã cho.
Lưu ý : Khi bản đồ được đặt thành display: none, fitBoundschức năng sẽ đọc kích thước của bản đồ là 0x0và do đó không làm gì cả. Để thay đổi các khung nhìn trong khi bản đồ được ẩn, thiết lập các bản đồ để visibility: hidden, do đó đảm bảo div bản đồ có kích thước thực tế.

Để mở rộng câu trả lời đã cho bằng một vài thủ thuật hữu ích:

var markers = //some array;
var bounds = new google.maps.LatLngBounds();
for(i=0;i<markers.length;i++) {
   bounds.extend(markers[i].getPosition());
}

//center the map to a specific spot (city)
map.setCenter(center); 

//center the map to the geometric center of all markers
map.setCenter(bounds.getCenter());

map.fitBounds(bounds);

//remove one zoom level to ensure no marker is on the edge.
map.setZoom(map.getZoom()-1); 

// set a minimum zoom 
// if you got only 1 marker or all markers are on the same address map will be zoomed too much.
if(map.getZoom()> 15){
  map.setZoom(15);
}

//Alternatively this code can be used to set the zoom for just 1 marker and to skip redrawing.
//Note that this will not cover the case if you have 2 markers on the same address.
if(count(markers) == 1){
    map.setMaxZoom(15);
    map.fitBounds(bounds);
    map.setMaxZoom(Null)
}

CẬP NHẬT:
Nghiên cứu sâu hơn trong chủ đề cho thấy fitBound () là một sự bất thường và tốt nhất là thực hiện thao tác Thu phóng với người nghe được xác định trước khi gọi Fit Bound.
Cảm ơn @Tim, @ xr280xr, thêm ví dụ về chủ đề: SO: setzoom-after-fitbound

google.maps.event.addListenerOnce(map, 'bounds_changed', function(event) {
  this.setZoom(map.getZoom()-1);

  if (this.getZoom() > 15) {
    this.setZoom(15);
  }
});
map.fitBounds(bounds);

Kích thước của mảng phải lớn hơn 0. Ngược lại, bạn sẽ có kết quả bất ngờ.

function zoomeExtends(){
  var bounds = new google.maps.LatLngBounds();
  if (markers.length>0) { 
      for (var i = 0; i < markers.length; i++) {
         bounds.extend(markers[i].getPosition());
        }    
        myMap.fitBounds(bounds);
    }
}

Có MarkerClusterertiện ích phía máy khách này có sẵn cho google Map như được chỉ định ở đây trên Bài viết dành cho nhà phát triển Google Map , đây là tóm tắt về cách sử dụng của nó:

Có nhiều cách tiếp cận để làm những gì bạn yêu cầu:

• Phân cụm dựa trên lưới
• Phân cụm dựa trên khoảng cách
• Quản lý điểm đánh dấu
• Bàn Fusion
• Đánh dấu cụm
• Người quản lý đánh dấu

Bạn có thể đọc về chúng trên các liên kết được cung cấp ở trên.

Marker Clusterersử dụng phân cụm dựa trên lưới để phân cụm tất cả các điểm đánh dấu muốn lưới. Phân cụm dựa trên lưới hoạt động bằng cách chia bản đồ thành các ô vuông có kích thước nhất định (kích thước thay đổi ở mỗi lần thu phóng) và sau đó nhóm các điểm đánh dấu vào mỗi ô vuông lưới.

Trước khi phân cụm

Sau khi phân cụm

Tôi hy vọng đây là những gì bạn đang tìm kiếm & điều này sẽ giải quyết vấn đề của bạn :)