2011-11-17 33 views
6

Tôi đã gặp sự cố khi gọi map.fitBounds dường như thu nhỏ. Tôi đang cố gắng sử dụng bộ định tuyến backbone.js để lưu các giới hạn bản đồ trong url. Tôi muốn có thể đánh dấu url và sau đó có bản đồ trông giống hệt nhau.google maps API 3 thu nhỏ trên fitBounds

Tôi nhận thấy việc gọi map.fitBounds(map.getBounds()) trong bảng điều khiển sẽ luôn thu nhỏ. Tôi muốn nó không thay đổi bản đồ ở đâu.

Đây có phải là hành vi bình thường không? Làm thế nào tôi có thể thực thi điều này để bản đồ sẽ trông giống nhau từ bước này sang bước tiếp theo?

Cảm ơn

Trả lời

9

Vấn đề này của Google Map API đã được thảo luận vài lần. Xem:

Chức năng map.fitBounds() đặt viewport để chứa các giới hạn. Nhưng chức năng map.getBounds() trả về giới hạn khung nhìn với một số lề bổ sung (lưu ý rằng đây là hành vi bình thường và không có lỗi). Các giới hạn mở rộng không còn phù hợp với chế độ xem trước nữa, vì vậy bản đồ thu nhỏ.

Một giải pháp đơn giản cho vấn đề của bạn là sử dụng trung tâm bản đồ và mức thu phóng thay thế. Xem các chức năng map.getCenter(), map.setCenter(), map.getZoom()map.setZoom().

+0

Tôi đã cho tôi nhiều hơn sau đó 16 giờ để hạ cánh tại đây. Ngay cả khi đây không phải là lỗi, thì có một số công việc xung quanh cho những người đang cố gắng làm điều này. –

0

Tôi cũng đã nhận thấy sự cố này. Giải pháp của tôi là so sánh map.getBounds() với những gì tôi thiết lập giới hạn; nếu chúng giống nhau, tôi sẽ bỏ qua cuộc gọi map.fitBounds().

1

Sửa vấn đề này vào năm 2017

Shrink hộp bounding hơi trước khi gửi nó cho map.fitBounds().

Dưới đây là một chức năng để thu nhỏ một hộp bounding:

// Values between 0.08 and 0.28 seem to work 
// Any lower and the map will zoom out too much 
// Any higher and it will zoom in too much 
var BOUNDS_SHRINK_PERCENTAGE = 0.08; // 8% 

/** 
* @param {google.maps.LatLngLiteral} southwest 
* @param {google.maps.LatLngLiteral} northeast 
* @return {Array[google.maps.LatLngLiteral]} 
*/ 
function slightlySmallerBounds(southwest, northeast) { 
    function adjustmentAmount(value1, value2) { 
    return Math.abs(value1 - value2) * BOUNDS_SHRINK_PERCENTAGE; 
    } 

    var latAdjustment = adjustmentAmount(northeast.lat, southwest.lat); 
    var lngAdjustment = adjustmentAmount(northeast.lng, southwest.lng); 

    return [ 
    {lat: southwest.lat + latAdjustment, lng: southwest.lng + lngAdjustment}, 
    {lat: northeast.lat - latAdjustment, lng: northeast.lng - lngAdjustment} 
    ] 
} 

Sử dụng nó như thế này:

// Ensure `southwest` and `northwest` are objects in google.maps.LatLngLiteral form: 
// southwest == {lat: 32.79712, lng: -117.13931} 
// northwest == {lat: 32.85020, lng: -117.09356} 

var shrunkBounds = slightlySmallerBounds(southwest, northeast); 
var newSouthwest = shrunkBounds[0]; 
var newNortheast = shrunkBounds[1]; 

// `map` is a `google.maps.Map` 
map.fitBounds(
    new google.maps.LatLngBounds(newSouthwest, newNortheast) 
); 

Tôi có một ứng dụng làm điều tương tự như codr: Tiết kiệm các giới hạn bản đồ hiện tại trong URL và khởi tạo bản đồ từ URL bị giới hạn khi làm mới. Giải pháp này hoạt động tuyệt vời cho điều đó.

Tại sao tính năng này hoạt động?

Google Maps về cơ bản thực hiện điều này khi fitBounds() được gọi là:

  1. Trung tâm bản đồ trên điểm giữa của khung giới hạn nhất định.
  2. Phóng to đến mức thu phóng cao nhất nơi chế độ xem sẽ là chứa các giới hạn đã cho bên trong của hộp chế độ xem.

Nếu giới hạn nhất định sẽ chính xác phù hợp với khung nhìn, Google Maps không coi đó là "chứa" các giới hạn, vì vậy nó phóng ra một mức độ nhiều hơn nữa.

0

Đối với những người xem câu hỏi này vào năm 2018, Google Maps API v3 hiện hỗ trợ đối số thứ hai padding chỉ định số lượng đệm để bao gồm các giới hạn mà bạn chỉ định.

Để tránh thu nhỏ, chỉ cần gọi fitBounds với đệm là 0. Đối với ví dụ này, nó sẽ là map.fitBounds(map.getBounds(), 0)

Các vấn đề liên quan