Карты Google: как предотвратить смещение карты InfoWindow - PullRequest
26 голосов
/ 22 марта 2010

Использование API Карт Google v3.

Я заметил, что если у меня есть маркер карты рядом с краем границы моей карты ... что если я нажму значок маркера, чтобы отобразилось информационное окно, вся моя карта сместится так, что маркеры InfoWindow центрированы.

Я не хочу, чтобы моя карта сдвигалась.

Вопрос : Как предотвратить смещение карты, когда InfoWindows находятся в конце границы карты (что приводит к тому, что InfoWindow по умолчанию центрирует и смещает карту)?

Ответы [ 2 ]

50 голосов
/ 22 марта 2010

Поскольку вы используете v3, вы можете просто запретить переносу информационного окна карту с помощью опции disableAutoPan, как в следующем примере ( Справочник по 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>

Скриншот:

disableAutoPan

0 голосов
/ 09 ноября 2018

Существует свойство [disableAutoPan] для agm-marker-info, поэтому его значение не будет сдвигать инфо-окна вашей карты, расположенные у края границы карты.

<agm-marker-info [disableAutoPan]="false">
    <b> Marker Info: "A" </b>
</agm-marker-info>
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...