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>