Show an image in a fixed position in Google Maps; visibility depends on the zoom level
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&v=2&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
加载中,请稍侯......
精彩评论