googlemapapi开发快速入门.docx

1、googlemapapi开发快速入门Google Map开发整理Google Maps API是Google自己推出编程API，可以让全世界对Google Maps有兴趣的程序设计师自行开发基于Google Maps的服务，建立自己的地图网站。以下是我在Google Maps API开发过程中找到的一些API的编程资源，包括中文文档，中文说明，示例等等，希望对Google Maps编程感兴趣的程序员有所帮助。中文资料部分（包括中文的文档说明等，以下的网址都是中文内容。）下面的关于API的中文文档Google Maps API第2版中文文档/map2/documentation.htmGoogl

2、e Maps API第2版升级指南/map2/upgrade.htmGoogle Maps API第2版类参考/map2/reference.htm另外一个版本的Google Maps API 2中文文档/maps/documentation/Google Maps API第1版中文文档/map/documentation.htm下面是关于KML文件的中文文档Google Earth KML中文说明（一）Google Earth KML中文说明（二）Google Earth KML中文说明（基于Google Earth客户端版本3.0的KML版本2.0）/map/kml.htm英文资料部分（主

3、要是Google官方的文档说明，如果觉得中文翻译的有问题，也可以看看这些原始内容。)Google Maps API官方网/maps/Google Maps API英文文档/maps/documentation/Google Maps API官方BlogGoogle Maps API论坛/Google-Maps-APIGoogle KML的官方文档/Google API官方网附：Google Map API中文开发教程Google Map API中文开发教程最好的教程还是google官方的说明文档，而且配有详细的例子，供大家学习，下面是文档的英文原文连接/maps/documentation/i

4、ndex.html目录包括1.面向的读者2.简介1.“Hello World” 程序2.浏览器兼容性3.XHTML和VML4.API更新5.地理译码6.行程规划和本地搜索7.标注管理3.示例程序1.基本操作2.地图移动及动画3.给地图添加控件4.事件处理函数5.打开气泡提示窗口6.地图覆盖物7.单击事件处理8.给标注增加气泡提示窗口9.多页的气泡提示窗口10.创建图标11.使用图标类12.可拖拽的标注13.编码折线14.在地图中使用XML和异步HTTP通信(AJAX)15.自定义地图控件16.自定义地图覆盖物1.标注管理器示例1.天气预报图2.疑难解答1.其它资料2.API概览1.GMap2类

5、2.事件3.气泡提示窗口4.地图覆盖物5.控件6.XML和RPC7.减少浏览器内存泄露3.演示程序4.类参考同步中文文档请参阅：/google/gmapapi/谷歌地图API密钥（API Key）的解读和使用技巧收藏好了，通過前一篇的介紹，大家對Google Map都有所瞭解了吧。不過還得一步步的來。先瞭解API Key吧。所谓API密钥（API Key），其实就是一个字符串，在使用script标签导入API类库的时候作为请求参数传给谷歌的地图服务器，形式就是： 我的API Key是：ABQIAAAAMWyR7XvYN8KE9N6m_jcU4BRlfWJrPzRGiYSzS4l55_z1ea3

6、VShRolPwARGHvivnEFRLVGXyIlsrYpA使用谷歌地图API的第一步就是要注册一个API密钥，谷歌的API使用条款对这个密钥的用途有很正式的说明，其实总结起来也很简单： 1、谷歌地图API提供的服务是免费的，对于通过API正常使用谷歌地图的网站基本没有任何限制； 2、说“基本”没有限制的原因是，谷歌对每个API密钥对应的网站所作的地理编码/地址解析请求次数有限制，每天（24小时）的请求次数不能超过15000次； 3、不能使用谷歌地图从事任何非法的行为，否则谷歌应该能够通过这个密钥阻止你的网站使用谷歌地图；更简单的说，谷歌使用这个密钥保证能够对所有API用户/网站进行区分，方

7、便必要的时候对“超常规”用户进行阻拦。对于地址解析的次数限制，一般来说不会有什么影响，这里主要说API密钥，所以以后有时间可以再详细说说地址解析相关的东东。对于API密钥，还有几点需要记下来： 1、如果使用API的页面还没有发布，只是在本地调试，可以不用密钥，随便用个字符串代替就可以了； 2、API密钥只对网站目录或者域有效，所以，虽然你是使用同一个谷歌帐号登录后注册的密钥，但是，对不同域的网页，需要用这些域分别注册不同的密钥，对于同一个域里的页面，直接拿你网站的域名注册一个，在这个域里的所有页面就可以通用这个密钥了。还有一个关于API密钥的实际问题：在论坛里还有人问过，同一个页面需要支持不同

8、的域名，最简单的就是公司有一个cn域名，也有一个com域名，这怎么办？其实，对于这种问题，可以提前先注册好不同域名对应的密钥，存在你的JS变量里面，页面加载时通过window.location得到当前请求页面的域名，通过这个域名在找到对应的密钥，然后使用script动态加载的方法加载地图API，用代码描述就是： /事先已经注册好的密钥 var keyMapping = host1:key1, host2:key2; /实际请求页面的域名 var requestHost = ; /找到需要的密钥 var key = keyMappingrequestHost; /构造加载API的script u

9、rl var apiUrl = ;v=2&key= + key; /使用script动态加载的方法加载地图API var scriptTag = document.createElement(script); scriptTag.setAttribute(type, text/javascript); scriptTag.setAttribute(src, apiUrl); document.getElementsByTagName(head)0.appendChild(scriptTag);使用这段代码时，需要注意把你自己的JS代码中对API的各个类的调用放在API加载完成以后，详细

10、的解释可以先google一下著名的DomReady的问题，三言两语还是说不清楚的，呵呵。这段代码我没有实际跑过，欢迎斧正，如果你有更好的方法，我更愿意洗耳恭听了。使用谷歌地图API应该有所了解的一些技术外背景收藏这些内容，常用谷歌地图的应该也都知道，我也只写我知道的，了解这些对使用API还是有帮助的。1、 谷歌地图主页谷歌地图对应不同的地区都会有一些专门的主页，首次登陆时会显示这些地区，比如，香港的：.hk，台湾的：.tw，日本的：.jp不过，我们常用的也就三个：这个应该是谷歌地图的全球主页，默认显示老美地图，拖拽到不同地区会对应显示不同语言版本的地图，不过目前对中文数据搜索支持的不如下面正式

11、的中文主页；这个么，我叫它是谷歌地图的中文主页，什么意思看下一个你就知道了，用这个可以使用“我的地图”；这个，我叫他是谷歌地图的大陆主页，目前还没有“我的地图”这个功能；后面这两个主页只能显示大陆地区的详细地图，如果想看别的地区的，就只能用全球主页了。当然，别以为你抓着漏洞可以注册个，然后卖给谷歌，不信你试试，看它跳到哪里了:)2、谷歌地图的类型其实，谷歌地图的类型主要也就三种：普通地图：历史悠久的人工绘制地图，不多说了，不知道的给我留个地址，我快递个板砖给你；卫星地图：用卫星图片拼成的地图，不同地图的显示精度有区别，现在中文主页上也有了，曾经可是被禁止的，怕你偷看海南的黑鱼；地形地图：用等高

12、线标出海拔的地图，对地理教学和教育相关的相当有用，当然，对军迷也超级有吸引力，不展开!把这三种组合起来(主要是普通地图和卫星地图的组合)，或者在这些地图上添加其他的数据，就又有一些新的类型了，这个层出不穷，我只说主页上现有的：混合地图：就是把普通地图和卫星地图结合，在卫星地图上显示行政区、街道等等，在全球主页上把鼠标移到“卫星”按钮上，会跳出来一个“显示标签”的复选框，选中后地图就是这个类型了，中文还没支持，不知道什么时候可以用；交通地图：在地图上显示交通信息。这个理论上是实时的，不过，在目前的中文地图上，吸引眼球的作用更大一些，如果能在手机版上使用就好了（貌似目前还没有），而且只有北京和上海

13、有数据支持；街景地图：这个和交通地图一样，严格上不算是一种地图类型，就是使用Flash来显示街道的全景图，我也在等中文地图支持街景了（中文API已经支持StreetView相关的类了，就是没有数据），不久前看到的消息是目前谷歌对这个没有时间表，呵呵，他是“万事俱备，只欠东风”，努力吧！在地图API中，后面组合的这三种除了混合地图算作是一种地图类型外，其他两个都不算是地图类型，被看着是在地图上新增的层（术语：叠加层/overlay）。3、谷歌地图的数据源谷歌是一个服务提供商，而不是一个内容提供商，所以，准确的说，谷歌地图向终端用户提供的是基于地图的搜索服务。从这一点上，可以把谷歌地图上的数据分为

14、三类：地理数据：地理、空间信息，包括经纬坐标、航拍/卫星图片、行政区划以及据此绘制的图片等等，由谷歌或其合作伙伴持有；商业数据：与地理相关的商业数据，比如餐馆、影院、交通、景点等等，这也是由谷歌或其合作伙伴持有，谷歌可能对这些数据有一个采集、过滤、整理的再加工过程。想被客户搜索到，就来这里标注自己的公司吧；用户数据：用户使用谷歌地图API定制地图并在地图上标注的数据，这些数据由用户持有。这样，通过这个分类，我们可以解决两个非常常见的疑问： 1）使用谷歌地图API，地图上的数据存在哪里？你是你的我是我的。是谷歌提供的数据，由谷歌负责；如果是你自己提供的数据，当然由你负责保存，谷歌相当于给你一个展

15、示数据的平台，除非你愿意把自己的数据无偿贡献给谷歌:) 2）使用谷歌地图API，终端用户会通过谷歌搜索到我的数据吗？对谷歌地图来说，他的数据源只有地理数据和商业数据，所以在谷歌地图主页上不会搜到你的数据。但是，你可以在你的地图上定制谷歌搜索的数据源，使得用户可以搜索你的数据。（不是很肯定的哦，要看你的具体情况的）4、 谷歌地图API谷歌地图API就是一系列使用OO方式组织的JavaScript类和静态方法（我有时候也统称为地图API类库），通过创建这些类的实例（对象）或调用API中提供的静态方法，可以在页面上创建和控制地图，也可以在地图上展示任何非谷歌提供的数据/信息。谷歌地图API只涉及浏览

16、器/客户端相关的技术，比如JavaScript、HTML DOM、CSS等，不涉及任何服务器端的技术，或者说，你可以基于任意你需要的服务端使用谷歌地图API（所以，这里面能够展开的东东就太多了，以后再总结吧，我也在学习）。加载谷歌地图API的URL详细解读收藏谷歌地图的API类库是通过script标签导入的，形式如下：我们使用API的时候关心的就是这个script的src属性了，这个属性也就两个部分：路径：； 参数：file=api&hl=zh-CN&v=2&key=abcdefg。解剖一下：1、 路径：路径在这里需要注意的就是它的域名：。这个和谷歌地图简单背景里介绍的谷歌地图主页的问题类似，

17、就是说，我们主要可以使用、这三个域名，有些区别和说明： 1） 如果你需要在地图上显示大陆以外的详细地图，就非莫属了，不过，这个域名对国内地理数据的查询(比如查询地址、路线等等)支持能力有限，如果你这方面有需求就要小心了，而且，这个应该是使用的国外的服务器，所以，访问速度也需要注意； 2）相反，如果你需要使用谷歌提供的与国内地理数据查询相关的API，就是用吧，使用这个域名的缺点就在于它和提供的类库不是完全一致，更新稍微有点滞后，而且，受限于国内数据源在法律等方面的限制，有些功能方面的支持也会受限，比如地址解析（现在已经放开了，这里只是拿来举例）； 3）至于和的区别，我也很糊涂，如果你很想做个听话

18、的好公民，不出一丝差错，那么.cn可能会比.com更让你放心一点吧，臆测，呵呵。总得来说，一般的应用使用就可以了，如果需要使用大陆以外的详细地图，就考虑使用吧。不过，因为使用了相同的命名空间，这两者在一个页面中不能共存，所以，可以考虑用两个iframe来动态切换，这里有个火炬传递的例子，就是这么实现的，咱当初也贡献过一把。2、 参数：file=api&hl=zh-CN&v=2&key=abcdefg 1）file=api这个是请求API的JS文件用的，少不了，不需多说； 2）hl=zh-CN这个是在设定地图上除了地图图片以外的诸如控件名称、版权声明、使用提示等所需要显示文本的语言版本时候用的，

19、如果没有指定这个参数就使用API的默认值，对来说，默认是中文简体，默认的是英文。其他的语言版本在这里有一个简单的英文说明（好像好久没更新了）。 3）v=2这个是用来指定需要导入的API类库的版本号，可以有四种设定方式： v=2.s稳定版本，更新最慢，但是最可靠； v=2当前版本（只用主版本号），更新速度和可靠性介于s和x之间； v=2.x最新版本，更新最快，包括最新功能，可能没有当前版本可靠； v=2.76指定版本。不建议使用。目前谷歌地图API的主版本号是2，这是从2006年4月开放的版本，对之前的第1版做了一些比较重要的升级，不过估计国内用第1版的应该很少，所以也没必要多说了，注意第二版里

20、定义地图对象时使用GMap2而不是GMap就可以了，否则可能会导致一些奇怪的问题，我是见过这样的。多罗嗦两句，谷歌地图API正常情况下还是相当稳定的，不过也有一些比较著名的Bug，比如超长的Polyline在某些特定环境下可能会显示不正常。万一有什么问题可以去这里找找是不是别人报过的Bug（英文版），当然，更简单的办法是到谷歌地图API论坛里问问，不过别忘了把你的问题、运行环境描述清楚。我碰到过很多次这样的情况：对JavaScript或者浏览器端的某些技术特性不是很了解，出了一些奇怪的问题，撂一句话就走人，唉，就不评论了，“活到老学到老”还是很有道理的。 4）key=abcdefg这个是设定你

21、注册的API密钥，我在这里费了不少口舌，不是很了解的话可以看看。使用JavaScript创建地图步骤详解一段经过精简的代码： var map = new GMap2(document.getElementById(mapContainer); map.setCenter(new GLatLng(33.0, 106.0), 3);新建一个空白的文本文件，把上面这段代码copy过去，不要改变代码的任何顺序，然后把这个文本文件保存为html文件，使用浏览器打开（不要使用MS的IE），看看你能看到什么！对这段代码的详细解释上面的这段代码就是创建一个地图的核心步骤：1、导入地图API类库。注意这里的参数

22、key，我在以前的文章里已经详细解释过了，如果你只是在本地运行，暂时可以不用管它。2、在页面的body元素中定义一个地图容器。 这个地图容器一般使用div元素来定义，如果你愿意，使用p元素或者其他你能想到的元素都可以，但是都应该是块元素，并且必须定义它的id，保证在后面的步骤里能够通过document.getElementById找到这个元素。容器的style属性在这里是用来定义这个容器的大小，从而决定所显示地图的大小，当然，如果你在这里不定义也可以通过其他的手段来达到目的，这里暂且先认为这个style的定义和id属性一样也是必不可少的吧。其实body元素在这里也有一些特殊的作用，就是保证下一

23、步骤在页面的html元素全部加载结束后再执行，详细的理论就不细说了。3、定义你自己的script区域，在里面new一个GMap2对象，并且指定其显示所需的两个基本要素：中心、缩放层次。 var map = new GMap2(document.getElementById(mapContainer); map.setCenter(new GLatLng(33.0, 106.0), 3); 这里的GMap2是谷歌地图API中最重要的核心类，对应在页面上显示的地图，所有对地图的操作都需要在已经创建（new）了GMap2对象的基础上才能够进行。在调用GMap2构造函数是使用的参数就是在上一步定义的地

24、图容器，DOM对象，使用document.getElementById获取。要在页面上正常显示地图，仅仅调用GMap2类的构造函数创建一个GMap2对象还不够，你还需要指定这个GMap2对象的中心，通常也顺便指定它的缩放层次，否则就会默认显示缩放层次为0。要指定新创建地图的中心，需要使用地图API里面定义的另一个常用类GLatLng，可以把这个类简单的认为是对地理坐标的封装类，构造函数中第一个参数是南北向的纬度，第二个参数是东西向的经度。调用GMap2的setCenter方法设定完地图的中心和缩放层次，这个地图就可以正常显示了。还需要关心的几个问题：上面的示例代码仅仅是为了显示一个试验性质的简

25、单地图，所以把很多暂时不是很必要的代码都去掉了，如果你需要创建具有很好的兼容性、并且能够发布到你自己的网站上的地图，还需要注意这几个问题： 1、为了保证有足够的兼容性，谷歌建议使用XHTML来定义显示地图的html页面，所以，你需要在这个页面的顶部声明XHTML的DOCTYPE，并且在html中声明XHTML的命名空间 当然，最好你自己的页面代码也能够符合XHTML的语法规则。相对我们现在的HTML4.01来说，可以把XHTML语法规则简单的归纳如下： html、head、title、body元素一个都不能少，并且只能有html一个root元素；不要使用简化的属性，必须使用“name=value”的形式；标签名和属性名都用小写字母，属性值要用引号括起来；标签必须是闭合的，并且不能交叉嵌套；使用id属性而不是name属性来获取元素； 2、为了兼容“伟大的”IE浏览器，以便能够在IE中也正确显示地图中的折线，需要在html标签中增加对VML命名空间的声明 这个很容易忽略，导致你在IE里的折线不能正常显示，所以把这一点单列出来加以强调。 3、对于通用的浏览器兼容性检查，地图API提供了一个全局方法G