前端开发实战教程—基于PHP、Google Maps Api的网站开发(二)
上一节我们建立了Apus项目，学习了使用subversion进行版本控制，学会了怎样将Google Maps放在我们自己的网页上。今天我们会详细的研究，怎样让Google Maps在我们的网页上实现各种功能和效果。
发表于：2009-04-06 18:31 分类：首页 > JavaScript > JavaScript源码范例 > ,
第二节 Google Maps Api介绍与基础操作
前言
上一节我们建立了Apus项目，学习了使用subversion进行版本控制，学会了怎样将Google Maps放在我们自己的网页上。今天我们会详细的研究，怎样让Google Maps在我们的网页上实现各种功能和效果。
本节的操作都是演示性质的，不涉及Apus项目的主干，所以我们的编码只在apus/demos 目录下进行。
课程开始了，请先更新版本库： svn up ,不熟悉版本库操作的朋友请阅读第一节。
本节所有示例程序的压缩包可以在这里下载：http://code.google.com/p/apus/downloads/list
一. 关于Google Maps Api
"API"，即“应用程序编程接口”，是指软件或网站为第三方开发人员提供的接口，利用这个接口，可以使用软件的一些功能而不必了解它的内部机理。
具体拿Google Maps Api来说，它提供了一个JavaScript库，具体就是我们上节课在页面头部引入的这个url：http://ditu.google.com/maps?file=api&v=2&key=KEY ，它会自动载入地图所需的js文件，Firefox肿的Firebug插件是前端开发必备工具，使用它我们可以方便的查看网页的内容，可以看到Google Maps Api引入的几个JS文件：
( Google Maps Api引入的文件 )
Google Maps Api的作用是，将Google Maps服务器上的地图图片和数据下载到客户端并正确显示，显示程序定义的地标点、折线和多边形，实现地址搜索、驾车导航等扩展功能。你可以在网页中直接调用它定义的类和方法，而不必了解它的运行机制，当然这些js文件是可见的，需要的话你可以重载它的函数，来实现你想要的功能。
二. 概览Google Maps Api
使用Google Maps Api必不可少的东西就是其开发手册：http://code.google.com/intl/zh-CN/apis/maps/documentation/reference.html
我们可以看到，Google Maps Api的地图的显示、标点、划线等操作包含59个类，空间、叠加层等包含18个类。
看到这个长达一百多屏的参考手册，是不是有点晕？不要着急，在本节及以后的讲解中，我们只会学习并使用其中一部分的类来实现我们的功能。
三. Google Maps Api基本功能学习
OK，现在我们正式开始学习Google Maps Api的基本功能，目前你需要做的，仅是了解这些功能的概念和实现方法，而不需要考虑它的机制和用途，在后面的正式开发中，我们会将这些模块融会贯通到我们的项目之中。
1.加载并显示地图
上一节的末尾，我们加载了Google Maps Api并显示了地图，
|
<!--引入Google Map JS文件，此处key＝“你申请到的key”--> <script type="text/javascript"> |
GMap2是Api中的中心类，作用为在给定的容器DIV中创建地图。可选参数opts.size可以设置地图大小，默认使用容器DIV的大小。
2.添加控件
Google Maps的控件包括左侧的“鱼骨”控件和比例尺、右侧的地图类型按钮和小地图。
现在我们加载常用的四种控件：
| //加载大“鱼骨”，包含方向、缩放按钮和缩放级别控制滑块 map.addControl(new GLargeMapControl()); //加载地图类型按钮 map.addControl(new GMapTypeControl()); //加载小地图 map.addControl(new GOverviewMapControl()); //加载比例尺 map.addControl(new GScaleControl()); |
此外，还有四种类型的控件，可以在小尺寸地图上选用：
| GSmallMapControl() 小“鱼骨”，仅包含方向、缩放按钮 GSmallZoomControl() 更小“鱼骨”，仅包含缩放按钮 GMenuMapTypeControl() 下拉框式地图类型选择 GHierarchicalMapTypeControl() 按钮、下拉框组合式地图类型选择 |
具体见Api参考中的class GControl http://code.google.com/intl/zh-CN/apis/maps/documentation/reference.html#GControlImpl
3. 在地图上添加标注
基本步骤为：定义一个经纬度点GLatLng，定义一个标注对象GMarker，在地图上加入标注GMap2.addOverlay()
| //定义一个经纬度点 var point = new GLatLng(36.07868, 120.3599); //定义一个标注对象 var marker = new GMarker(point); //在地图上加入标注 map.addOverlay(marker); |
我们还可以为这个标注添加冒泡提示，这些要在addOverlay()之前定义：
| //定义字符串 var info = "这是我的家<br/><font color='red'>市北区宁夏路**号</font>"; //设置点击出现冒泡，内容为预先定义的HTML字串 marker.bindInfoWindowHtml(info); |
关于标注的其他操作、冒泡的方式内容等，还有几个其他的方法，具体可以阅读Api参考的class GMarker： http://code.google.com/intl/zh-CN/apis/maps/documentation/reference.html#GMarker
相关阅读
- 国外Javascript及Ajax实例资源网站( 2009-05-01 19:46 )
- 前端开发实战教程—基于PHP、Google Maps Api的网站( 2009-03-29 20:06 )
