Google Map API V3 (一) 显示一个点,OO思想写一个属于自己的JS

happysoul

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

最近访客更多访客>>

yuhua8688

gaopengv

huanchou

qq447373051

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

博客分类：

google map v3

map google map v3 js 闭包地图

为了避免代码污染，js部分使用了 (function(){})()方法私有化了方法，并将方法赋给了全局变量 $G,$O,$M,$L,$I 以供调用，因为不同的js库命名规则不同，每次修改只需要将最开始的变量初始化及方法内对外公开方法的赋值字母同时改变就可减少代码冲突

这里地图我使用了$G获得了function方法内的 MP对应的功能函数
MP定义了一个数组，区别于java的数组，js可以使用字符串作为函数或变量的编号，同时js的数组可以同时存在不同的类型（字符串，数组，List，function等）

I中 infos:[] 减少了页面变量的初始化，即在使用多个marker点击事件触发时可以通过闭包方法使用不同的info信息框显示
关于js的执行：js先会初始化所有的变量，而且内存中只会存在一份变量，类似 var s = i;之类的赋值也是地址的赋值
可以参考：http://happysoul.iteye.com/blog/1280900

其实写一个自己的map类对于一个页面来说会增加不少多余代码，不过当你项目中大量使用同一个重复的代码的时候可以减少重复代码的编写

第一部分先写这么多把，主要是基础部分的整合，地图右键点击显示功能菜单完善中....

<!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:100%;}
@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">

// map.js  start
var $G,$O,$M,$L,$I;
(function(){
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);
	}
}

$G = MP;
$O = O;
$M = M;
$L = L;
$I = I;
})();
// map.js  end
//以上的js建议抽取出来存为map.js再引入项目使用，以增加通用性


//初始化坐标
$G.y=39.9126328872148;
$G.x=116.44053633792112;

var inf = "蒼井空はどこ?";
var point = $G.point($G.y,$G.x);
var info = $I.add(inf,point);
var map;
function initialize(){
	map = new google.maps.Map($G.getCanvas("map_canvas"), $G.options(point,15));	//初始化地图
	var mark = $M.mark(map,point,"ここにいるよう");
	info.open(map);
	$L.listen = $L.add(mark,"click",function(){info.open(map)});	//给标记点添加一个点击事件
}
</script>
</head>
<body onload="initialize()">
<div id="map_canvas"></div>
</body>
<script>
</script>
</html>

0
顶

0
踩

分享到：

Google Map API V3 (二) 点击标记一个点 | 仿新浪微博短链接生成短链接(使用62进制)

2011-12-12 22:01
浏览 3989
评论(0)
分类:Web前端
查看更多

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论