自定义右键菜单
要给地图添加右键菜单了，类似于google的。先做个demo。<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html><head> <title>右键菜单.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=gbk"> <script src="http://api.51ditu.com/js/ajax.js"></script><style type="text/css">#container {text-align : center;width : 600px;height : 500px;border : 1px solid blue;margin : 0 auto;}.skin {width : 100px;border : 1px solid gray;padding : 2px;visibility : hidden;position : absolute;}div.menuitems {margin : 1px 0;}div.menuitems a {text-decoration : none;}div.menuitems:hover {background-color : #c0c0c0;}</style><script>window.onload = function() {var container = document.getElementById('container');var menu = document.getElementById('menu');/*显示菜单*/function showMenu() {var evt = window.event || arguments;/*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/var rightedge = container.clientWidth-evt.clientX;var bottomedge = container.clientHeight-evt.clientY;if (rightedge < menu.offsetWidth) menu.style.left = container.scrollLeft + evt.clientX - menu.offsetWidth + "px";elsemenu.style.left = container.scrollLeft + evt.clientX + "px";if (bottomedge < menu.offsetHeight)menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px";elsemenu.style.top = container.scrollTop + evt.clientY + "px";/*设置菜单可见*/menu.style.visibility = "visible";LTEvent.addListener(menu,"contextmenu",LTEvent.cancelBubble);}/*隐藏菜单*/function hideMenu() {menu.style.visibility = 'hidden';}LTEvent.addListener(container,"contextmenu",LTEvent.cancelBubble);LTEvent.addListener(container,"contextmenu",showMenu);LTEvent.addListener(document,"click",hideMenu);}</script></head> <body><div id="menu" class="skin"><div class="menuitems"><a href="javascript:history.back();">后退</a></div><div class="menuitems"><a href="javascript:history.back();">前进</a></div><hr><div class="menuitems"><a href="http://api.51ditu.com/" target="_blank">地图api</a></div><div class="menuitems"><a href="http://www.51ditu.com/traffic/index.html" target="_blank">实时交通</a></div><div class="menuitems"><a href="http://www.51ditu.com" target="_blank">地图搜索</a></div><div class="menuitems"><a href="http://nav.51ditu.com" target="_blank">驾驶导航</a></div><hr><div class="menuitems"><a href="http://uu.51ditu.com" target="_blank">灵图UU</a></div><div class="menuitems"><a href="http://lushu.51ditu.com" target="_blank">路书下载</a></div><hr><div class="menuitems"><a href="http://www.lingtu.com" target="_blank">关于本站</a></div><div class="menuitems"><a href="http://emap.51ditu.com/link/link.html" target="_bland">友情链接</a></div></div><div id="container"><p>右键此区域</p></div></body></html>
页:
[1]