google Map api V3 右键添加菜单问题
最近研究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 }); }<!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" 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 /> 你这有BUG
这两句在3.8版本里会使地图放大后无法拖动。
var mapOverlay = new google.maps.OverlayView();
mapOverlay.setMap(map);
var p = mapOverlay.getProjection().fromLatLngToContainerPixel(
event.latLng);
这句可改成
var p = map.getProjection().fromLatLngToContainerPixel(event.latLng);
我错了，var p = mapOverlay.getProjection().fromLatLngToContainerPixel(
event.latLng);
改成
var p = map.getProjection().fromLatLngToContainerPixel(event.latLng);
右键弹不出来了。。。