Google地图之右键菜单

标签: google 地图 右键 | 发表时间:2011-06-04 13:38 | 作者:彪悍人生... ※ABeen※
出处:http://www.cnblogs.com/

JS 代码
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 }
CSS样式
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>

在附上效果图:

作者: 彪悍人生... 发表于 2011-06-04 13:38 原文链接

评论: 0 查看评论 发表评论


最新新闻:
· 创业:竞争与进步(2011-06-04 12:18)
· 英特尔vPro处理器远程控制 云端服务露端倪(2011-06-04 10:36)
· 趋势警告称雅虎微软电子邮件服务也遭受攻击(2011-06-04 10:34)
· Groupon上市值得担心三大理由:IPO时机糟糕(2011-06-04 10:32)
· 传社交游戏开发商Zynga将聘高盛任IPO主承销商(2011-06-04 10:30)

编辑推荐:Java/.Net语言及IDE简易对比

网站导航:博客园首页  我的园子  新闻  闪存  小组  博问  知识库

相关 [google 地图 右键] 推荐:

Google地图之右键菜单

- ※ABeen※ - 博客园-首页原创精华区
this.container = document.createElement("div");// 菜单容器. this.point = null;//右键点击时,相对于地图的坐标. this.map = null;// 地图对象. this.isEnable = true;//是否启用. 89 // 添加一个菜单项(text:菜单项文本,icon:菜单项图标,eve:菜单项单击事件).

这是哪里?Google地图奇景

- babaru - 译言-精品外文翻译 - 最新译作
——Google地图奇景(多图). 用Google地图观察世界,展现在我们面前的是我们这颗行星多姿多彩的壮丽图景以及人类对地球的影响. 考一考您是否能够说出以下每张照片拍摄的地方. (答案及连接在最后一页的页脚提供)这些图片中正北方向并不全在上方,除了一点色彩对比外,这些图片都是Google及其勘测合作方提供的未作任何修改的图片.

Google Earth加入16世纪老地图

- cheng - FeedzShare
来自: 地理时间 - FeedzShare  . 发布时间:2011年04月14日,  已有 3 人推荐. Google Earth加入16世纪老地图. 刚刚看到消息,在Google Earth上现在你可以看到世界一些主要城市的16世纪老地图,包括欧洲主要城市,以及亚非拉一些历史城市,这些是经过重印的一些老地图,目前Google Earth上呈现的还只是一部分.

Google地图加入了天气功能

- 微笑!?~ - Solidot
Google官方博客宣布,Google地图加入了天气功能. Google称,当前天气信息来自weather.com,云层信息由美国海军研究实验室提供. 天气信息是一项很实用的功能,用户可以一目了然的了解到气温,是否有云有雾或有雨. 点击图标则可以了解更详细的信息,包括按小时更新和未来10天预测.

不是谁都能做地图:Google地图背后的故事

- - VooSee - 拮取生活中的彩虹
在每张Google地图的背后,都有一张肉眼不可见的地图,正是这张隐藏地图隐含着真实地理位置的逻辑:哪些地方不能左转,哪些是高速公路匝道,限速要求和实时路况等等. 正是这些数据让Google为你提供导航成为可能. 上周,Google请我去参观这张隐藏地图背后的构建机制,这是Google首次向外界披露这项名为Ground Truth或者GT(地面实况)的计划到底是怎么回事.

Google Maps应用大更新 加入离线地图下载

- jian - cnBeta.COM
Google今天凌晨更新了Android版的Google Maps应用,为大家带来了多项功能更新,其中离线地图模式终于加入了主动选择下载区域地图功能,极大的方便了用户使用.

Google 推出 Hotel Finder,深入拓展地图服务

- 帅 - Engadget 中国版
现在看起来,Google 正在一步一步地吃下出差规划市场. 先是传出了 Google 将要收购运营在线订票业务的 ITA 公司,但似乎收购交易并没有完全进行,然后又涉足航班搜索,现在终于开始瞄准旅馆了. Google 这次推出的 Hotel Finder ,基本可以让你在你想要去的地方 (目前我们看到只有美国的50个州,不知道世界其他地方如何)找到合适的安身之处.

谷奥: 使用 Google Maps API 制作的中国航线地图

- chenhua - 谷奥聚合——谷奥主站+谷安 aggregator
感谢读者 枫虹一刀刘 的投递. 航图网使用 Google Maps API 制作了一个实时显示所有境内航班运行状态的动态地图,包含所有现在飞在天上的国内航班信息,比较遗憾没有国际以及港澳台航班的状态. 由于所有飞机图标都是在实时移动的,所以这个页面对于浏览器的负载相当之高,IE 用户就不要挑战了,Chrome 则表示情绪稳定.

施密特证实苹果Google续签地图合作协议

- HRS - cnBeta.COM
据国外媒体报道,当地时间周二在科技博客网站AllThingsD的D9会议上接受采访时,Google执行董事长埃里克・施密特(Eric Schmidt)表示,该公司刚刚与苹果续签了地图和搜索服务协议.

【 快乐周末】在东京地图上跑出个 Google+

- 黑扣吻猪油 - 谷奥——探寻谷歌的奥秘
Google+只诞生2周就出现了超级粉丝──Joseph Tame,这位英裔日本人足足在东京按照实现计划好的路线跑了21公里,利用GPS追踪到的路线图,人肉画出了一个Google+的logo(上图). Joseph Tame使用的是iPhone上的RunKeeper应用,在得到自己的奔跑路线图后导出到Google Earth里,即可看到美丽的结果.