Google Haritalar API'sındaki sınırları sıfırla v3

Question

Kullanıcı bir seçenek belirlediğinde GoogleMap’ın sınırlarını nasıl sıfırlayabilirim? Sınırlar zaten alanın 'büyük resmini' içerecek şekilde ayarlanmış, kullanıcı bir seçenek seçtiğinde belirli bir bölgeye zum yapmak istiyorum ... ve sınırları sıfırlayarak bunu yapmak gerekiyor. Lat/long'ları içerecek şekilde genişletmek zaten dahil oldukları için çalışmayacaktır.

Answer 1

Bir new bounds object oluşturmak, ona harita noktaları eklemek ve sonra sınır nesnesini haritaya eklemeniz gerekir.

Yoğunlaştırılmış çözüm:

//Create new bounds object 
var bounds = new google.maps.LatLngBounds(); 
//Loop through an array of points, add them to bounds 
for (var i = 0; i < data.length; i++) { 
     var geoCode = new google.maps.LatLng(data[i][1], data[i][2]); 
     bounds.extend(geoCode); 
    } 
    //Add new bounds object to map 
    map.fitBounds(bounds); 

haritası dokanak, ajax noktalarının güncelleştirilmiş dizi alma, mevcut işaretleri kaldırarak harita ekleyerek ve ardından sıfırlamak için My komple çözüm.

<script type="text/javascript"> 

var map; 
var markers = []; 

$(document).ready(function() { 
    initialize(); 
    setInterval(function() { 
     setMarkers(); 
    }, 3000); 
}); 

google.maps.visualRefresh = true; 
function initialize() 
{ 
    var mapOptions = { 
     zoom: 2, 
     center: new google.maps.LatLng(45, -93), 
     mapTypeId: google.maps.MapTypeId.ROADMAP 
    }; 
    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions); 

    setMarkers(); 
} 

function setMarkers() 
{ 
    removeMarkers(); 

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

    $.ajax({ 
     url: "/Your/Url?variable=123", 
     dataType: "json", 
     success: function (data) { 
      //Data returned is made up of string[3] 
      if (data != null) { 
       //loop through data 
       for (var i = 0; i < data.length; i++) { 
        var geoCode = new google.maps.LatLng(data[i][1], data[i][2]); 
        var marker = new google.maps.Marker({ 
         position: geoCode, 
         map: map, 
         title: data[i][0], 
         content: '<div style="height:50px;width:200px;">' + data[i][0] + '</div>' 
        }); 

        var infowindow = new google.maps.InfoWindow(); 
        google.maps.event.addListener(marker, 'click', function() { 
         infowindow.setContent(this.content); 
         infowindow.open(map, this); 
        }); 

        markers.push(marker); 
        bounds.extend(geoCode); 
       } 
      } 
      map.fitBounds(bounds); 
     } 
    }); 
} 

function removeMarkers() 
{ 
    for (var i = 0; i < markers.length; i++) { 
     markers[i].setMap(null); 
    } 
}