之前已经介绍了《天地图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" >
<html xmlns= "http://www.w3.org/1999/xhtml" >
     <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/lib/GeoSurfJSAPI.js" type= "text/javascript" ></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：点此下载

当年今日