Google Map API V3 (2) 点击标记一个点

Google Map API V3 (二) 点击标记一个点
在上一版本上增加了标记新点的功能，初始化显示一个点，通过修改在地图上增加一个单词点击监听事件，并根据用户的点击标记新的点，隐藏原有显示，并记录下当前点击坐标位置
后面就是对于标记点的保存了
恢复可以显示初始化时候标记的点信息及弹出信息框（我没有改动上面的Y和X，初始值在$G.y和$G.x中保存）

PS：google区别于人们的原有思想，即google的地图对于 x y 的定义是y轴在前，x轴在后（y:南北纬 x:东西经）

<!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 地图 JavaScript API 示例: 简单的地图</title>	
<style>
html,body{height:100%;margin:0;padding:0;}
#map_canvas{height:87%;}
@media print{
	html,body{height:auto;}
	#map_canvas{height:100%;}
}
</style>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&language=zh-CN"></script>
<script type="text/javascript">
// map.js  start
var $G,$O,$M,$L,$I;
(function(undefined){
O = function (id) {
	return "string" == typeof id ? document.getElementById(id):id;
};
MP = {
	y:39.9,
	x:116.4,
	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
		});
	}
}

I = {
	infos:[],
	add:function(info,latLng,w,h){
		if(w&&h)
		return new google.maps.InfoWindow({
			content: info,
			size: new google.maps.Size(w,h),
			position: latLng
		});
		else if(latLng)
		return new google.maps.InfoWindow({
			content: info,
			position: latLng
		});
		else
		return new google.maps.InfoWindow({
			content: info
		});
	}
}

//event 事件
L = {
	listen:null,
	add:function(dom,event,fn){
		return google.maps.event.addDomListener(dom, event, fn);
	},
	addOnce:function(dom, event, fn){
		return google.maps.event.addListenerOnce(dom, event, fn)
	}
}

$G = MP;
$O = O;
$M = M;
$L = L;
$I = I;
})();
// map.js  end

</script>
<script type="text/javascript">
$G.y=39.9126328872148;
$G.x=116.44053633792112;
var z = 15;
var mark;
var tempmark;
var inf = "222";
var point = $G.point($G.y,$G.x);							//初始中心点
var info = $I.add(inf,point);
function initialize(){
	map = new google.maps.Map($G.getCanvas("map_canvas"), $G.options(point,z));		//初始化地图
	mark = $M.mark(map,point);
	info.open(map);
	$L.add(mark,"click",function(){info.open(map)});
}
function editmap(){
	$L.addOnce(map,"click",function(event){
		if(tempmark)tempmark.setMap(null);
		mark.setMap(null);
		info.setMap(null);
		$O("y").value=event.latLng.lat();
		$O("x").value=event.latLng.lng();
		tempmark = $M.mark(map,event.latLng);
	});
}
function cancelmap(){
	if(tempmark)tempmark.setMap(null);
	map.panTo(point);
	mark.setMap(map);
	info.setMap(map);
}
</script>   
</head>   
<body onload="initialize()">
<div style="50px;margin-left:300px;padding-top:15px;">
	<button onclick="editmap()">修改</button><button onclick="cancelmap()">恢复</button>Y:<input type="text" id="y">X:<input type="text" id="x">
</div>
<div id="map_canvas"></div>
</body>
<script>
</script>
</html>

另外鼠标右键点击地图并在点击位置显示菜单的功能基本实现，先上图
Google Map API V3 (2) 点击标记一个点

原理是监听event事件的时候可以获得 map_canvas 中鼠标的 position:relative 所对应的浏览器x,y点信息。然后动态改变地图中弹出框所在的坐标位置

Google Map API V3 (2) 点击标记一个点

相关推荐