在Google地图中以固定位置显示图片;可见性取决于缩放级别

时间:2010-03-19 15:34:37

标签: javascript google-maps

我在Google地图中有动态地图(API v2)

我想覆盖一个邀请用户进行缩放的图像 image overlay http://img362.imageshack.us/img362/1480/screenshot20100319at121.jpg

当缩放级别大于(例如)10

时,图像消失

知道怎么做到这一点?感谢

1 个答案:

答案 0 :(得分:1)

您可能希望收听zoomend event,如下例所示:

<!DOCTYPE html>
<html> 
<head> 
   <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> 
   <title>Google Maps Zoom Demo</title> 
   <script src="http://maps.google.com/maps?file=api&amp;v=2&amp;sensor=false" 
           type="text/javascript"></script>  
   <style type="text/css">
     #zoom {
        background-color: red;
        width: 75px;
        padding: 5px 5px 5px 5px;
        position: absolute;
        left: 60px;
        top: 90px;
        z-index: 1000;
     }
   </style>
</head> 
<body onunload="GUnload()"> 

   <div id="zoom">Zoom</div>
   <div id="map" style="width: 400px; height: 300px"></div> 

   <script type="text/javascript">     
      var map = new GMap2(document.getElementById("map"));

      map.setUIToDefault();
      map.setCenter(new GLatLng(37.33, -121.89), 8);

      GEvent.addListener(map, "zoomend", function(oldLevel, newLevel) {  
         if (newLevel > 10)
            document.getElementById('zoom').style.display = 'none';
         else 
            document.getElementById('zoom').style.display = 'block';
      });
   </script> 
</body> 
</html>

缩放级别超过10时缩放标签将消失:

alt text http://img532.imageshack.us/img532/6946/gmapzoom.png