google Map api V3 右键添加菜单问题

本文介绍如何使用Google Maps API V3在地图上实现右键菜单功能,并兼容主题样式。通过创建OverlayView对象并监听右键点击事件,利用jQuery easyUI组件展示菜单。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近研究google Map api V3 被右键添加菜单困扰
1、目前网络上的大多数是基于V2版本的开发文档
2、添加的菜单样式不与主题样式有出入需要兼容主题框架样式

经过试验V3版本 兼容jQuery easyUI 的菜单简单DEMO如下

var map;
function initialize() {
var myOptions = {
zoom : 8,
center : new google.maps.LatLng(-34.397, 150.644),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
var mapOverlay = new google.maps.OverlayView();
mapOverlay.setMap(map);
google.maps.event.addListener(map, 'rightclick', function(event) {
var currentLatLng = event.latLng;
var p = mapOverlay.getProjection().fromLatLngToContainerPixel(
event.latLng);
var x = p.x;
var y = p.y;
showMenu(x, y);
});
}

google.maps.event.addDomListener(window, 'load', initialize);

function showMenu(x,y){
$('#mm').menu('show', {
left: x,
top: y
});
}


原理就是OverlayView对象获取X,Y的像素值
然后采用jQuery easyUI 渲染菜单

若是有自己定制菜单的愿望可以在获取X,Y后自行扩展

全局代码如下 jQuery easyUI 样式和js文件请自行导入
<!DOCTYPE html>
<html>
<head>
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<meta charset="UTF-8">
<style type="text/css">
html,body,#map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>


<link rel="stylesheet" type="text/css" href="easyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="easyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="easyui/demo.css">
<script type="text/javascript" language="javascript" src="easyui/jquery-1.7.1.min.js"></script>
<script type="text/javascript" language="javascript" src="easyui/jquery.easyui.min.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>
<script type="text/javascript">
var map;
function initialize() {
var myOptions = {
zoom : 8,
center : new google.maps.LatLng(-34.397, 150.644),
mapTypeId : google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
myOptions);
var mapOverlay = new google.maps.OverlayView();
mapOverlay.setMap(map);
google.maps.event.addListener(map, 'rightclick', function(event) {
var currentLatLng = event.latLng;
var p = mapOverlay.getProjection().fromLatLngToContainerPixel(
event.latLng);
var x = p.x;
var y = p.y;
showMenu(x, y);
});
}

google.maps.event.addDomListener(window, 'load', initialize);

function showMenu(x,y){
$('#mm').menu('show', {
left: x,
top: y
});
}
</script>
</head>
<body>
<div id="map_canvas"></div>
<div id="mm" class="easyui-menu" style="width: 120px;">
<div onclick=javascript:alert('new');>
New
</div>
<div>
<span>Open</span>
<div style="width: 150px;">
<div>
<b>Word</b>
</div>
<div>
Excel
</div>
<div>
PowerPoint
</div>
<div>
<span>M1</span>
<div style="width: 120px;">
<div>
sub1
</div>
<div>
sub2
</div>
<div>
<span>Sub</span>
<div style="width: 80px;">
<div onclick=javascript:alert('sub21');
>
sub21
</div>
<div>
sub22
</div>
<div>
sub23
</div>
</div>
</div>
<div>
sub3
</div>
</div>
</div>
<div>
<span>Window Demos</span>
<div style="width: 120px;">
<div href="window.html">
Window
</div>
<div href="dialog.html">
Dialog
</div>
<div>
[url=http://www.jeasyui.com]EasyUI[/url]
</div>
</div>
</div>
</div>
</div>
<div iconCls="icon-save">
Save
</div>
<div class="menu-sep"></div>
<div>
Exit
</div>
</div>
</body>
</html>
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值