google地图使用文档Word下载.docx

google地图使用文档Word下载.docx

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

7.使用心得13

7.1.13

1.简介

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

谷歌官方介绍：

2.注意事项

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

<

scriptsrc="

type="

text/javascript"

>

/script>

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

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

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

参考地址：

3.基础知识

.

!

DOCTYPEhtml"

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

"

http:

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

htmlxmlns="

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

<

head>

metahttp-equiv="

content-type"

content="

text/html;

charset=utf-8"

/>

title>

GoogleMapsJavaScriptAPIExample<

/title>

//加载google地图API

scripttype="

functioninitialize（）{

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

varmap=newGMap2（document.getElementById（"

map_canvas"

））;

//生成map对象,初始化地图

map.setCenter（newGLatLng（39.9493,116.3975）,13）;

//设置地图显示的中心点和缩放级别

}

/head>

bodyonload="

initialize（）"

onunload="

GUnload（）"

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

divid="

style="

width:

500px;

height:

300px"

/div>

//地图显示层

/body>

/html>

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

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

3.3.地图DOM元素

3.4.GMap2-基本对象

varmap=newGMap2（document.getElementById（"

构造函数

说明

GMap2（container,opts?

）

在通常是一个DIV元素的指定HTMLcontainer内创建新地图。

您也可以通过opts参数传递GMap2Options类型的可选参数。

3.5.初始化地图

map.setCenter（newGLatLng（39.9493,116.3975）,13）;

3.6.加载地图

3.7.经度和纬度

varmyGeographicCoordinates=newGLatLng（myLatitude,myLongitude）

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

functioninitialize（）{

//Add10markerstothemapatrandomlocations

varbounds=map.getBounds（）;

varsouthWest=bounds.getSouthWest（）;

varnorthEast=bounds.getNorthEast（）;

varlngSpan=northEast.lng（）-southWest.lng（）;

varlatSpan=northEast.lat（）-southWest.lat（）;

for（vari=0;

i<

10;

i++）{

varpoint=newGLatLng（southWest.lat（）+latSpan*Math.random（）,

southWest.lng（）+lngSpan*Math.random（））;

map.addOverlay（newGMarker（point））;

}

}

3.8.地图属性

∙G_NORMAL_MAP-默认视图

∙G_SATELLITE_MAP-显示Google地球卫星图像

∙G_HYBRID_MAP-混合显示普通视图和卫星视图

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

可以使用GMap2对象的setMapType（）方法设置地图类型。

例如，下面的代码将地图设置为使用Google地球的卫星视图：

map.setMapType（G_SATELLITE_MAP）;

地图还包含对了解情况非常有用的大量属性。

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

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

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

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

在卫星视图中可以使用多达20个缩放级别。

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

3.9.地图交互

您还可以通过编程与地图交互。

GMap2对象支持可以直接改变地图状态的大量方法。

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

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

panTo方法将地图中心设置在指定点处。

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

window.setTimeout（function（）{

map.panTo（newGLatLng（39.927,116.407））;

},1000）;

3.A.信息窗口

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

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

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

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

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

map.openInfoWindow（map.getCenter（）,document.createTextNode（"

Hello,world"

4.事件

4.1.事件监听器

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

每个地图API对象都导出大量已命名的事件。

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

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

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

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

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

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

例如，每当用户点击地图时,下面的代码段都会显示警告:

map"

GEvent.addListener（map,"

moveend"

function（）{

varcenter=map.getCenter（）;

document.getElementById（"

message"

）.innerHTML=center.toString（）;

}）;

4.2.将事件绑定到对象

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

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

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

functionMyApplication（）{

this.counter=0;

this.map=newGMap2（document.getElementById（"

this.map.setCenter（newGLatLng（39.9493,116.3975）,13）;

GEvent.bind（this.map,"

click"

this,this.onMapClick）;

}

MyApplication.prototype.onMapClick=function（）{

this.counter++;

alert（"

这是您第"

+this.counter+"

+

次点击"

varapplication=newMyApplication（）;

4.3.监听DOM事件

Google地图API事件模型创建并管理自己的自定义事件。

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

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

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

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

4.4.删除事件监听器

不再需要事件监听器时，应将其删除。

甚至在事件只需触发一次的情况下，也可能需要删除。

删除闭包内的匿名函数所定义的事件监听器可能很困难。

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

下面的示例通过在地图上放置标记来响应点击。

任何后续点击都可删除事件监听器。

请注意，这会导致不再执行removeOverlay（）代码。

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

varmyEventListener=GEvent.bind（this.map,"

this,function（overlay,latlng）{

if（this.counter==0）{

if（latlng）{

this.map.addOverlay（newGMarker（latlng））

}elseif（overlayinstanceofGMarker）{

this.removeOverlay（marker）

}else{

GEvent.removeListener（myEventListener）;

}）;

functionload（）{

varapplication=newMyApplication（）;

5.控件

5.1.向地图添加控件

可以使用GMap2方法addControl（）向地图添加控件。

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

map.addControl（newGLargeMapControl（））;

可以向地图添加多个控件。

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

在地图中添加标准控件后，它们即刻完全生效。

map.addControl（newGSmallMapControl（））;

map.addControl（newGMapTypeControl（））;

5.2.在地图上放置控件

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

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

∙G_ANCHOR_TOP_RIGHT

∙G_ANCHOR_TOP_LEFT

∙G_ANCHOR_BOTTOM_RIGHT

∙G_ANCHOR_BOTTOM_LEFT

如果不包含此参数，则地图API会使用控件指定的默认位置。

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

这些偏移量使用GSize对象指定。

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

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

varmap=newGMap2（document.getElementById"

varmapTypeControl=newGMapTypeControl（）;

vartopRight=newGControlPosition（G_ANCHOR_TOP_RIGHT,newGSize（10,10））;

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

map.addControl（mapTypeControl,topRight）;

dblclick"

map.removeControl（mapTypeControl）;

map.addControl（newGMapTypeControl（）,bottomRight）;

5.3.自定义地图控件

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

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

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

initialize（）和getDefaultPosition（）。

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

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

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

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

//首先定义的函数

functionTextualZoomControl（）{

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

TextualZoomControl.prototype=newGControl（）;

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

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

。

TextualZoomControl.prototype.initialize=function（map）{

varcontainer=document.createElement（"

div"

）;

varzoomInDiv=docum