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

happysoul · 发表于 2013-1-29 08:54:55

在上一版本上增加了标记新点的功能，初始化显示一个点，通过修改在地图上增加一个单词点击监听事件，并根据用户的点击标记新的点，隐藏原有显示，并记录下当前点击坐标位置
后面就是对于标记点的保存了
恢复可以显示初始化时候标记的点信息及弹出信息框（我没有改动上面的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 startvar $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});elsereturn 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 ><div style="50px;margin-left:300px;padding-top:15px;"><button >修改</button><button >恢复</button>Y:<input type="text" id="y">X:<input type="text" id="x"></div><div id="map_canvas"></div></body><script></script></html>

另外鼠标右键点击地图并在点击位置显示菜单的功能基本实现，先上图

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

		自动登录	找回密码
密码			立即注册