最近研究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>
分享到:
相关推荐
谷歌升级后的地图demo,不包含密钥的开发。仅供借鉴
Google Map api V3 (3.9.12)的离线开发包
谷歌地图Google Map API中文开发文档 V3
谷歌地图api v3 学习文档,资料查询, 基础学习。
谷歌地图google map api v3 ExtDraggableObject可拖拽对象类
实现了地图map的右键菜单和marker的右键菜单,这是参考别人的代码,大家可以在次基础上做些修改,感谢原创。
GoogleMaps API V3离线下载工具及使用.zip 主要对其地图的下载,及自我编制。 离线下完全可以使用,只需先进行地图的下载。 添加了控件,离线下可进行操作。。。
谷歌地图,右键弹出菜单功能,实现了地图map的右键菜单和marker的右键菜单,这是参考别人的代码,大家可以在次基础上做一些修改,实现类似的功能
扩展openalayers 自定义右键菜单开发,样式可以自行覆盖调整
使用高德地图js-api实现绘制圆形、矩形、多边形;右键可删除可自定义菜单;
谷歌MAP_V3中文详解以及一个简单例子
Google Map API 使用示例
针对Google Map最新的API Version3,本文讲解怎么使用JavaScript调用该API,实现在网页中的使用地图的诸多功能。更多细节参考:http://blog.sina.com.cn/s/articlelist_1289503967_4_1.html
Google Map API V3 离线开发文档(与Google官网一模一样,经编辑后离线也能照样查看,速度提升一个等级) PS:文件不能重命名,而原因想必你懂的!
google map api 实现自定义mark和其移动
详尽的介绍了google map api 并简单的举了几个例子,能帮助你了解Google map 编程
GoogleMap中文教程,包含V3版本中文API,不过是通过翻译出来的,不过作为平时上不了网的脱机资源还是可以看看的。
废话不多说了,直接给大家贴代码了。...//右键单击map出现右键菜单事件 } }); //右键单击map出现右键菜单事件 function RightClick(){ //alert('你点击的是地图'); var createMarker = function
谷歌MAP API 第三版 离线查看,pdf格式,方便查阅,下完记得评论,可以返积分
google map api 参考文档google map api 参考文档google map api 参考文档google map api 参考文档google map api 参考文档google map api 参考文档