Google地图之右键菜单

function hasClass(target, name) {
    return target.className.match(new RegExp('(\\s|^)' + name + '(\\s|$)'));
}

 function removeClass(target, name) {
    if (hasClass(target, name)) {
        target.className = target.className.replace(new RegExp('(\\s|^)' + name + '(\\s|$)'), ' ');
    }
}

 function addClass(target, name) {
    if (!hasClass(target, name)) {
        target.className += " " + name;
    }
}

 function MenuControl() {
    this.container = document.createElement("div");// 菜单容器
     this.point = null;//右键点击时，相对于地图的坐标
     this.map = null;// 地图对象
     this.isEnable = true;//是否启用
}

MenuControl.prototype = new GControl();

MenuControl.prototype.initialize = function(map) {
    this.map = map;
    this.container.className = "menu_casing";

    map.getContainer().appendChild(this.container);

    this.hide();
    var self = this;
    
    // 监听地图的右击事件
    GEvent.addListener(map, "singlerightclick", function(p, src) {
        if (self.isEnable) {
            self.point = p;
            self.container.style.left = p.x + "px";
            self.container.style.top = p.y + "px";
            self.show();
        }
    });
    
    GEvent.addListener(map, "click", function() {
        self.hide();
    });
    GEvent.addListener(map, "movestart", function() {
        self.hide();
    });
    GEvent.addListener(map, "zoomend", function() {
        self.hide();
    });
    GEvent.addListener(map, "clearoverlays", function() {
        self.hide();
    });
    return this.container;
}

MenuControl.prototype.getDefaultPosition = function() {
    return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
}

// 显示的方法
MenuControl.prototype.show = function() {
    this.container.style.display = "block";
}

// 隐藏
MenuControl.prototype.hide = function() {
    this.container.style.display = "none";
}

// 启用(默认)
MenuControl.prototype.enable = function() {
    this.isEnable = true;
}

// 禁用
MenuControl.prototype.disable = function() {
    this.isEnable = false;
}

// 获取菜单状态
MenuControl.prototype.isHide = function() {
    return (this.container.style.display == "none");
}

// 添加一个菜单项(text:菜单项文本，icon:菜单项图标，eve:菜单项单击事件)
MenuControl.prototype.addItem = function(text, icon, eve) {
    var item = document.createElement("div");
    item.className = "menu_item";
    var menu_text = document.createElement("div");
    menu_text.className = "menu_text";
    var text_lable = document.createElement("span");
    text_lable.innerHTML = text;
    menu_text.appendChild(text_lable);
    item.appendChild(menu_text);
    if (icon) {
        var item_icon = document.createElement("div");
        item_icon.className = "menu_icon";
        item_icon.style.backgroundImage = "url(" + icon + ")";
        item.appendChild(item_icon);
    }
    if (typeof eve == "function") {
        var self = this;
        GEvent.addDomListener(item, "click", function() {
            eve(self.point, self.map.fromContainerPixelToLatLng(self.point));
            self.hide();
        });
    }
    GEvent.addDomListener(item, "mouseover", function() {
        addClass(item, "item_active");
    });
    GEvent.addDomListener(item, "mouseout", function() {
        removeClass(item, "item_active");
    });
    this.container.appendChild(item);
}

// 添加一个菜单项之间的分隔符
MenuControl.prototype.addSeparator = function() {
    var separator = document.createElement("div");
    separator.className = "menu_separator";
    this.container.appendChild(separator);
}

.menu_casing{background: url(images/menu.gif) repeat-y scroll 0 0 #F0F0F0;border: 1px solid #CCCCCC;margin: 0;overflow: hidden;padding: 2px; width:120px;}
.menu_casing .menu_item{border: none;cursor: pointer;font-size: 12px;height: 22px;line-height: 22px;margin: 0;overflow: hidden;padding: 0;position: relative;}
.menu_casing .menu_item .menu_text{left: 28px;position: absolute;top: 0;}
.menu_casing .menu_item.item_active{background: #FAFAFA;border: 1px solid #7EABCD;height: 20px;line-height: 20px;border-radius: 3px 3px 3px 3px;}
.menu_casing .menu_separator{background: url(images/menu_sep.png) repeat-x; height:2px;font-size:2px; line-height: 2px;margin:3px 0 3px 24px}
.menu_casing .menu_icon{ height: 16px;left: 2px;position: absolute;top: 3px; width: 16px; background-repeat:no-repeat;}

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="map.aspx.cs" Inherits="PyShop.Shop.kindeditor.plugins.map.map" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title></title>
    <link rel="Stylesheet" href="map/google/menu.css" type="text/css" />
    <script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=ABQIAAAAMQysrQ5A-qV96Wbq7i6X2hRnEkGGtismBAzktTYrwQSQFRw8uxTOkVseanhqZ-hzLXinziAhrA01DA&sensor=true"type="text/javascript"></script>
    <script type="text/javascript" src="map/google/menu.js" charset="utf-8"></script>
    <style type="text/css">
        body{ background:#F0F0EE;}
        #map{ width:640px; height:450px;}
        p{ text-align:right; font-size:12px; color:Red; padding:0; margin:0 0 10px 0;;}
    </style>
</head>
<body onload="initialize();">
    <form id="MainForm" runat="server">
        <p>鼠标右键点击地图，可打开功能菜单。</p>
        <div id="map"></div>
    </form>
    <script type="text/javascript">
        var map;
        var markers = new Array();
        function initialize() {
            if (GBrowserIsCompatible()) {
                map = new GMap2(document.getElementById("map"));
                var coordinate = new GLatLng(23.129163, 113.264435);
                map.setCenter(coordinate, 13);
                map.setMapType(G_NORMAL_MAP);
                map.enableScrollWheelZoom();
                
                // 监听右击事件一定要禁用双击缩放地图的功能
                map.disableDoubleClickZoom();
                map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10, 20)));
                map.addControl(new GScaleControl());
                map.addControl(new GOverviewMapControl());
                
                // 构建右键菜单对象
                var menu = new MenuControl();
                // 添加菜单项
                menu.addItem("添加标记", "map/google/images/marker2.png", function(point, coor) {
                    if (markers.length >= 5) {
                        alert("最多能添加5个标记！");
                    } else {
                        var index = markers.length;
                        markers[index] = new GMarker(coor, { draggable: true });
                        map.addOverlay(markers[index]);
                    }
                });
                menu.addItem("清除标记", false, function() {
                    map.clearOverlays();
                    markers = new Array();
                });
                menu.addSeparator();
                menu.addItem("放大一级", "map/google/images/zoomin.png", function() {
                    map.zoomIn();
                });
                menu.addItem("缩小一级", "map/google/images/zoomout.png", function() {
                    map.zoomOut();
                });
                map.addControl(menu);
            }
        }
    </script>
</body>
</html>

其实百度地图跟Google地图差不多，要改成百度地图只要该几个类名和方法名就完事了...

再附上效果图：