Google地图之右键菜单

  1 function hasClass(target, name) {
  2     return target.className.match(new RegExp('(\\s|^)' + name + '(\\s|$)'));
  3 }
  4 
  5 function removeClass(target, name) {
  6     if (hasClass(target, name)) {
  7         target.className = target.className.replace(new RegExp('(\\s|^)' + name + '(\\s|$)'), ' ');
  8     }
  9 }
 10 
 11 function addClass(target, name) {
 12     if (!hasClass(target, name)) {
 13         target.className += " " + name;
 14     }
 15 }
 16 
 17 function MenuControl() {
 18     this.container = document.createElement("div");// 菜单容器
 19     this.point = null;//右键点击时，相对于地图的坐标
 20     this.map = null;// 地图对象
 21     this.isEnable = true;//是否启用
 22 }
 23 
 24 MenuControl.prototype = new GControl();
 25 
 26 MenuControl.prototype.initialize = function(map) {
 27     this.map = map;
 28     this.container.className = "menu_casing";
 29 
 30     map.getContainer().appendChild(this.container);
 31 
 32     this.hide();
 33     var self = this;
 34     
 35     // 监听地图的右击事件
 36     GEvent.addListener(map, "singlerightclick", function(p, src) {
 37         if (self.isEnable) {
 38             self.point = p;
 39             self.container.style.left = p.x + "px";
 40             self.container.style.top = p.y + "px";
 41             self.show();
 42         }
 43     });
 44     
 45     GEvent.addListener(map, "click", function() {
 46         self.hide();
 47     });
 48     GEvent.addListener(map, "movestart", function() {
 49         self.hide();
 50     });
 51     GEvent.addListener(map, "zoomend", function() {
 52         self.hide();
 53     });
 54     GEvent.addListener(map, "clearoverlays", function() {
 55         self.hide();
 56     });
 57     return this.container;
 58 }
 59 
 60 MenuControl.prototype.getDefaultPosition = function() {
 61     return new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(7, 7));
 62 }
 63 
 64 // 显示的方法
 65 MenuControl.prototype.show = function() {
 66     this.container.style.display = "block";
 67 }
 68 
 69 // 隐藏
 70 MenuControl.prototype.hide = function() {
 71     this.container.style.display = "none";
 72 }
 73 
 74 // 启用(默认)
 75 MenuControl.prototype.enable = function() {
 76     this.isEnable = true;
 77 }
 78 
 79 // 禁用
 80 MenuControl.prototype.disable = function() {
 81     this.isEnable = false;
 82 }
 83 
 84 // 获取菜单状态
 85 MenuControl.prototype.isHide = function() {
 86     return (this.container.style.display == "none");
 87 }
 88 
 89 // 添加一个菜单项(text:菜单项文本，icon:菜单项图标，eve:菜单项单击事件)
 90 MenuControl.prototype.addItem = function(text, icon, eve) {
 91     var item = document.createElement("div");
 92     item.className = "menu_item";
 93     var menu_text = document.createElement("div");
 94     menu_text.className = "menu_text";
 95     var text_lable = document.createElement("span");
 96     text_lable.innerHTML = text;
 97     menu_text.appendChild(text_lable);
 98     item.appendChild(menu_text);
 99     if (icon) {
100         var item_icon = document.createElement("div");
101         item_icon.className = "menu_icon";
102         item_icon.style.backgroundImage = "url(" + icon + ")";
103         item.appendChild(item_icon);
104     }
105     if (typeof eve == "function") {
106         var self = this;
107         GEvent.addDomListener(item, "click", function() {
108             eve(self.point, self.map.fromContainerPixelToLatLng(self.point));
109             self.hide();
110         });
111     }
112     GEvent.addDomListener(item, "mouseover", function() {
113         addClass(item, "item_active");
114     });
115     GEvent.addDomListener(item, "mouseout", function() {
116         removeClass(item, "item_active");
117     });
118     this.container.appendChild(item);
119 }
120 
121 // 添加一个菜单项之间的分隔符
122 MenuControl.prototype.addSeparator = function() {
123     var separator = document.createElement("div");
124     separator.className = "menu_separator";
125     this.container.appendChild(separator);
126 }

1 .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;}
2 .menu_casing .menu_item{border: none;cursor: pointer;font-size: 12px;height: 22px;line-height: 22px;margin: 0;overflow: hidden;padding: 0;position: relative;}
3 .menu_casing .menu_item .menu_text{left: 28px;position: absolute;top: 0;}
4 .menu_casing .menu_item.item_active{background: #FAFAFA;border: 1px solid #7EABCD;height: 20px;line-height: 20px;border-radius: 3px 3px 3px 3px;}
5 .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}
6 .menu_casing .menu_icon{ height: 16px;left: 2px;position: absolute;top: 3px; width: 16px; background-repeat:no-repeat;}

 1 <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="map.aspx.cs" Inherits="PyShop.Shop.kindeditor.plugins.map.map" %>
 2 
 3 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 4 
 5 <html xmlns="http://www.w3.org/1999/xhtml" >
 6 <head runat="server">
 7     <title></title>
 8     <link rel="Stylesheet" href="map/google/menu.css" type="text/css" />
 9     <script src="http://ditu.google.cn/maps?file=api&amp;v=2&amp;key=ABQIAAAAMQysrQ5A-qV96Wbq7i6X2hRnEkGGtismBAzktTYrwQSQFRw8uxTOkVseanhqZ-hzLXinziAhrA01DA&sensor=true"type="text/javascript"></script>
10     <script type="text/javascript" src="map/google/menu.js" charset="utf-8"></script>
11     <style type="text/css">
12         body{ background:#F0F0EE;}
13         #map{ width:640px; height:450px;}
14         p{ text-align:right; font-size:12px; color:Red; padding:0; margin:0 0 10px 0;;}
15     </style>
16 </head>
17 <body onload="initialize();">
18     <form id="MainForm" runat="server">
19         <p>鼠标右键点击地图，可打开功能菜单。</p>
20         <div id="map"></div>
21     </form>
22     <script type="text/javascript">
23         var map;
24         var markers = new Array();
25         function initialize() {
26             if (GBrowserIsCompatible()) {
27                 map = new GMap2(document.getElementById("map"));
28                 var coordinate = new GLatLng(23.129163, 113.264435);
29                 map.setCenter(coordinate, 13);
30                 map.setMapType(G_NORMAL_MAP);
31                 map.enableScrollWheelZoom();
32                 map.disableDoubleClickZoom();
33                 map.addControl(new GLargeMapControl(), new GControlPosition(G_ANCHOR_TOP_LEFT, new GSize(10, 20)));
34                 map.addControl(new GScaleControl());
35                 map.addControl(new GOverviewMapControl());
36                 
37                 // 构建右键菜单对象
38                 var menu = new MenuControl();
39                 // 添加菜单项
40                 menu.addItem("添加标记", "map/google/images/marker2.png", function(point, coor) {
41                     if (markers.length >= 5) {
42                         alert("最多能添加5个标记！");
43                     } else {
44                         var index = markers.length;
45                         markers[index] = new GMarker(coor, { draggable: true });
46                         map.addOverlay(markers[index]);
47                     }
48                 });
49                 menu.addItem("清除标记", false, function() {
50                     map.clearOverlays();
51                     markers = new Array();
52                 });
53                 menu.addSeparator();
54                 menu.addItem("放大一级", "map/google/images/zoomin.png", function() {
55                     map.zoomIn();
56                 });
57                 menu.addItem("缩小一级", "map/google/images/zoomout.png", function() {
58                     map.zoomOut();
59                 });
60                 map.addControl(menu);
61             }
62         }
63     </script>
64 </body>
65 </html>