Google v3 MAP API: Trung tâm & Zoom trên mốc hiển thị

Question

tôi sử dụng đoạn mã sau để thiết lập đánh dấu trên bản đồ của tôi:

var latLngs = [] 
    $.each(locations.markers, function(i, m){ 
    var myLatLng = new google.maps.LatLng(m.latitude, m.longitude); 
    latLngs[i] = myLatLng           
    var marker = new google.maps.Marker({ 
    position: myLatLng, 
    map: map, 
    shadow: shadow, 
    icon: image, 
    shape: shape, 
    title: m.city, 
    zIndex: i 
    }); 
    }) 

Các dấu hiệu hiển thị trên bản đồ của tôi. Bây giờ tôi muốn căn giữa & thu phóng bản đồ trên các điểm đánh dấu này. Làm thế nào tôi có thể thực hiện điều này? Tôi đã thử:

map.fitBounds(getBoundsForLatLngs(latLngs)); 

Các console.log của latLngs đưa ra:

[(46.793182, 7.146903) { b=46.793182, more...}, (46.8077779, 7.1709386) { b=46.8077779, more...}] 

Nhưng nó dường như không làm việc, và tôi nhận được không có lỗi trong giao diện điều khiển. Tôi đang làm gì sai?

Answer 1

Tôi đã cũng tìm sửa chữa này mà zooms to fit all markers

LatLngList: một loạt các trường hợp latLng, ví dụ:

// "map" is an instance of GMap3 

var LatLngList = [ 
        new google.maps.LatLng (52.537,-2.061), 
        new google.maps.LatLng (52.564,-2.017) 
       ], 
    latlngbounds = new google.maps.LatLngBounds(); 

LatLngList.forEach(function(latLng){ 
    latlngbounds.extend(latLng); 
}); 

// or with ES6: 
// for(var latLng of LatLngList) 
// latlngbounds.extend(latLng); 

map.setCenter(latlngbounds.getCenter()); 
map.fitBounds(latlngbounds); 

Answer 2

Hãy thử chức năng này .... nó hoạt động ...

$(function() { 
     var myOptions = { 
      zoom: 10, 
      center: latlng, 
      mapTypeId: google.maps.MapTypeId.ROADMAP 
     }; 
     var map = new google.maps.Map(document.getElementById("map_canvas"),myOptions); 
     var latlng_pos=[]; 
     var j=0; 
     $(".property_item").each(function(){ 
      latlng_pos[j]=new google.maps.LatLng($(this).find(".latitude").val(),$(this).find(".longitude").val()); 
      j++; 
      var marker = new google.maps.Marker({ 
       position: new google.maps.LatLng($(this).find(".latitude").val(),$(this).find(".longitude").val()), 
       // position: new google.maps.LatLng(-35.397, 150.640), 
       map: map 
      }); 
     } 
     ); 
     // map: an instance of google.maps.Map object 
     // latlng: an array of google.maps.LatLng objects 
     var latlngbounds = new google.maps.LatLngBounds(); 
     for (var i = 0; i < latlng_pos.length; i++) { 
      latlngbounds.extend(latlng_pos[ i ]); 
     } 
     map.fitBounds(latlngbounds); 



    }); 

Answer 3

Trong trường hợp bạn thích phong cách chức năng hơn:

// map - instance of google Map v3 
// markers - array of Markers 
var bounds = markers.reduce(function(bounds, marker) { 
    return bounds.extend(marker.getPosition()); 
}, new google.maps.LatLngBounds()); 

map.setCenter(bounds.getCenter()); 
map.fitBounds(bounds);