google地图之api介绍

GoogleMapsJavaScriptAPIV3辅导手册注意：以下网页中提到的GoogleMapsJavaScriptAPI第3版现在是正式的JavaScriptAPI版本。该API的第2版已根据我们的弃用政策正式弃用。欢迎您将代码移植到这个功能更强、最近更新的版本中！1.简介2.GoogleMaps的“世界，您好”1.载入GoogleMapsAPI第3版2.地图DOM元素3.地图选项4.google.maps.Map-基本对象5.载入地图3.纬度和经度4.地图类型简介任何GoogleMaps第3版API应用程序中的基本元素都是“地图”本身。本文介绍了google.maps.Map基础对象的用法和地图操作的基础知识。（如果您已经学习了第2版的辅导手册，您会发现，这两版辅导手册中的很多内容都是相同的。但两者之间也会有些区别，因此，请仔细阅读本文。）GoogleMaps第3版的“Hello,World”初步了解GoogleMapsAPI的最简单方法就是看一个简单的示例。以下网页显示了以澳大利亚新南威尔士的悉尼为中心的一个地图：htmlheadmetaname=viewportcontent=initial-scale=1.0,user-scalable=no/scripttype=text/javascriptsrc==set_to_true_or_false/scriptscripttype=text/javascriptfunctioninitialize(){varlatlng=newgoogle.maps.LatLng(-34.397,150.644);varmyOptions={zoom:8,center:latlng,mapTypeId:google.maps.MapTypeId.ROADMAP};varmap=newgoogle.maps.Map(document.getElementById(map_canvas),myOptions);}/script/headbodyonload=initialize()divid=map_canvasstyle=width:100%;height:100%/div/body/html查看示例(map-simple.html)即使在这个简单的示例中，也有几点需要注意：1.使用script标记来加入MapsAPIJavaScript。2.我们创建一个名为“map_canvas”的div元素来承载该地图。3.创建Javascript对象常量以保存若干地图属性。4.编写Javascript函数以创建“map”对象。5.我们从body标记的onload事件初始化该地图对象。下文说明了这些步骤。载入GoogleMapsAPIhtmlheadmetaname=viewportcontent=initial-scale=1.0,user-scalable=no/scripttype=text/javascriptsrc==set_to_true_or_false/script网址指向Javascript文件所在的位置，该文件会载入使用第3版GoogleMapsAPI所需的全部符号和定义。您的网页必须包含指向该网址的script标签。此标头中的meta标签会指定如下内容：即应当以全屏模式显示该地图，且用户不能调整地图尺寸。（有关详细信息，请参见开发移动设备部分。）请注意，我们还需要设置sensor参数，以指明此应用程序是否使用传感器确定用户的位置。在此示例中，我们将该参数设为变量“set_to_true_or_false”，用于强调您必须将该值显式设为true或false。地图DOM元素divid=map_canvasstyle=width:100%;height:100%/div要在网页上显示地图，我们必须为其留出一个位置。通常，我们的做法是创建一个名为div的元素，然后在浏览器的文档对象模型(DOM)中获取此元素的引用。在上述示例中，我们定义了名为“map_canvas”的div并使用样式属性设置其大小。请注意，该尺寸已设置为“100％”，这将会展开地图，使之符合移动设备的屏幕尺寸。您可能需要根据浏览器的屏幕尺寸和填充区域调整这些值。请注意，地图总是会根据其中所包含的元素的大小决定其本身的尺寸，因此，您必须始终在div上显式设置一个适用的尺寸。地图选项varmyLatlng=newgoogle.maps.LatLng(-34.397,150.644);varmyOptions={zoom:8,center:myLatlng,mapTypeId:google.maps.MapTypeId.ROADMAP};要初始化地图，我们需要先创建一个包含地图初始化变量的Mapoptions对象。该对象不是构建出来的，而是以对象常量的形式创建出来的。由于我们要将地图的中心设定为某一特定的点，因此，我们还需要创建一个latlng值，以保存此位置信息并将其传递到地图的选项中。有关指定位置的详细信息，请参阅下面的纬度和经度部分。我们还设置了初始缩放级别，并将mapTypeId设置为google.maps.MapTypeId.ROADMAP。系统支持以下类型：ROADMAP，用于显示GoogleMaps默认的普通二维图块。SATELLITE，用于显示拍摄的图块。HYBRID，用于同时显示拍摄的图块和突出特征（道路、城市名）图块层。TERRAIN，用于显示自然地形图块，自然地形图块中会显示高度和水体特征（山脉、河流等）。与GoogleMaps第2版API不同的是，第3版中没有设置默认地图类型。您必须明确设置一个初始地图类型，才能查看相应的图块。google.maps.Map-基本对象varmap=newgoogle.maps.Map(document.getElementById(map_canvas),myOptions);Map类是表示地图的JavaScript类。此类的对象定义了网页上的单个地图。（您可以创建此类的多个实例，每个对象都将在网页上定义一个单独的地图。）我们使用Javascriptnew操作符创建此类的一个新实例。创建新的地图实例时，您需要在网页中指定一个divHTML元素作为地图的容器。HTML节点是Javascriptdocument对象的子对象，而且我们通过document.getElementById()方法获得该元素的引用。此代码可定义一个名为map的变量，然后将该变量分配给新的Map对象，同时将该变量传递到在myOptions对象常量内定义的选项中。这些选项将会用于初始化地图的属性。Map()函数称为“构造函数”，其定义如下：构造函数说明google.maps.Map(opts?)使用opts参数中已传递的可选参数创建新地图。载入地图bodyonload=initialize()呈现HTML网页时，会扩展文档对象模型(DOM)，接收任何外部图像和脚本并将其合并到document对象中。为了确保系统在完全载入网页后才将我们的地图添加到网页上，我们只会在HTML网页的body元素收到onload事件后，才会执行用于构建Map对象的函数。这样做可以避免出现不可预期的行为，并使我们可以对地图绘制的方式和时间进行更多控制。body标签的onload属性是事件处理程序的一个示例。GoogleMapsJavascriptAPI还提供了一组事件，可供您进行处理以确定状态变化。有关详细信息，请参阅地图事件部分。查看示例(map-simple.html)纬度和经度我们还需要一种引用各种地图位置的方法。在GoogleMapsAPI中，google.maps.LatLng对象提供了此类机制。您可以构建一个LatLng对象，以{纬度,经度}的顺序传递其参数：varmyLatlng=newgoogle.maps.LatLng(myLatitude,myLongitude)请注意：将“地址”转变为地理地点的过程叫做“地址解析”。此版本的GoogleMapsAPI可支持地址解析。有关详细信息，请参见服务部分中的地址解析。LatLng对象在GoogleMapsAPI中用途广泛。例如，google.maps.Marker对象会在其构造函数中应用LatLng，并在地图上所指定的地理位置上添加标记叠加层。地图类型GoogleMapsAPI中提供了多种地图类型。除了用户熟悉的“绘制”道路地图图块，GoogleMapsAPI还可支持其他地图类型。这些地图类型是通过使用mapTypeId属性，在地图的Mapoptions对象中设置的。GoogleMapsAPI提供了以下地图类型：MapTypeId.ROADMAP，用于显示默认的道路地图视图MapTypeId.SATELLITE，用于显示Google地球卫星图像MapTypeId.HYBRID，用于同时显示普通视图和卫星视图MapTypeId.TERRAIN，用于根据地形信息显示实际地图。您可以通过调用地图的setMapTypeId()方法更改地图的类型。GoogleMapsJavaScriptAPIV3事件注意：以下网页中提到的GoogleMapsJavaScriptAPI第3版现在是正式的JavaScriptAPI版本。该API的第2版已根据我们的弃用政策正式弃用。欢迎您将代码移植到这个功能更强、最近更新的版本中！1.地图事件概述1.用户界面事件2.MVC状态更改2.事件侦听器3.事件参数4.事件闭包5.获取和设置事件处理程序中的MVC属性地图事件概述浏览器中的JavaScript是事件驱动的，这表示JavaScript通过生成事件来响应交互，并期望程序侦听感兴趣的事件。GoogleMapsAPI第3版的事件模型与GoogleMapsAPI第2版中所使用的事件模型在内在机制上尽管有很大的不同，但两者是十分相似的。有两种类型的事件：用户事件（如“点击”鼠标事件）是从DOM传播到GoogleMapsAPI中的。这些事件是独立的，并且与标准DOM事件不同。MVC状态更改通知反映了GoogleMapsAPI对象中的更改，并以property_changed惯例命名每个GoogleMapsAPI对象都可导出大量已命名的事件。如果程序想要实现某些事件，则会为这些事件注册Javascript事件侦听器，并会在通过在google.maps.event命名空间中注册addListener()事件处理程序接收这些事件时执行相应的代码。GoogleMapsAPI第2版的开发人员应该会熟悉这一用法。有关事件的完整列表，请参见GoogleMapsAPI参考。至于包含事件的各个对象，我们在单独的部分中列出了这些对象的事件。用户界面事件GoogleMapsAPI中的一些对象旨在对用户事件（例如鼠标事件或键盘事件）作出响应。google.maps.Marker对象可以侦听以下用户事件，例如：'click''dblclick''mouseup''mousedown''mouseover''mouseout'这些事件可能看上去像是标准DOM事件，但实际上却是GoogleMapsAPI的一部分。由于不同的浏览器可实现不同的DOM事件模型，因此，GoogleMapsAPI提供了无需处理各种跨浏览器特性便可侦听和响应DOM事件的机制。这些事件通常还会在表明某些用户界面状态（例如鼠标位置）的事件中传递参数。MVC状态更改MVC对象通常都有相应的状态。只要更改了对象的属性，那么，API就会触发已更改该属性的事件。例如，当地图的缩放级别更