Google Map API V3 (四) 地图右键菜单
区别于浏览器中鼠标定位方式，要在地图中定位鼠标位置并将右键弹出的图层定位到页面中
不过问题是google地图在定位的时候有偏差值，所以在使用的时候减去了偏差值
<!DOCTYPE html><html><head><meta name="viewport" content="initial-scale=1.0, user-scalable=no" /><meta http-equiv="Content-Type" content="text/html;charset=utf-8" /><title>Google 地图 右键使用</title><style>html,body{height:100%;margin:0;padding:0;}.left{width:20%;float:left;height:100%;overflow-y:scroll;overflow-x:hidden;}#map_canvas{height:100%;width:80%;float:left;}@media print{html,body{height:auto;}#map_canvas{height:600px;}}</style><script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script><script type="text/javascript">var $G,$O,$M,$L;(function(undefined){O = function (id) {return "string" == typeof id ? document.getElementById(id):id;};MP = {y:39.9126328872148,x:116.44053633792112,point:function(y,x){return new google.maps.LatLng(y,x);},getCanvas:function(id){var mapid = id?id:'map_canvas';return document.getElementById(mapid);},options:function(center,z){return {zoom: z?z:14,center: center?center:this.getCenter(),navigationControl: true,scaleControl: true,streetViewControl: true,mapTypeId: google.maps.MapTypeId.ROADMAP}},}M = {mark:function(map,latLng,title){if(title)return new google.maps.Marker({icon: this.icon,position: latLng,map: map,title:title});else return new google.maps.Marker({//icon: this.icon,position: latLng,map: map});}}//event 事件L = {listen:null,add:function(dom,event,fn){return google.maps.event.addDomListener(dom, event, fn);}}$G = MP;$O = O;$M = M;$L = L;})();var map;function initialize(){var point = $G.point($G.y,$G.x);//初始中心点map = new google.maps.Map($G.getCanvas("map_canvas"), $G.options(point,15));//初始化地图var mark = $M.mark(map,point,"来吧英雄,捣乱最佳地点");//初始化右键菜单，在初始化地图中一并初始化了。var ContextMenuControlDiv = document.createElement('DIV');var ContextMenuControl = new createContextMenu(ContextMenuControlDiv, map);ContextMenuControlDiv.index = 1;/*增加层的方式*/map.controls[google.maps.ControlPosition.TOP_LEFT].push(ContextMenuControlDiv);}/*创建右键菜单*/function createContextMenu(controlUI,map) {contextmenu = document.createElement("div");contextmenu.style.display = "none";contextmenu.style.background = "#ffffff";contextmenu.style.border = "1px solid #8888FF";contextmenu.innerHTML = "<a href='javascript:'><div class='context'> 放大 </div></a>"+ "<a href='javascript:'><div class='context'> 缩小 </div></a>"+ "<a href='javascript:'><div class='context'> 以此为中心放大 </div></a>"+ "<a href='javascript:'><div class='context'> 以此为中心缩小 </div></a>"+ "<a href='javascript:'><div class='context'> 以此居中 </div></a>";controlUI.appendChild(contextmenu);/*给整个地图增加右键事件监听*/$L.add(map, 'rightclick', function (event) {// 起始 方法详细内容$O("info").innerText = event.latLng.lat()+"\n"+event.latLng.lng();var ss = "\n\n";for(var e in event.pixel)ss = ss+ e+":"+event.pixel[e]+"\n";$O("info").innerText = $O("info").innerText+ ss;//结束 方法详细内容contextmenu.style.position="relative";contextmenu.style.left=(event.pixel.x-80)+"px";//平移显示以对应右键点击坐标contextmenu.style.top=event.pixel.y+"px";contextmenu.style.display = "block";});/*点击菜单层中的某一个菜单项，就隐藏菜单*/$L.add(controlUI, 'click', function () {contextmenu.style.display = "none";});$L.add(map, 'click', function () {contextmenu.style.display = "none";});$L.add(map, 'drag', function () {contextmenu.style.display = "none";});}</script></head><body onload="initialize()"><div />