Google Map API V3 (四) map右键菜单
Google Map API V3 (四) 地图右键菜单
区别于浏览器中鼠标定位方式，要在地图中定位鼠标位置并将右键弹出的图层定位到页面中
不过问题是google地图在定位的时候有偏差值，所以在使用的时候减去了偏差值
区别于浏览器中鼠标定位方式，要在地图中定位鼠标位置并将右键弹出的图层定位到页面中
不过问题是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 class="left">
<div id="info"></div>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
</div>
<div id="map_canvas"></div>
</body>
<script>
</script>
</html>