Google Map API V3 (1) 显示一个点,OO思想写一个属于自己的JS
日期：2014-05-16 浏览次数：20463 次
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;之类的赋值也是地址的赋值
可以参考：http://happysoul.iteye.com/blog/1280900
其实写一个自己的map类对于一个页面来说会增加不少多余代码，不过当你项目中大量使用同一个重复的代码的时候可以减少重复代码的编写
第一部分先写这么多把，主要是基础部分的整合，地图右键点击显示功能菜单完善中....
为了避免代码污染，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>
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
