谷歌地图 API V3 方法 fitBounds()

IT技术 javascript google-maps google-maps-api-3
2021-03-19 14:18:47

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

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

谢谢你的支持

4个回答

发生这种情况是因为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 点传递给扩展方法。但是，应该在地图完全加载后调用 fitBounds 方法，如下面的 vanthome 答案： google.maps.event.addListenerOnce(map, 'idle', function() { map.fitBounds(markerBounds); }); 您可能还想像这样将 padding=0 传递给 fitBounds： map.fitBounds(markerBounds, 0);
2021-04-24 14:18:47

LatLngBounds必须按（西南，东北）顺序定义点。你的积分不是这个顺序。

一般的修复，特别是如果你不知道点肯定会按这个顺序，是扩展一个空的边界：

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

API 将整理边界。

哈！只是被它打败了。iPad 键盘不会让快速打字变得容易。
2021-05-14 14:18:47

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

google.maps.event.addListenerOnce(map, 'idle', function() {
    map.fitBounds(markerBounds);
});
非常感谢，你救了我，这很好用，这个答案对我的情况是正确的。
2021-05-01 14:18:47
你是救生员
2021-05-07 14:18:47
谢谢，这对我来说是一个巨大的帮助，因为我将地址地理编码到坐标，然后映射到这些坐标，但它不起作用
2021-05-09 14:18:47
由于在调用 时尚未显示包含的 HTML，我遇到了类似的问题fitBounds()，因此显然无法解决缩放问题。在尝试缩放地图之前确保首先显示地图对我有帮助。
2021-05-13 14:18:47 
 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)。谢谢
2021-05-04 14:18:47
其它你可能感兴趣的问题
上一篇与 Redux react？“上下文”问题呢？ 下一篇什么是 HTML 中的视口。