重置Google Maps API v3上的边界 [英] Reset bounds on Google Maps API v3

问题描述

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

解决方案

您必须创建一个新边界对象，将地图点添加到它，然后将边界对象添加到地图。 / p>

简明的解决方案：

  //创建新边界对象
 var bounds = new google.maps.LatLngBounds（）; 
 //循环一个点数组，将它们添加到边界
（var i = 0; i< data.length; i ++）{
 var geoCode = new google.maps。 LatLng（data [i] [1]，data [i] [2]）; 
 bounds.extend（geoCode）; 
} 
 //添加新的边界对象以映射
 map.fitBounds（bounds）; 
  

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

 < script type =text / javascript> 
 
 var map; 
 var markers = []; 
 $ b $（document）.ready（function（）{
 initialize（）; 
 setInterval（function（）{
 setMarkers（）; 
} ，3000）; 
}）; 
 
 google.maps.visualRefresh = true; 
函数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（）; 
} 
 
函数setMarkers（）
 {
 removeMarkers（）; 
 
 var bounds = new google.maps.LatLngBounds（）; 
 
 $ .ajax（{
 url：/ Your / Url？variable = 123，
 dataType：json，
 success：function（data） {
 //返回的数据由字符串[3]组成
 if（data！= null）{
 //循环数据
 for（var i = 0; i （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.c ontent）; 
 infowindow.open（map，this）; 
}）; 
 
 markers.push（marker）; 
 bounds.extend（geoCode）; 
} 
} 
 map.fitBounds（bounds）; 
} 
}）; 
 
 
函数removeMarkers（）
 {
 for（var i = 0; i< markers.length; i ++）{
 markers [i ] .setMap（NULL）; 
 
 
 $ / code> 

How can I reset the bounds of a GoogleMap when user selects an option? Bounds have already been set to include a 'big picture' of the area, I want to zoom to a specfic area when the user selects an option...and need to do so by resetting the bounds. Extending to include the lat/longs won't work, as they are already included.

解决方案

You have to create a new bounds object, add the map points to it, and then add the bounds object to the map.

Condensed solution:

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

My complete solution for removing existing markers, getting an updated array of points via ajax, adding them to the map, and then resetting the map boundries.

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

这篇关于重置Google Maps API v3上的边界的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！