Show an image in a fixed position in Google Maps; visibility depends on the zoom level_问答_开发者

Show an image in a fixed position in Google Maps; visibility depends on the zoom level

开发者 https://www.devze.com 2022-12-24 01:08 出处：网络

I have a dynamic map in Google Maps (API v2) I want to overlay an image inviting the user to zoom image overlay http://img362.imageshack.us/img362/1480/screenshot20100319at121.jpg

I have a dynamic map in Google Maps (API v2)

I want to overlay an image inviting the user to zoom image overlay http://img362.imageshack.us/img362/1480/screenshot20100319at121.jpg

The image disappears when开发者_高级运维 the zoom level is greater than (say) 10

Any idea how to achieve this? Thanks

You may want to listen to the zoomend event, as in the following example:

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

The zoom label would disappear once the zoom level exceeds 10:

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