google地图使用文档.docx

1、google地图使用文档地图使用帮助文档2011-08-161.简介 12.注意事项 23.基础知识 23.1.google地图的hello world. 23.2.加载 Google 地图 API 33.3.地图 DOM 元素 33.4.GMap2 - 基本对象 33.5.初始化地图 43.6.加载地图 43.7.经度和纬度 43.8.地图属性 53.9.地图交互 53.A.信息窗口 64.事件 64.1.事件监听器 64.2.将事件绑定到对象 74.3.监听DOM事件 74.4.删除事件监听器 85.控件 85.1.向地图添加控件 85.2.在地图上放置控件 95.3.自定义地图控件 10

2、6.地图叠加层 126.1.标记 126.2.可拖动的标记 127.使用心得 137.1. 131.简介Google 地图是 Google 推出的一项服务，提供功能强大、使用方便的地图技术和本地商户信息，其中包括商户位置、联系信息及行车路线。使用 Google 地图，您可享受到以下独特功能： 集成的商户搜索结果 - 在同一个位置可找到集成在地图中的所有商户位置和联系信息。例如，如果您搜索 上海的火锅，相关商户信息地址和电话号码都会显示在地图上。您还可以查看其他信息，如营业时间、接受的付款方式和评价等。 可拖动的地图 - 点击并拖动地图，即可立即查看周边部分区域，无需长时间等待新区域下载。 卫星

3、图片 - 您可以缩放和平移查看目标位置的卫星图片（或叠加有地图数据的卫星图片）。 数字地形图 - 查看实地特征, 比如山脉和植被, 以及海拔阴影。 街景视图 - 查看和浏览可细化到街道的图片。 详细的路线 - 输入地址，Google 地图即可为您标示位置和行车路线。您可在路线中添加多个目的地来规划行程，并通过点击和拖动路线来自定义行程。了解更多关于 Google 地图行车路线的信息。 键盘快捷键 - 使用箭头键可向左、右、上、下平移。使用 PageUp、PageDown、Home 和 End 键可更大幅度地平移。使用加号 (+) 键和减号 (-) 键可放大或缩小地图。 双击缩放功能 - 双击左

4、键可以放大，双击右键可以缩小（Mac 用户需要按住 Ctrl 键后再双击）。 滚轮缩放 - 使用鼠标滚轮可放大或缩小地图。谷歌官方介绍： 2.注意事项2.1.在使用google地图时须先导入google地图的js 2.2在正式的项目应用中须要申请一个专有的key才能正常使用， 申请的地址为：2.3本文档为入门使用文档。 想更深入的学习使用请参考google官方api。参考地址： 3.基础知识3.1.google地图的hello world. Google Maps JavaScript API Example /加载google地图API function initialize() if (G

5、BrowserIsCompatible() /判断当前浏览器是否支持google地图 var map= new GMap2(document.getElementById(map_canvas); /生成map对象,初始化地图 map.setCenter(new GLatLng(39.9493, 116.3975), 13); /设置地图显示的中心点和缩放级别 /加入onunload事件,防止内存泄漏的实用工具函数 /地图显示层 即使在此简单的示例中，也需要注意五点：3.1.1 使用 script 标签包含 Google 地图 API JavaScript。3.1.2 创建名为“map_can

6、vas”的 div 元素来包含地图。3.1.3 编写 JavaScript 函数创建“map”对象。3.1.4 将地图的中心设置为指定的地理点。3.1.5 从 body 标签的 onLoad 事件初始化地图对象。3.2.加载 Google 地图 API 3.3.地图 DOM 元素3.4.GMap2 - 基本对象var map= new GMap2(document.getElementById(map_canvas);构造函数说明GMap2(container, opts?)在通常是一个 DIV 元素的指定 HTML container 内创建新地图。您也可以通过 opts 参数传递 GMap

7、2Options 类型的可选参数。3.5.初始化地图map.setCenter(new GLatLng(39.9493, 116.3975), 13);3.6.加载地图3.7.经度和纬度var myGeographicCoordinates= new GLatLng(myLatitude, myLongitude)下面的示例使用 getBounds() 返回当前视口，然后在地图上的这些边界内随机放置 10 个标记：function initialize() var map= new GMap2(document.getElementById(map_canvas); map.setCenter

8、(new GLatLng(39.9493, 116.3975), 13); / Add 10 markers to the map at random locations var bounds= map.getBounds(); var southWest= bounds.getSouthWest(); var northEast= bounds.getNorthEast(); var lngSpan= northEast.lng() - southWest.lng(); var latSpan= northEast.lat() - southWest.lat(); for (var i= 0

9、; i 10; i+) var point= new GLatLng(southWest.lat() + latSpan* Math.random(), southWest.lng() + lngSpan* Math.random(); map.addOverlay(new GMarker(point); 3.8.地图属性 G_NORMAL_MAP- 默认视图 G_SATELLITE_MAP - 显示 Google 地球卫星图像 G_HYBRID_MAP - 混合显示普通视图和卫星视图 G_DEFAULT_MAP_TYPES - 这三个类型的数组，在需要重复处理的情况下非常有用可以使用 GMa

10、p2 对象的 setMapType() 方法设置地图类型。例如，下面的代码将地图设置为使用 Google 地球的卫星视图： var map= new GMap2(document.getElementById(map_canvas); map.setMapType(G_SATELLITE_MAP);地图还包含对了解情况非常有用的大量属性。例如，要了解当前视口的尺寸，可使用 GMap2 对象的 getBounds() 方法来返回 GLatLngBounds 值。每个地图还包含一个“缩放级别”，用于定义当前视图的分辨率。在普通地图视图内，可以使用 0（最低缩放级别，在地图上可以看到整个世界）到 1

11、9（最高缩放级别，可以看到独立建筑物）之间的缩放级别。缩放级别因所查看地区而异，因为地球上某些地区的数据比其他地区更详细。在卫星视图中可以使用多达 20 个缩放级别。可以通过使用 GMap2 对象的 getZoom() 方法检索地图当前使用的缩放级别。3.9.地图交互您还可以通过编程与地图交互。GMap2 对象支持可以直接改变地图状态的大量方法。例如，setCenter()、panTo 和 zoomIn() 方法通过编程来操作地图，而不是通过用户交互来操作地图。下面的示例显示一个地图，等待两秒钟，然后平移到新中心点。panTo 方法将地图中心设置在指定点处。如果指定点位于地图的可见部分，则地图

12、会平稳地平移到该点，否则会跳至该点。var map= new GMap2(document.getElementById(map_canvas); map.setCenter(new GLatLng(39.9493, 116.3975), 13); window.setTimeout(function() map.panTo(new GLatLng(39.927, 116.407); , 1000);3.A.信息窗口GMap2 对象提供了 openInfoWindow() 方法，该方法将一个点和一个 HTML DOM 元素作为参数。HTML DOM 元素附加到信息窗口容器中，信息窗口的尖端会固

13、定在指定点上。GMap2 的 openInfoWindowHtml() 方法相似，但是它使用 HTML 字符串作为其第二个参数而不是 DOM 元素。要创建信息窗口，请调用 openInfoWindow 方法，并向其传递位置和要显示的 DOM 元素。下面的示例代码显示了一个信息窗口，该窗口锚定在地图中心，内容为一条简单消息“Hello, world”。var map= new GMap2(document.getElementById(map_canvas); map.setCenter(new GLatLng(39.9493, 116.3975), 13); map.openInfoWindo

14、w(map.getCenter(), document.createTextNode(Hello, world);4.事件4.1.事件监听器通过使用 GEvent 命名空间中的实用工具函数注册事件监听器，来处理 Google 地图 API 中的事件。每个地图 API 对象都导出大量已命名的事件。例如，GMap2 对象导出 click、dblclick 和 move 事件，以及其他许多事件。每个事件都在指定的环境下发生，并且可以传递标识环境的参数。例如，当用户在地图对象中移动鼠标时，会触发 mousemove 事件，并且该事件会传递鼠标所在地理位置的 GLatLng。有关 GMap2 事件及其生

15、成的参数的完整列表，请参见 GMap2.Events。注册用来获取这些事件的相关通知的监听器，请使用静态方法 GEvent.addListener()。该方法有三个参数，一个对象，一个待监听事件以及一个在指定事件发生时调用的函数。例如，每当用户点击地图时,下面的代码段都会显示警告:var map= new GMap2(document.getElementById(map); GEvent.addListener(map, moveend, function() var center= map.getCenter(); document.getElementById(message).inne

16、rHTML= center.toString(); ); map.setCenter(new GLatLng(39.9493, 116.3975), 13);4.2.将事件绑定到对象当您希望将事件监听器附加到对象的特定实例时，函数非常有用。如果您不希望这样，而是希望响应事件时对象的所有实例都调用某方法，可以使用 GEvent.bind()。在下面的示例中，MyApplication 的实例将地图事件与其成员方法绑定在一起，当触发事件时会修改类状态：function MyApplication() this.counter= 0; this.map= new GMap2(document.get

17、ElementById(map); this.map.setCenter(new GLatLng(39.9493, 116.3975), 13); GEvent.bind(this.map, click, this, this.onMapClick); MyApplication.prototype.onMapClick= function() this.counter+; alert(这是您第 + this.counter+ + 次点击 var application= new MyApplication();4.3.监听DOM事件Google 地图 API 事件模型创建并管理自己的自定义事

18、件。但是，DOM 也会根据当前使用的特定浏览器事件模型创建和调度自己的事件。如果您希望捕获并响应这些事件，Google 地图 API 提供的独立于浏览器的包装器可以监听和绑定 DOM 事件而不需要自定义代码。GEvent.addDomListener() 静态方法为 DOM 节点上的 DOM 事件注册事件处理程序。同样，GEvent.bindDom() 静态方法允许您为类实例上的 DOM 事件注册事件处理程序。4.4.删除事件监听器不再需要事件监听器时，应将其删除。甚至在事件只需触发一次的情况下，也可能需要删除。删除闭包内的匿名函数所定义的事件监听器可能很困难。但是，addListener()

19、、addDomListener()、bind() 和 bindDom() 函数会返回 GEventListener 句柄，可用来最终取消注册处理程序。下面的示例通过在地图上放置标记来响应点击。任何后续点击都可删除事件监听器。请注意，这会导致不再执行 removeOverlay() 代码。另请注意，您甚至可以从事件监听器自身内部删除事件监听器。function MyApplication() this.counter= 0; this.map= new GMap2(document.getElementById(map); this.map.setCenter(new GLatLng(39.94

20、93, 116.3975), 13); var myEventListener= GEvent.bind(this.map, click, this, function(overlay, latlng) if (this.counter= 0) if (latlng) this.map.addOverlay(new GMarker(latlng) this.counter+; else if (overlayinstanceof GMarker) this.removeOverlay(marker) else GEvent.removeListener(myEventListener); );

21、 function load() var application= new MyApplication(); 5.控件5.1.向地图添加控件可以使用 GMap2 方法 addControl() 向地图添加控件。例如，要将 Google 地图上显示的平移/缩放控件添加到您的地图中，您可以在您的地图初始化代码中添加下面这行语句：map.addControl(new GLargeMapControl();可以向地图添加多个控件。在本例中，我们添加内置 GSmallMapControl 和 GMapTypeControl 控件，它们分别可以平移/缩放地图以及切换“地图”与“卫星”这两种类型。在地图中添

22、加标准控件后，它们即刻完全生效。var map= new GMap2(document.getElementById(map); map.addControl(new GSmallMapControl(); map.addControl(new GMapTypeControl(); map.setCenter(new GLatLng(39.9493, 116.3975), 13);5.2.在地图上放置控件addControl 方法有第二个可选的参数 GControlPosition，可用于指定控件在地图上的位置。它可以是以下值之一，这些值分别指定要放置控件的地图某个角： G_ANCHOR_TO

23、P_RIGHT G_ANCHOR_TOP_LEFT G_ANCHOR_BOTTOM_RIGHT G_ANCHOR_BOTTOM_LEFT如果不包含此参数，则地图 API 会使用控件指定的默认位置。GControlPosition 还可以指定偏移量，来指示控件的放置位置与地图边界间隔多少像素。这些偏移量使用 GSize 对象指定。本示例会将 GMapTypeControl 添加到地图的右上角，填充为 10 个像素。双击地图上的任何位置可以删除该控件，将其放在地图的右下角。var map= new GMap2(document.getElementByIdmap_canvas); var mapT

24、ypeControl= new GMapTypeControl(); var topRight= new GControlPosition(G_ANCHOR_TOP_RIGHT, new GSize(10,10); var bottomRight= new GControlPosition(G_ANCHOR_BOTTOM_RIGHT, new GSize(10,10); map.addControl(mapTypeControl, topRight); GEvent.addListener(map, dblclick, function() map.removeControl(mapTypeC

25、ontrol); map.addControl(new GMapTypeControl(), bottomRight); ); map.addControl(new GSmallMapControl(); map.setCenter(new GLatLng(39.9493, 116.3975), 13);5.3.自定义地图控件Google 地图 API 还允许您通过子类化 GControl 来创建自定义地图控件。（您并没有在 JavaScript 中实现一个“子类化”对象，而是把这个对象的 prototype 指定为 GControl 对象的实例。）要创建可用的自定义控件，您需要实现在该类中定

26、义的至少两个方法：initialize() 和 getDefaultPosition()。initialize() 方法必须返回 DOM 元素，而 getDefaultPosition() 方法必须返回类型为 GControlPosition 的对象。所有自定义的地图控件中的 DOM 元素最终都应该添加到地图容器（也是 DOM 元素）中去，这个地图容器可以通过 GMap2 getContainer() 方法获得。在此示例中，我们创建一个简单的缩放控件，它具有文本链接，而不是标准 Google 地图缩放控件中使用的图形图标。/ 一个TextualZoomControl是GControl显示“放大

27、”的文本/ /和“缩小”按钮（而不是/谷歌地图中所使用的标志性按钮） / 首先定义的函数function TextualZoomControl() / 子类”的GControl，我们设置的原型对象/ / GControl对象的一个实例 TextualZoomControl.prototype= new GControl(); / 为每个按钮创建一个DIV和它们放置在一个容器/ / DIV这是作为我们的控制元素返回。我们的地图容器/添加到/ /控制和正确返回/ /位置 的地图类元素。 TextualZoomControl.prototype.initialize= function(map) var container= document.createElement(div); var zoomInDiv= docum