要给地图添加右键菜单了，类似于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[0];
/*获取当前鼠标右键按下后的位置，据此定义菜单显示的位置*/
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";
else
menu.style.left = container.scrollLeft + evt.clientX + "px";
if (bottomedge < menu.offsetHeight)
menu.style.top = container.scrollTop + evt.clientY - menu.offsetHeight + "px";
else
menu.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>
分享到：
相关推荐
在IT行业中，自定义右键菜单效果是一种常见的增强用户体验的技术，尤其在网页和桌面应用程序中。这个主题涉及到JavaScript、CSS以及可能的HTML等前端技术。QQ邮箱作为一个知名的在线邮件服务，其用户界面设计通常...
本文将深入探讨如何实现这一功能，并且关注于在SVG（可缩放矢量图形）中自定义右键菜单。 首先，我们要理解为何要禁止鼠标右键。在网页上，鼠标右键通常会弹出一个包含诸如“查看源代码”、“保存图片”等选项的...
本项目聚焦于利用高德地图js-api实现绘制覆盖物，以及自定义右键菜单的功能。 首先，我们来探讨“绘制覆盖物”这一概念。在高德地图API中，覆盖物是指可以在地图上绘制的各种图形，如点、线、面等。在这个项目中，...
vue自定义右键菜单 -vue2版 vue自定义右键菜单 js右键菜单
在Windows操作系统中，自定义右键菜单是一种常见的用户界面自定义方式，允许用户根据个人需求添加或删除在鼠标右键点击时出现的快捷操作选项。然而，有时我们可能会遇到这样的问题：自定义的右键菜单在某些特定环境...
### Vue + Element UI 添加自定义右键菜单的知识点解析 #### 一、概述 本文将详细介绍如何在基于Vue.js框架的项目中结合Element UI库，实现一个简单的自定义右键菜单功能。通过以下步骤，您将了解到从创建绑定事件...
js自定义右键菜单是一款在网页中右击鼠标，弹窗类似windows桌面上鼠标右击效果，空白处点击右键会有相应的内容弹出。 js自定义右键菜单效果图一： 点击查看演示 js自定义右键菜单效果图二：
通过自定义右键菜单，用户可以根据自己的工作习惯添加、删除或重组菜单项，使常用功能更易于访问。 要创建自定义右键菜单，首先我们需要了解Maya中的脚本节点（Script Node）。脚本节点是一种特殊的数据类型，它...
在本文中，我们将深入探讨如何使用ECharts 2.2.7版本实现组织结构图（Tree）以及自定义右键菜单，以帮助你更好地理解和应用这一功能。 首先，组织结构图在ECharts中是一种层次结构数据的展示方式，常用于表示公司、...
在JavaScript（JS）中，自定义右键菜单是一项常见的需求，尤其在开发Web应用程序时，为了提供更加个性化和功能丰富的用户体验。默认情况下，浏览器提供的右键菜单只包含基本的选项，如“复制”、“粘贴”等。通过...
花生米AJAX-UI系列之:基于JQUERY的右键菜单0.1版 可以对表格，列表，"树"，或者单个DOM容器进行右键绑定 菜单项的文字、图标样式，调用方法均可自定义 菜单中分隔符的多少和位置也可自定义 提供了菜单项中那一项被...
在Flex开发中，自定义右键菜单和实现多级右键菜单是一项常见的需求，它能够为用户界面提供更丰富的交互体验。Flex是一个基于ActionScript 3.0的开放源代码框架，用于构建富互联网应用程序（RIA）。下面我们将深入...
以下是使用Vue实现自定义右键菜单的详细步骤： 1. **事件监听**： 在Vue组件的模板中，你需要找到需要添加右键菜单的元素，并绑定`@contextmenu.prevent`事件。这个事件会阻止浏览器默认的右键菜单弹出。例如，在...
标题提到的"flex自定义右键菜单 完全屏蔽"是指在Flex应用程序中，不仅实现对默认右键菜单的完全屏蔽，还允许开发者根据自己的需求创建并应用自定义的右键菜单。这种方法避免了使用JavaScript进行跨域通信来实现屏蔽...
《SpreadJS 自定义右键菜单实现详解》 SpreadJS 是一款功能强大的 HTML5 表格控件，它提供了丰富的功能，使用户能够在浏览器中创建、编辑和显示电子表格。在这个"spreadjs_自定义右键菜单-demo.zip"压缩包中，我们...
在JavaScript（JS）中，自定义右键菜单是一项常见的需求，尤其在网页开发中，它能够为用户提供更个性化的交互体验。本教程将详细介绍如何利用JS实现一个通用且最多支持两级菜单的自定义右键菜单小控件。 首先，我们...
标题中的“Flex4自定义右键菜单源码”意味着这个压缩包包含了实现自定义右键菜单功能的源代码。这对于初学者来说是一份宝贵的学习资源，他们可以通过阅读和理解代码来学习如何在Flex4项目中创建和管理自定义的右键...
在Asp.net2.0开发中，自定义右键菜单控件是一个常见的需求，它可以为用户提供更加便捷的操作体验。这个源码示例提供了一个实现这一功能的方法，适用于各种Web控件，如DataGrid、ListView等。下面将详细介绍如何在Asp...
1.在所编辑的页面，需要添加右键菜单的元素，绑定contextmenu事件，如下： click=handleClickFolder(item) contextmenu.prevent=openMenu($event,item) > ... 2.在页面编写右键菜单内容: <ul v-show=...
在本文中，我们将深入探讨如何在Silverlight应用中自定义右键菜单，即ContextMenu。Silverlight是一种由微软开发的富互联网应用程序（RIA）框架，它提供了丰富的用户界面和交互功能。在默认情况下，Silverlight ...