Javascript 谷歌地图:如何防止 InfoWindow 移动地图
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/2488999/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Google Maps: How to prevent InfoWindow from shifting the map
提问by TeddyN
Using Google Maps API v3.
使用谷歌地图 API v3。
I noticed that if I have a map marker near the edge of my map border ... that if I click the marker icon so that the InfoWindow will display, my entire map shifts so that the markers InfoWindow is centered.
我注意到,如果我的地图边框边缘附近有一个地图标记……如果我单击标记图标以便显示 InfoWindow,我的整个地图都会移动,以便标记 InfoWindow 居中。
I don't want my map to shift.
我不希望我的地图移动。
Question: How do I prevent the map from shifting when InfoWindows are near the end of the map border (which causes the InfoWindow by default to center & shift the map)?
问题:当 InfoWindows 接近地图边界的末端(这会导致 InfoWindow 默认居中并移动地图)时,如何防止地图移动?
回答by Daniel Vassallo
Since you are using v3, you can simply prevent the infoWindow from shifting the map with the disableAutoPanoption, as in the following example (API Reference):
由于您使用的是 v3,您可以简单地使用disableAutoPan选项阻止 infoWindow 移动地图,如下例所示(API 参考):
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"/>
<title>Google Maps disableAutoPan Demo</title>
<script src="http://maps.google.com/maps/api/js?sensor=false"
type="text/javascript"></script>
</head>
<body>
<div id="map" style="width: 200px; height: 200px"></div>
<script type="text/javascript">
var myLatlng = new google.maps.LatLng(37.44, -122.14);
var myOptions = {
zoom: 4,
center: myLatlng,
mapTypeId: google.maps.MapTypeId.ROADMAP
}
var map = new google.maps.Map(document.getElementById("map"), myOptions);
var infowindow = new google.maps.InfoWindow({
content: 'Test',
disableAutoPan: true
});
var marker = new google.maps.Marker({
position: myLatlng,
map: map,
title: 'Test Marker'
});
google.maps.event.addListener(marker, 'click', function() {
infowindow.open(map, marker);
});
</script>
</body>
</html>
Screenshot:
截屏:


回答by Siddharth Agrawal
There is a property called [disableAutoPan] of agm-marker-info, making it false will not shift your map InfoWindows which are located near the edge of map border.
agm-marker-info 有一个名为 [disableAutoPan] 的属性,设置为 false 不会移动位于地图边界边缘附近的地图 InfoWindows。
<agm-marker-info [disableAutoPan]="false">
<b> Marker Info: "A" </b>
</agm-marker-info>

