Google地图之右键菜单
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&v=2&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简易对比
网站导航：博客园首页 我的园子 新闻 闪存 小组 博问 知识库