http://blog.yourtion.com/right-click-geoglobe.html
之前已经介绍了《天地图GeoGlobe添加单击事件》和《天地图GeoGlobe重写双击事件》，单身你安装上述方法去定义右击事件的话，你就会一直看到浏览器弹出的右键菜单。研究了天地图官方的地图，发现它代码的实现是使用jquery的。所以按图索骥，依样画葫芦的写了个右击事件的教程，希望对你有帮助。
原理还是比较简单，利用jquery和jquery.contextmenu创建地图右击事件菜单。
代码如下：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
|
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script src="jquery-1.4.4.min.js"></script>
<script src="jquery.contextmenu.r2.packed.js"></script>
<script src="http://www.tianditu.com/guide/2d_samples/sampleCfg.js" type="text/javascript"></script>
</head>
<body onload="initialize()">
<div id="frist_map" style="width: 640px; height: 480px ; marging:0 auto;z-index:100;position: absolute; display: block;"></div>
<hr /> <!--右键菜单的源-->
<div class="contextMenu" id="myMenu2" style="z-index:1000; position: absolute;">
<ul>
<li id="item_1">选项一</li>
<li id="item_2">选项二</li>
<li id="item_3">选项三</li>
<li id="item_4">选项四</li>
</ul>
</div>
<script type="text/javascript">
function initialize() {
var map = new GeoSurf.PortalMap("frist_map");
map.loadLayerGroup(imageGroup);
map.setCenter(new GeoSurf.LonLat(116.12371, 24.33058), 14);
}
//所有html元素id为demo2的绑定此右键菜单
$('#frist_map').contextMenu('myMenu2', {
//菜单样式
menuStyle: {
border: '2px solid #000' },
//菜单项样式
itemStyle: {
fontFamily : 'verdana',
backgroundColor : 'green',
color: 'white',
border: 'none',
padding: '1px' },
//菜单项鼠标放在上面样式
itemHoverStyle: {
color: 'blue',
backgroundColor: 'red',
border: 'none' },
//事件
bindings:
{
'item_1': function(t) {
alert('Trigger was '+t.id+'\nAction was item_1');
},
'item_2': function(t) {
alert('Trigger was '+t.id+'\nAction was item_2');
},
'item_3': function(t) {
alert('Trigger was '+t.id+'\nAction was item_3');
},
'item_4': function(t) {
alert('Trigger was '+t.id+'\nAction was item_4');
}
}
});
</script>
</body>
</html> |
查看此示例的实际效果：点击这里看Demo
代码中的JS：点此下载
当年今日
- 多普达565解锁刷机SuperCID教程及相关软件下载 - 2010
| 打印文章 | 这篇文章由Yourtion于2011 年 06 月 21 日 上午 8:30发表在天地图二次开发。你可以订阅RSS 2.0 也可以发表评论或引用到你的网站。 |