jQuery：如何使用地址陣列自動適配Google地圖

Question

我有這個代碼從數組中拉出地址並在地圖上標記它們。我如何讓地圖自動適合結果？在這個例子中，它應該自動適應美國（大部分）。

這裏是小提琴：http://jsfiddle.net/P2QhE/1149/

$(document).ready(function() { 
    var map; 
    var elevator; 
    var myOptions = { 
     zoom: 1, 
     center: new google.maps.LatLng(0, 0), 
     mapTypeId: 'terrain', 
    }; 
    map = new google.maps.Map($('#map_canvas')[0], myOptions); 
    var addresses = ['TX', 'New York', 'California','Florida','MI']; 

    for (var x = 0; x < addresses.length; x++) { 
     $.getJSON('http://maps.googleapis.com/maps/api/geocode /json?address='+addresses[x]+'&sensor=false', null, function (data) { 
      var p = data.results[0].geometry.location 
      var latlng = new google.maps.LatLng(p.lat, p.lng); 
      new google.maps.Marker({ 
       position: latlng, 
       map: map 
      }); 
     }); 
    } 
}); 

Answer 1

您需要使用bounds對象，並記住添加標記的位置。

 $(document).ready(function() { 
      var addresses = ['Norway', 'Africa', 'Asia','North America','South America']; 
      var map; 

      var bounds = new google.maps.LatLngBounds(); 
      var elevator; 
      var myOptions = { 
       zoom: 13, 
       mapTypeId: 'roadmap' 
      }; 
      map = new google.maps.Map($('#map_canvas')[0], myOptions); 
      var addresses = ['TX', 'New York', 'California','Florida','MI']; 

      for (var x = 0; x < addresses.length; x++) { 
       $.getJSON('http://maps.googleapis.com/maps/api/geocode/json?address='+addresses[x]+'&sensor=false', { }, function (data) { 
        var p = data.results[0].geometry.location 
        var latlng = new google.maps.LatLng(p.lat, p.lng); 
        bounds.extend(latlng); 
        new google.maps.Marker({ 
         position: latlng, 
         map: map 
        });       

        // Automatically center the map fitting all markers on the screen 
        map.fitBounds(bounds); 
       }); 
      } 
     });