Google Map API V3 (四) 地图右键菜单

happysoul

浏览: 399266 次
性别:
来自: 天津

最近访客更多访客>>

yuhua8688

gaopengv

huanchou

qq447373051

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

google map v3

javascript html google map 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 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>