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

最新推荐文章于 2020-06-06 16:04:54 发布

firseve

最新推荐文章于 2020-06-06 16:04:54 发布

阅读量190

点赞数

分类专栏： google map v3 文章标签： google map v3 map 地图 javascript ViewUI

google map v3 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

在上一版本上增加了标记新点的功能，初始化显示一个点，通过修改在地图上增加一个单词点击监听事件，并根据用户的点击标记新的点，隐藏原有显示，并记录下当前点击坐标位置
后面就是对于标记点的保存了
恢复可以显示初始化时候标记的点信息及弹出信息框（我没有改动上面的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>

另外鼠标右键点击地图并在点击位置显示菜单的功能基本实现，先上图
[img]http://dl.iteye.com/upload/attachment/604992/4f2a869c-c63a-3f35-bfae-a707af003978.png[/img]
原理是监听event事件的时候可以获得 map_canvas 中鼠标的 position:relative 所对应的浏览器x,y点信息。然后动态改变地图中弹出框所在的坐标位置

firseve

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Google Map API V3 (二) 点击标记一个点

在上一版本上增加了标记新点的功能，初始化显示一个点，通过修改在地图上增加一个单词点击监听事件，并根据用户的点击标记新的点，隐藏原有显示，并记录下当前点击坐标位置后面就是对于标记点的保存了恢复可以显示初始化时候标记的点信息及弹出信息框（我没有改动上面的Y和X，初始值在$G.y和$G.x中保存）PS：google区别于人们的原有思想，即google的地图对于 x y 的定义是y轴在前，...
复制链接

扫一扫

专栏目录