Câu hỏi API Google Maps v3: Tôi có thể đặtZoom sau fitBounds không?


Tôi có một tập hợp các điểm tôi muốn vẽ trên Bản đồ Google được nhúng (API v3). Tôi muốn các giới hạn để chứa tất cả các điểm trừ khi mức thu phóng quá thấp (tức là, thu nhỏ quá nhiều). Cách tiếp cận của tôi đã như thế này:

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

// extend bounds with each point

gmap.fitBounds(bounds); 
gmap.setZoom( Math.max(6, gmap.getZoom()) );

Điều này không hoạt động. Dòng cuối cùng "gmap.setZoom ()" không thay đổi mức thu phóng của bản đồ nếu được gọi trực tiếp sau fitBounds.

Có cách nào để có được mức thu phóng của giới hạn mà không áp dụng nó vào bản đồ không? Các ý tưởng khác để giải quyết vấn đề này?


180
2018-03-13 07:49


gốc


Xem stackoverflow.com/questions/4523023/using-setzoom-after-using-fitbounds-with-google-maps-api-v3 - Mawg


Các câu trả lời:


Chỉnh sửa: Xem bình luận của Matt Diamond bên dưới.

Hiểu rồi! Thử cái này:

map.fitBounds(bounds);
var listener = google.maps.event.addListener(map, "idle", function() { 
  if (map.getZoom() > 16) map.setZoom(16); 
  google.maps.event.removeListener(listener); 
});

Sửa đổi nhu cầu của bạn.


303
2017-10-31 20:41



Giải pháp tuyệt vời, hoàn toàn cứu tôi rất nhiều rắc rối. Chỉ muốn thêm rằng bạn có thể đơn giản hóa nó hơn nữa bằng cách sử dụng phương thức addListenerOnce ... theo cách đó, bạn không phải lưu người nghe và loại bỏ nó theo cách thủ công, vì phương pháp này sẽ xử lý điều đó cho bạn. - Matt Diamond
Điều này có hành vi nhìn thấy bản đồ "bỏ qua". Thay vào đó, hãy lắng nghe sự kiện "zoom_change" và thiết lập nó trước khi gọi hàm fitBounds (). Xem câu trả lời của tôi bên dưới - Benjamin Sussman
Cảm ơn! google.maps.event.addListenerOnce (bản đồ, "nhàn rỗi", hàm () {} -> hoạt động tốt cho gói bản đồ của tôi cho SugarCRM. - jjwdesign
Người nghe không được kích hoạt cho tôi. Tôi đã thử điều này trong document.ready và window.load. Bất kỳ ý tưởng? đối tượng bản đồ là OK và thử addListener cũng: `var map = $ (" # js-main-map-canvas "); var listener = google.maps.event.addListenerOnce (bản đồ, "nhàn rỗi", hàm () {alert ('hello');}); ` - Henrik Erlandsson
Henrik, hãy thử $ ("# js-main-map-canvas") [0] hoặc $ ("# js-main-map-canvas"). Get (0); - Rafael


Tôi đã giải quyết một vấn đề tương tự trong một trong các ứng dụng của mình. Tôi hơi bối rối bởi mô tả của bạn về vấn đề này, nhưng tôi nghĩ bạn có cùng mục tiêu tôi đã ...

Trong ứng dụng của tôi, tôi muốn vẽ một hoặc nhiều điểm đánh dấu và đảm bảo bản đồ hiển thị tất cả. Vấn đề là, nếu tôi chỉ dựa vào phương pháp fitBounds, thì mức thu phóng sẽ được tối đa khi có một điểm duy nhất - điều đó không tốt.

Giải pháp là sử dụng fitBounds khi có nhiều điểm và setCenter + setZoom khi chỉ có một điểm.

if (pointCount > 1) {
  map.fitBounds(mapBounds);
}
else if (pointCount == 1) {
  map.setCenter(mapBounds.getCenter());
  map.setZoom(14);
}

60
2017-07-16 18:23



Câu trả lời của bạn đã giải quyết được sự cố của tôi với Google Maps V3. Cảm ơn! - FR6
Tôi đã có cùng một vấn đề, và giải pháp của bạn đã hoạt động! Cảm ơn! - manubkk
Tôi đã cố gắng cùng một cách tiếp cận của bản thân mình nhưng nó không hoạt động vì tôi đã không gọi setCenter () trước khi thiết lập zoom ... Tôi vẫn tự hỏi tại sao bước này là cần thiết, nhưng dù sao bây giờ nó hoạt động ... cảm ơn rất nhiều Jim! - daveoncode
Trung tâm Bản đồ đã giải quyết được vấn đề tôi đang gặp phải! Đẹp nhất +1 - ppumkin
Cảm ơn câu trả lời hay của bạn +1 - Bharat Chodvadiya


Tôi đã đến trang này nhiều lần để nhận được câu trả lời, và trong khi tất cả các câu trả lời hiện có là siêu hữu ích, họ đã không giải quyết vấn đề của tôi một cách chính xác.

google.maps.event.addListenerOnce(googleMap, 'zoom_changed', function() {
    var oldZoom = googleMap.getZoom();
    googleMap.setZoom(oldZoom - 1); //Or whatever
});

Về cơ bản tôi thấy rằng sự kiện 'zoom_changed' đã ngăn cản giao diện người dùng của bản đồ từ "bỏ qua" xảy ra khi tôi đợi sự kiện 'không hoạt động'.

Hy vọng điều này sẽ giúp ai đó!


41
2018-02-01 22:32



Tuyệt vời, tôi cũng có hành vi 'bỏ qua / tự động thu phóng'. Cũng giống như một lưu ý cho người đọc khác: hãy chắc chắn sử dụng "addListenerOnce" như Benjamin làm ở trên thay vì "addListener", hoặc phá vỡ đầu của bạn về lý do tại sao trình duyệt của bạn bị treo tất cả các thời gian ;-) - Geert-Jan
Cũng lưu ý rằng người nghe phải được thêm trước khi gọi fitBounds() nếu sử dụng zoom_changed - gapple
Cảm ơn điều này, có vẻ như v4 nên có một fitBounds (bounds, minZoomLevel) :) - Richard
Benjamin, tôi nghĩ tốt hơn nên sử dụng bounds_changed, bởi vì zoom_changed không phải được kích hoạt trong trường hợp khi fitBounds giữ mức thu phóng. Nỗ lực của tôi jsfiddle.net/rHeMp/10 không xác nhận điều đó, nhưng không nên dựa vào hành vi không xác định. - TMS
Wow! Tiếng Anh> Tiếng Việt! Tuyệt vời! - Denys Vitali


Tôi vừa sửa lỗi này bằng cách đặt trước MAXZoom, sau đó xóa nó sau đó. Ví dụ:

map.setOptions({ maxZoom: 15 });
map.fitBounds(bounds);
map.setOptions({ maxZoom: null });

9
2018-03-24 15:13



Giải pháp tốt nhất cho đến nay để tránh phóng to quá nhiều. Đơn giản và trực quan. Không vẽ và vẽ lại bản đồ. - user2605793
Thanx ... nó đã tiết kiệm thời gian của tôi .. - sunil
Đây thực sự là bước đi tốt nhất cho đến nay. - Zhenyang Hua
Tôi thấy rằng điều này không hoạt động nếu bạn đặt lại maxZoom ngay lập tức sau khi gọi fitBounds, vì việc thu phóng xảy ra không đồng bộ (vì vậy maxZoom sẽ trở về null khi nó phóng to). Chờ cho đến khi "nhàn rỗi" để thiết lập lại nó sẽ sửa lỗi này mặc dù tôi đoán. - Gus Hogg-Blake


Nếu tôi không nhầm, tôi giả sử bạn muốn tất cả các điểm của bạn hiển thị trên bản đồ với mức thu phóng cao nhất có thể. Tôi đã thực hiện điều này bằng cách khởi tạo mức thu phóng của bản đồ thành 16(không chắc đó có phải là mức thu phóng cao nhất có thể trên V3) hay không.

var map = new google.maps.Map(document.getElementById('map_canvas'), {
  zoom: 16,
  center: marker_point,
  mapTypeId: google.maps.MapTypeId.ROADMAP
});

Sau đó, tôi đã làm các công cụ giới hạn:

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

// You can have a loop here of all you marker points
// Begin loop
bounds.extend(marker_point);
// End loop

map.fitBounds(bounds);

Kết quả:  Sự thành công!


4
2017-07-22 18:02





Tôi sử dụng:

gmap.setZoom(24); //this looks a high enough zoom value
gmap.fitBounds(bounds); //now the fitBounds should make the zoom value only less

Điều này sẽ sử dụng nhỏ hơn 24 và mức thu phóng cần thiết theo mã của bạn, tuy nhiên, điều này có thể thay đổi mức thu phóng và không quan tâm đến mức độ bạn đã thu nhỏ.


3
2018-05-25 09:35



Tôi ghét phải nói điều này, nhưng kỳ lạ như câu trả lời này trông giống như, đó là điều duy nhất mà làm việc cho đến nay và tôi đã tìm kiếm 4-5hrs trong một khoảng thời gian 3 ngày. Vẫn sẽ tìm kiếm một giải pháp tốt hơn. - Allov


Đã có cùng một vấn đề, cần thiết để phù hợp với nhiều điểm đánh dấu trên bản đồ. Điều này đã giải quyết trường hợp của tôi:

  1. Giới hạn khai báo
  2. Sử dụng lược đồ do koderoid cung cấp (cho mỗi bộ đánh dấu bounds.extend(objLatLng))
  3. Thực hiện fitbounds SAU bản đồ hoàn thành:

    google.maps.event.addListenerOnce(map, 'idle', function() { 
        map.fitBounds( bounds );
    });
    

2
2017-11-09 18:18