Document directory
Http://blog.yourtion.com/right-click-geoglobe.html
I have already introduced map world, GeoGlobe, and double-click event. If you are single, install the above method to define a right-click event, you will always see the right-click menu in the browser. I studied the official map of map world, and found that the implementation of its code uses jquery. As shown in the following figure, I wrote a right-click event tutorial for Hulu, hoping to help you.
The principle is still relatively simple. Use jquery and jquery. contextmenu to create a map and right-click the event menu.
The Code is as follows:
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 28 29 30 31 32 33 34 35 36 38 39 40 41 42 43 44 45 46 48 49 50 51 52 53 54 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" > "http://www.w3.org/1999/xhtml" > <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>
<body onload= "initialize()" > <div id= "frist_map" style= "width: 640px; height: 480px ; marging:0 auto;z-index:100;position: absolute; display: block;" ></div> <! -- Right-click the menu source --> <div class = "contextMenu" id= "myMenu2" style= "z-index:1000; position: absolute;" > <ul> <li id= "item_1" > Option 1 </li> <li id= "item_2" > Option 2 </li> <li id= "item_3" > Option 3 </li> <li id= "item_4" > Option 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); } // All html elements whose id is demo2 are bound to this right-click menu $( '#frist_map' ).contextMenu( 'myMenu2' , { // Menu style menuStyle: { border: '2px solid #000' }, // Menu item Style itemStyle: { fontFamily : 'verdana' , backgroundColor : 'green' , color: 'white' , border: 'none' , padding: '1px' }, // Place the menu item cursor over the style itemHoverStyle: { color: 'blue' , backgroundColor: 'red' , border: 'none' }, // Event 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>
|
View the actual results of this example: click here to view the Demo
JS in the Code: Click here to download
Today
- Upload 565 unlock brush SuperCID tutorial and related software download-2010
Map world
Share articles
- Twitter
- Digg
- Facebook
- Delicious
- StumbleUpon
- Google Bookmarks
- LinkedIn
- Yahoo Bookmarks
- Technorati Favorites
|
Print article |
This article was published by Yourtion at AM on July 15, June 21, 2011 in Secondary Development of map. You can subscribe to RSS 2.0 or post comments or reference them to your website. |