Google Map API V3 (一) 显示一个点,OO思想写一个属于自己的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;之类的赋值也是地址的赋值
可以参考:[url]http://happysoul.iteye.com/blog/1280900[/url]

其实写一个自己的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
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值