在 Google Maps API v3 上重置边界答案

【问题标题】：Reset bounds on Google Maps API v3在 Google Maps API v3 上重置边界
【发布时间】：2011-06-13 16:00:43
【问题描述】：

当用户选择一个选项时，如何重置 GoogleMap 的边界？边界已经设置为包括该区域的“大图”，我想在用户选择一个选项时缩放到特定区域......并且需要通过重置边界来实现。扩展以包含纬度/经度将不起作用，因为它们已经包含在内。

【问题讨论】：

【解决方案1】：

您必须创建一个new bounds object，将地图点添加到它，然后将边界对象添加到地图。

浓缩解决方案：

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

我删除现有标记、通过 ajax 获取更新的点数组、将它们添加到地图、然后重置地图边界的完整解决方案。

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

【讨论】：