Google Map 右键菜单

这几天忙着学习google地图，google地图说简单很简单，说不简单也不简单。这几天也送网上查了很多资料，我怕自己忘记，所以自己记录下载。由于是转载的转来来转去的都不知道作者是谁了！这就冒犯一下了。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<title>GoogleMap右键菜单</title>
<script
    src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=abcdefg&sensor=false"
    type="text/javascript"></script>
<script type="text/javascript">
    var map = null;
    var contextmenu;

    function load() {
        if (GBrowserIsCompatible()) {
            var point;
            map = new GMap2(document.getElementById("map"));

            map.addControl(new GOverviewMapControl());
            map.enableDoubleClickZoom();
            map.enableScrollWheelZoom();
            map.addControl(new GMapTypeControl());
            map.addControl(new GLargeMapControl3D());
            createContextMenu(map);
            var address = '佛山';
            point = new GLatLng(23.021548, 113.121416);
            var marker = new GMarker(point);
            map.setCenter(point, 17);
            map.addOverlay(marker);
            GEvent.addListener(marker, "click", function() {
                marker.openInfoWindowHtml(address);
            });
            marker.openInfoWindowHtml(address);
        }
    }

    function createContextMenu(map) {
        contextmenu = document.createElement("div");
        contextmenu.style.visibility = "hidden";
        contextmenu.style.background = "#ffffff";
        contextmenu.style.border = "1px solid #8888FF";
        contextmenu.innerHTML ="<a href='javascript:zoomIn()'><div class='context'> 放大 </div></a>"
             + "<a href='javascript:zoomOut()'><div class='context'> 缩小 </div></a>"
             + "<a href='javascript:zoomInHere()'><div class='context'> 以此为中心放大 </div></a>"
             + "<a href='javascript:zoomOutHere()'><div class='context'> 以此为中心缩小 </div></a>"
             + "<a href='javascript:centreMapHere()'><div class='context'> 以此居中 </div></a>";
        map.getContainer().appendChild(contextmenu);
        GEvent.addListener(map, "singlerightclick", function(pixel, tile) {
            clickedPixel = pixel;
            var x = pixel.x;
            var y = pixel.y;
            if (x > map.getSize().width - 120) {
                x = map.getSize().width - 120
            }
            if (y > map.getSize().height - 100) {
                y = map.getSize().height - 100
            }
            var pos = new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(x, y));
            pos.apply(contextmenu);
            contextmenu.style.visibility = "visible";
        });
        //点击地图隐藏右键菜单
        GEvent.addListener(map, "click", function() {
            contextmenu.style.visibility = "hidden";
        });
    }
    
         
    function zoomIn() {
        map.zoomIn();
        contextmenu.style.visibility = "hidden";
    }

    function zoomOut() {
        map.zoomOut();
        contextmenu.style.visibility = "hidden";
    }

    function zoomInHere() {
        var point = map.fromContainerPixelToLatLng(clickedPixel)
        map.zoomIn(point, true);
        contextmenu.style.visibility = "hidden";
    }

    function zoomOutHere() {
        var point = map.fromContainerPixelToLatLng(clickedPixel)
        map.setCenter(point, map.getZoom() - 1);
        contextmenu.style.visibility = "hidden";
    }

    function centreMapHere() {
        var point = map.fromContainerPixelToLatLng(clickedPixel)
        map.setCenter(point);
        contextmenu.style.visibility = "hidden";
        }
</script>
</head>
<body onload="load()" onunload="GUnload()"
    style="background-color: Transparent">
<div id="map" style="width: 800px; height: 600px"></div>
</body>
</html>
demo下载
posted @ 2011-03-29 21:26  小彭博客  阅读(1827)  评论(0)  编辑  收藏  举报