Google MAP API v3: Центр и зум отображенных маркеров

Question

Я использую следующий код, чтобы установить маркеры на моей карте:

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 
    }); 
    }) 

маркеры появляются на моей карте. Теперь я хотел бы центрировать &, чтобы увеличить карту на этих маркерах. Как я могу это сделать? Я пробовал:

map.fitBounds(getBoundsForLatLngs(latLngs)); 

console.log из latLngs выдает:

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

Но это, кажется, не работает, и я не получаю сообщение об ошибке в консоли. Что я делаю не так?

Answer 1

Я также найти это исправление, zooms to fit all markers

LatLngList: массив экземпляров latLng, например:

// "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

Попробовать эту функцию .... это работает ...

$(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

В случае, если вы предпочитаете более функциональный стиль:

// 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);