谷歌地图 API V3 方法 fitBounds()

Posted 2023-02-23

【中文标题】谷歌地图 API V3 方法 fitBounds()

【英文标题】：Google maps API V3 method fitBounds()

【发布时间】：2012-05-03 07:49:36

【问题描述】：

我有这个渲染地图的代码。

function initialize() 
    var myOptions = 
      center: new google.maps.LatLng(45.4555729, 9.169236),
      zoom: 13,
      mapTypeId: google.maps.MapTypeId.ROADMAP,

panControl: true,
mapTypeControl: false,
panControlOptions: 
            position: google.maps.ControlPosition.RIGHT_CENTER
        ,
zoomControl: true,
zoomControlOptions: 
    style: google.maps.ZoomControlStyle.LARGE,
    position: google.maps.ControlPosition.RIGHT_CENTER
,
scaleControl: false,
streetViewControl: false,
streetViewControlOptions: 
    position: google.maps.ControlPosition.RIGHT_CENTER
            
        ;
    var map = new google.maps.Map(document.getElementById("mapCanvas"),
        myOptions);



var Item_1 = new google.maps.LatLng(45.5983128 ,8.9172776);

var myPlace = new google.maps.LatLng(45.4555729, 9.169236);

var marker = new google.maps.Marker(
    position: Item_1, 
    map: map);

var marker = new google.maps.Marker(
    position: myPlace, 
    map: map);

var bounds = new google.maps.LatLngBounds(myPlace, Item_1);
map.fitBounds(bounds);

    

即使两点相距 25 公里，我也会得到这个结果：

虽然我想渲染更高级别的缩放。

像这样

我使用方法fitBounds()

    var bounds = new google.maps.LatLngBounds(myPlace, Item_1);
    map.fitBounds(bounds);

感谢您的支持

【参考方案1】：

 var map = new google.maps.Map(document.getElementById("map"),
                mapTypeId: google.maps.MapTypeId.ROADMAP

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

for (i = 0; i < locations.length; i++)
        marker = new google.maps.Marker(
            position: new google.maps.LatLng(locations[i][1], locations[i][2]),
            map: map
        );
bounds.extend(marker.position);

map.fitBounds(bounds);

【讨论】：

对我来说，我必须从 bounds.extend(marker) 更改为 bounds.extend(marker.position)。谢谢

【参考方案2】：

尽管我正在按照上面的建议构建我的 LatLngBounds，但我遇到了与您描述的相同的问题。问题是事情是异步的，在错误的时间调用 map.fitBounds() 可能会给你留下像 Q 一样的结果。 我发现最好的方法是将调用放在空闲处理程序中，如下所示：

google.maps.event.addListenerOnce(map, 'idle', function() 
    map.fitBounds(markerBounds);
);

【讨论】：

谢谢，这对我帮助很大，因为我将地址地理编码到坐标，然后映射到这些坐标，但它不起作用

我遇到了类似的问题，因为在调用fitBounds() 时还没有显示包含的 html，所以显然缩放无法解决。在尝试缩放地图之前确保首先显示地图对我有帮助。

非常感谢，你救了我，这很好用，这个答案对我来说是正确的。

你是救命稻草

【参考方案3】：

出现这种情况是因为LatLngBounds()不以任意两个点为参数，而是以SW和NE点为参数

对空边界对象使用.extend() 方法

var bounds = new google.maps.LatLngBounds();
bounds.extend(myPlace);
bounds.extend(Item_1);
map.fitBounds(bounds);

http://jsfiddle.net/gaby/22qte/的演示

【讨论】：

正确答案。需要将 SW 和 NE 点传递给 extend 方法。但是，一旦地图完全加载，应该调用 fitBounds 方法，如下面的 vanthome 回答： google.maps.event.addListenerOnce(map, 'idle', function() map.fitBounds(markerBounds); );您可能还希望像这样将 padding=0 传递给 fitBounds： map.fitBounds(markerBounds, 0);

【参考方案4】：

LatLngBounds 必须按（西南、东北）顺序定义点。您的积分不是按这个顺序排列的。

一般的解决方法是扩展一个空边界，尤其是如果您不知道这些点肯定会按该顺序排列：

var bounds = new google.maps.LatLngBounds();
bounds.extend(myPlace);
bounds.extend(Item_1);
map.fitBounds(bounds);

API 会整理边界。

【讨论】：

哈！刚刚被打败了。 iPad 键盘无法让快速打字变得容易。