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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 00:36:54  来源:igfitidea点击:

Google Maps: How to prevent InfoWindow from shifting the map

javascriptgoogle-mapsgoogle-maps-api-3

提问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:

截屏:

disableAutoPan

禁用自动平移

回答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>