之前已经介绍了《天地图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：点此下载

当年今日