Google Maps JavaScript v3(v3.9)学习笔记
由于还没有离职的原因，近期找工作也不怎么努力，往往总是事与愿违，想要的不来，不想要了偏偏却又来了。
初步定好4月1号过去开工，4.1是个好日子，朋友听了之后第一反映就是：“那家公司忽悠你吧”。没办法这日子是我挑的，跟公司没有任何关系，纯属偶然！
该公司不属于网络也不属于软件，开发这边属于副业，在公司得到的关注不会很大，因此待遇离自己心理标准还是有差距的。
累的程度都一样，好在公司要求的网站做完，会有更充分的时间学习，自己一直想抽空写套快速开发框架，这样对深入的学习设计模式以及序列化，反射等提供了契机。
令人头疼的事情就是，公司不给配备美工，页面设计还得都的自己搞，很是郁闷，看来也只能在网上找点开源的代码了。毕竟不是设计科班出身，一点设计也不懂。精通JavaScript，CSS，XHTML也不顶用啊。
闲话不多扯了，进入正题吧。因为公司需要对地图的使用，因此必须要学习下相关地图提供商的API。
本人一直是Google的追随者，所以不习惯使用国产的那些产品，尤其是只懂得搞些低俗内容的百度。因此我选择学习Google Maps API。
这里把总结的经验拿出来与大家分享下。
学习开始前：
首先我们需要做些基础的准备。园子里也看到不少关于Google Maps API的文章，基本都是拿着Google官方的文档，拷贝过来改都不改就发贴的，还不把出处贴出来。对于这样的人，请允许我若若的鄙视下。
官方提供的教程相当的详细，进阶知识在园子里找找就可以了，基础概念以及API本人建议还是去官网看比较合适。下边罗列出官方重要链接：
产品介绍(对于产品的一些介绍)
开发者文档 (对于文档的一些介绍,看过介绍之后，您就会知道在这里为什么我要学习Google Maps JavaScript API了，因为我主要是应用在Web站点上)
上边的条目属于了解知识。
使用入门(使用Google Maps JavaScript时的必要环境的搭建，要使用Google Maps JavaScript API这里是需要好好阅读，Google Maps 毕竟已经开始收费了，现在需要授权)
Google地图脚本API参考(Google Maps Javascript API V3 Reference 即帮助文档,V3版本暂时没有汉化，不过我会对学习中遇到的方法属性进行翻译，小弟我不懂英语，所以翻译出来的有时牛头不对马嘴的，还请各位海涵。英文官方API V3离线版下载。中文版将在日后的学习中发布)
事件参考(想要完成高级功能，事件可是必不可少的东西)
地理编码服务(这玩意用处很大，属于必学点。可以通过中文地址进行搜索——地图编码，通过坐标查询出地址——反向地理编码（地址查询）)
最大缩放图像服务(Zoom的级别不是稳定的差值具体是多少受很多客观的影响，台湾一般为20.因此之前的例子我把zoomVal设为20.最后读过这篇文章之后对代码进行了修正)
总是拷贝别人的成果说是自己的，这种行为很龌龊。详细信息请大家参考官方提供的资料，我这里就不一一拷出了。
下边贴出官方提供的实例中的代码，为什么贴出，主要是因为在学习中对思考的东西加以修饰，进行功能的扩充，网络上是找不到的。具体的函数以及参数，在使用过程中，我都用了代码注释进行说明。
<!DOCTYPE html> <html> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <style type="text/css"> html { height: 100%; } body { height: 100%; margin: 0; padding: 0; } #map_canvas { height: 100%; } </style> <script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?key=your_api_key&sensor=false&language=cn"> </script> <script type="text/javascript"> /******************************** 基础实例,添加事件实例 *********************************/ function initialize() { var maxZoom = 21;//随便设置个默认缩放最大值 var maxZoomService = new google.maps.MaxZoomService();//实例化最大缩放服务 /********************************* 等价方法一 *********************************/ //设置地图的配置项 // var mapOptions = { // center: new google.maps.LatLng(25.075648445630527, 121.57470703125), //设置地图将要显示的中心点坐标 // zoom: 8, //缩放级别:地图显示时的初始分辨率可以通过 zoom 属性进行设置，其中缩放 0 相当于地球地图可缩小的最低级别，并且缩放级别越高，地图放大的分辨率就越高。最小值为0，最大值貌似为20 // mapTypeId: google.maps.MapTypeId.HYBRID // /* // 地图类型: // ROADMAP，用于显示 Google 地图的默认、普通 2D 图块。 // SATELLITE，用于显示拍摄的图块。 // HYBRID，用于同时显示拍摄的图块和重要地图项（道路、城市名）的图块图层。 // TERRAIN，用于显示自然地形图块，其中包含海拔和水体地图项（山脉、河流等）。 // */ // }; // //创建一个地图 // var map = new google.maps.Map(document.getElementById("map_canvas"),//将地图放入容器中,这里的容器是个div // mapOptions); /********************************* 等价方法二(等价方法一属于官方实例中的写法，本人用惯了ExtJS习惯用该写法) *********************************/ var map = new google.maps.Map(document.getElementById("map_canvas"), { center: new google.maps.LatLng(25.075648445630527, 121.57470703125), zoom: 8, mapTypeId: google.maps.MapTypeId.HYBRID }); //创建一个标记 var marker = new google.maps.Marker({ position: map.getCenter(), //设置标记的坐标，这里以地图中心为坐标 map: map, //将该坐标放置在指定的地图上 title: '单击[标记]放大,双击缩小'//鼠标滑动到标记上的提示信息 }); //通过最大缩放图像服务获取最大缩放值 maxZoomService.getMaxZoomAtLatLng(map.getCenter(), function (response) { if (response.status != google.maps.MaxZoomStatus.OK) { alert("错误在MaxZoomService中..."); return; } else { maxZoom = response.zoom; //alert("本地域最大缩放值为:" + response.zoom); } }); //地图的中心点改变时候触发的事件 google.maps.event.addListener(map, 'center_changed', function () { //3秒后地图自动的移动到以标记为中心的位置上 window.setTimeout(function () { map.panTo(marker.getPosition()); }, 3000); }); var zoomVal = 8; google.maps.event.addListener(marker, 'click', function () { zoomVal = map.getZoom(); //获取地图的缩放级别 if (zoomVal < 0) { zoomVal = 0; } else { zoomVal++; } map.setZoom(zoomVal); map.setCenter(marker.getPosition()); }); /********************************* 这里要特别说明一下 坐标的双击事件总是在触发单击事件后执行的,因此才会出现双zoomVal--; *********************************/ google.maps.event.addListener(marker, 'dblclick', function () { zoomVal = map.getZoom(); if (zoomVal > maxZoom) { zoomVal = maxZoom; } else { zoomVal--; zoomVal--; } map.setZoom(zoomVal); map.setCenter(marker.getPosition()); }); } /********************************* onload="initialize()" 本着"行为与结构分离"的思想注册页面load时间的时候还是不要在body体中添加onload标记的好，用下述方法即可
官方的具体讲解在“事件”中的“监听DOM事件”有具体讲解 *********************************/ //google.maps.event.addDomListener(window, 'load', initialize); </script> </head> <body onload="initialize()"> <div id="map_canvas" style="width: 100%; height: 100%"> </div> </body> </html>
