谷歌地图:如何防止 InfoWindow 移动地图 [英] Google Maps: How to prevent InfoWindow from shifting the map

查看:27
本文介绍了谷歌地图:如何防止 InfoWindow 移动地图的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

使用 Google Maps API v3.

Using Google Maps 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.

我不希望我的地图移动.

I don't want my map to shift.

问题:当 InfoWindows 接近地图边界的末端时(这会导致 InfoWindow 默认居中并移动地图),我如何防止地图移动?

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

推荐答案

由于您使用的是 v3,您可以简单地使用 disableAutoPan 选项阻止 infoWindow 移动地图,如下例所示(API 参考):

Since you are using v3, you can simply prevent the infoWindow from shifting the map with the disableAutoPan option, as in the following example (API Reference):

<!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>

截图:

这篇关于谷歌地图:如何防止 InfoWindow 移动地图的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆