google地图使用文档.docx

资源描述

google地图使用文档.docx

《google地图使用文档.docx》由会员分享，可在线阅读，更多相关《google地图使用文档.docx（11页珍藏版）》请在冰豆网上搜索。

google地图使用文档.docx

google地图使用文档

地图使用帮助文档

2011-08-16

1.简介1

2.注意事项2

3.基础知识2

3.1.google地图的"helloworld".2

3.2.加载Google地图API3

3.3.地图DOM元素3

3.4.GMap2-基本对象3

3.5.初始化地图4

3.6.加载地图4

3.7.经度和纬度4

3.8.地图属性5

3.9.地图交互5

3.A.信息窗口6

4.事件6

4.1.事件监听器6

4.2.将事件绑定到对象7

4.3.监听DOM事件7

4.4.删除事件监听器8

5.控件8

5.1.向地图添加控件8

5.2.在地图上放置控件9

5.3.自定义地图控件10

6.地图叠加层12

6.1.标记12

6.2.可拖动的标记12

7.使用心得13

7.1.13

1.简介

Google地图是Google推出的一项服务，提供功能强大、使用方便的地图技术和本地商户信息，其中包括商户位置、联系信息及行车路线。

使用Google地图，您可享受到以下独特功能：

集成的商户搜索结果-在同一个位置可找到集成在地图中的所有商户位置和联系信息。

例如，如果您搜索[上海的火锅]，相关商户信息地址和电话号码都会显示在地图上。

您还可以查看其他信息，如营业时间、接受的付款方式和评价等。

可拖动的地图-点击并拖动地图，即可立即查看周边部分区域，无需长时间等待新区域下载。

卫星图片-您可以缩放和平移查看目标位置的卫星图片（或叠加有地图数据的卫星图片）。

数字地形图-查看实地特征,比如山脉和植被,以及海拔阴影。

街景视图-查看和浏览可细化到街道的图片。

详细的路线-输入地址，Google地图即可为您标示位置和行车路线。

您可在路线中添加多个目的地来规划行程，并通过点击和拖动路线来自定义行程。

了解更多关于Google地图行车路线的信息。

键盘快捷键-使用箭头键可向左、右、上、下平移。

使用PageUp、PageDown、Home和End键可更大幅度地平移。

使用加号（+）键和减号（-）键可放大或缩小地图。

双击缩放功能-双击左键可以放大，双击右键可以缩小（Mac用户需要按住Ctrl键后再双击）。

滚轮缩放-使用鼠标滚轮可放大或缩小地图。

谷歌官方介绍：

2.注意事项

2.1.在使用google地图时须先导入google地图的js

2.2在正式的项目应用中须要申请一个专有的key才能正常使用，申请的地址为：

2.3本文档为入门使用文档。

想更深入的学习使用请参考google官方api。

参考地址：

3.基础知识

3.1.google地图的"helloworld".

DOCTYPEhtml"-//W3C//DTDXHTML1.0Strict//EN"

"http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

//www.w3.org/1999/xhtml">

GoogleMapsJavaScriptAPIExample

type="text/javascript">//加载google地图API

functioninitialize（）{

if（GBrowserIsCompatible（））{//判断当前浏览器是否支持google地图

varmap=newGMap2（document.getElementById（"map_canvas"））;//生成map对象,初始化地图

map.setCenter（newGLatLng（39.9493,116.3975）,13）;//设置地图显示的中心点和缩放级别

}

//加入onunload事件,防止内存泄漏的实用工具函数

500px;height:

300px">

//地图显示层

即使在此简单的示例中，也需要注意五点：

3.1.1使用script标签包含Google地图APIJavaScript。

3.1.2创建名为“map_canvas”的div元素来包含地图。

3.1.3编写JavaScript函数创建“map”对象。

3.1.4将地图的中心设置为指定的地理点。

3.1.5从body标签的onLoad事件初始化地图对象。

3.2.加载Google地图API

type="text/javascript">

3.3.地图DOM元素

500px;height:

300px">

下面的示例使用getBounds（）返回当前视口，然后在地图上的这些边界内随机放置10个标记：

∙G_DEFAULT_MAP_TYPES-这三个类型的数组，在需要重复处理的情况下非常有用

例如，要了解当前视口的尺寸，可使用GMap2对象的getBounds（）方法来返回GLatLngBounds值。

每个地图还包含一个“缩放级别”，用于定义当前视图的分辨率。

在普通地图视图内，可以使用0（最低缩放级别，在地图上可以看到整个世界）到19（最高缩放级别，可以看到独立建筑物）之间的缩放级别。

缩放级别因所查看地区而异，因为地球上某些地区的数据比其他地区更详细。

可以通过使用GMap2对象的getZoom（）方法检索地图当前使用的缩放级别。

例如，setCenter（）、panTo和zoomIn（）方法通过编程来操作地图，而不是通过用户交互来操作地图。

下面的示例显示一个地图，等待两秒钟，然后平移到新中心点。

如果指定点位于地图的可见部分，则地图会平稳地平移到该点，否则会跳至该点。

GMap2对象提供了openInfoWindow（）方法，该方法将一个点和一个HTMLDOM元素作为参数。

HTMLDOM元素附加到信息窗口容器中，信息窗口的尖端会固定在指定点上。

GMap2的openInfoWindowHtml（）方法相似，但是它使用HTML字符串作为其第二个参数而不是DOM元素。

要创建信息窗口，请调用openInfoWindow方法，并向其传递位置和要显示的DOM元素。

下面的示例代码显示了一个信息窗口，该窗口锚定在地图中心，内容为一条简单消息“Hello,world”。

map.openInfoWindow（map.getCenter（）,document.createTextNode（"Hello,world"））;

通过使用GEvent命名空间中的实用工具函数注册事件监听器，来处理Google地图API中的事件。

例如，GMap2对象导出click、dblclick和move事件，以及其他许多事件。

每个事件都在指定的环境下发生，并且可以传递标识环境的参数。

例如，当用户在地图对象中移动鼠标时，会触发mousemove事件，并且该事件会传递鼠标所在地理位置的GLatLng。

有关GMap2事件及其生成的参数的完整列表，请参见GMap2.Events。

注册用来获取这些事件的相关通知的监听器，请使用静态方法GEvent.addListener（）。

该方法有三个参数，一个对象，一个待监听事件以及一个在指定事件发生时调用的函数。

当您希望将事件监听器附加到对象的特定实例时，函数非常有用。

如果您不希望这样，而是希望响应事件时对象的所有实例都调用某方法，可以使用GEvent.bind（）。

在下面的示例中，MyApplication的实例将地图事件与其成员方法绑定在一起，当触发事件时会修改类状态：

但是，DOM也会根据当前使用的特定浏览器事件模型创建和调度自己的事件。

如果您希望捕获并响应这些事件，Google地图API提供的独立于浏览器的包装器可以监听和绑定DOM事件而不需要自定义代码。

GEvent.addDomListener（）静态方法为DOM节点上的DOM事件注册事件处理程序。

同样，GEvent.bindDom（）静态方法允许您为类实例上的DOM事件注册事件处理程序。

但是，addListener（）、addDomListener（）、bind（）和bindDom（）函数会返回GEventListener句柄，可用来最终取消注册处理程序。

另请注意，您甚至可以从事件监听器自身内部删除事件监听器。

varmyEventListener=GEvent.bind（this.map,"click",this,function（overlay,latlng）{

例如，要将Google地图上显示的平移/缩放控件添加到您的地图中，您可以在您的地图初始化代码中添加下面这行语句：

在本例中，我们添加内置GSmallMapControl和GMapTypeControl控件，它们分别可以平移/缩放地图以及切换“地图”与“卫星”这两种类型。

addControl方法有第二个可选的参数GControlPosition，可用于指定控件在地图上的位置。

它可以是以下值之一，这些值分别指定要放置控件的地图某个角：

GControlPosition还可以指定偏移量，来指示控件的放置位置与地图边界间隔多少像素。

本示例会将GMapTypeControl添加到地图的右上角，填充为10个像素。

双击地图上的任何位置可以删除该控件，将其放在地图的右下角。

varbottomRight=newGControlPosition（G_ANCHOR_BOTTOM_RIGHT,newGSize（10,10））;

Google地图API还允许您通过子类化GControl来创建自定义地图控件。

（您并没有在JavaScript中实现一个“子类化”对象，而是把这个对象的prototype指定为GControl对象的实例。

要创建可用的自定义控件，您需要实现在该类中定义的至少两个方法：

initialize（）方法必须返回DOM元素，而getDefaultPosition（）方法必须返回类型为GControlPosition的对象。

所有自定义的地图控件中的DOM元素最终都应该添加到地图容器（也是DOM元素）中去，这个地图容器可以通过GMap2getContainer（）方法获得。

在此示例中，我们创建一个简单的缩放控件，它具有文本链接，而不是标准Google地图缩放控件中使用的图形图标。

//一个TextualZoomControl是GControl显示“放大”的文本//和“缩小”按钮（而不是//谷歌地图中所使用的标志性按钮）

//子类”的GControl，我们设置的原型对象//GControl对象的一个实例

//为每个按钮创建一个DIV和它们放置在一个容器//DIV这是作为我们的控制元素返回。

我们的地图容器//添加到//控制和正确返回//位置的地图类元素。