学习GoogleMaps自带实例多点测距尺

1、学习Google Maps自带实例 多点测距尺学习Google Maps自带实例：多点测距尺2010-05-28 11：16 Google Maps自带实例多点测距尺实现的功能就是可以根据用户标出的任意多点，从而返回计算得到的各个点之间的距离。也就是说，计算出了一条折线的长度-是在地理上的实际距离。实例代码如下所示：！DOCTYPE html PUBLIC-/W3C/DTD XHTML 1.0 Strict/ENhtml xmlns=xmlns：v=urn：schemas-microsoft-com：vmlhead meta http-equiv=content-typecontent=tex

2、t/html；charset=utf-8/title Google地图API示例-多点测距尺/title script src=type=text/javascript/script！-包含自定义控件的源文件。引入GRulerControl控件。-script src=ruler.jstype=text/javascript/script script type=text/javascript/！CDATA/Copyright 2007 Google Inc./All Rights Reserved./*这个例子演示了Google地图API的以下功能：*使用自定义控件*注意：为了在IE6中正常

3、显示折线，必须在网页的HTML标签中加上：*html xmlns：v=urn：schemas-microsoft-com：vml*author haogang*/*创建地图控件，并添加一些基本的控件*/function load()if(GBrowserIsCompatible()var map=new GMap2(document.getElementById(map)；/给地图添加内置的控件，分别为：/平移及缩放控件(左上角)、比例尺控件(左下角)、缩略图控件(右下角)map.addControl(new GLargeMapControl()；map.addControl(new GSca

4、leControl()；map.addControl(new GOverviewMapControl()；/添加自定义的控件map.addControl(new GRulerControl()；/将视图移到自己定义的位置map.setCenter(new GLatLng(43.832,125.322),14)；/script/head body onload=load()onunload=GUnload()div id=introstyle=width：700px；p b提示：/b单击地图添加多个标记，设定您的路径。您还可以随意地修改现有路径。试试看在已有的标记上单击，或者拖拽它们！/p/di

5、v div id=mapstyle=width：700px；height：500px；/div/body/html运行代码后的地图视图如图所示：从代码可以看到似乎实现比较容易，不过就是向创建的地图中添加一系列控件：var map=new GMap2(document.getElementById(map)；/给地图添加内置的控件，分别为：/平移及缩放控件(左上角)、比例尺控件(左下角)、缩略图控件(右下角)map.addControl(new GLargeMapControl()；map.addControl(new GScaleControl()；map.addControl(new GOv

6、erviewMapControl()；/添加自定义的控件map.addControl(new GRulerControl()；/将视图移到自己定义的位置map.setCenter(new GLatLng(43.832,125.322),14)；GLargeMapControl、GScaleControl、GOverviewMapControl、GRulerControl，其中，GRulerControl控件是一个自定义控件。实际上，这个实例的经典之处在于一个GRulerControl控件的实现，可以从引入的ruler.js文件中看到实现过程，代码如下：/*这个例子演示了Google地图API的

7、以下功能：*可拖拽的标记*在地图上叠加折线*计算地理距离*事件处理(单击、拖拽)*信息窗口*利用链表维护各种对象*自定义控件*注意：为了在IE6中正常显示折线，必须在网页的HTML标签中加上：*html xmlns：v=urn：schemas-microsoft-com：vml*author haogang*/*本示例用一个双向链表维护用户设定的标记，能够容易的实现标记的遍历和删除*每个链表结点m有如下字段：*m.prev前驱标记*m.next后继标记*m.segPrev连接本标记与前驱标记的线段*m.segNext连接本标记与后继标记的线段*/function GRulerControl()

8、var me=this；/可国际化的字符串me.RESET_BUTTON_TITLE_=清除所有测距标记；me.ENABLE_BUTTON_TITLE_=添加测距标记已启用，单击这里禁用；me.DISABLE_BUTTON_TITLE_=添加测距标记已禁用，单击这里启用；me.DELETE_BUTTON_TITLE_=删除；me.RESET_BUTTON_IMAGE_=images/ruler_clear.png；me.ENABLE_BUTTON_IMAGE_=images/ruler_enabled.png；me.DISABLE_BUTTON_IMAGE_=images/ruler_disa

9、bled.png；me.BACKGROUND_IMAGE_=images/ruler_background.pngme.KILOMETER_=公里；me.METER_=米；GRulerCtotype=new GControl()；/*初始化标尺控件*/GRulerCtotype.initialize=function(map)var me=this；var container=document.createElement(div)；me.setButtonStyle_(container)；/启用/禁用按钮var btnEnable=document.c

10、reateElement(img)；btnEnable.width=btnEnable.height=19；GEvent.addDomListener(btnEnable,click,function()me.setEnabled(！me.isEnabled()；)；container.appendChild(btnEnable)；/重置按钮var btnReset=document.createElement(img)；btnReset.width=btnReset.height=19；btnReset.src=me.RESET_BUTTON_IMAGE_；btnReset.title=me

11、.RESET_BUTTON_TITLE_；GEvent.addDomListener(btnReset,click,function()me.reset()；)；container.appendChild(btnReset)；/距离标签var txtInfo=document.createElement(div)；txtInfo.style.font=small Arial；txtInfo.style.fontWeight=bold；txtInfo.style.fontSize=9pt；txtInfo.style.width=82px；container.appendChild(txtInfo

12、)；/初始化内部变量map.rulerControl_=me；me.map_=map；me.head_=new Object()；me.tail_=new Object()；me.head_.next_=me.tail_；me.tail_.prev_=me.head_；me.btnEnable_=btnEnable；me.btnReset_=btnReset；me.txtInfo_=txtInfo；me.setEnabled(true)；map.getContainer().appendChild(container)；return container；/*设置控件的格式*/GRulerCon

13、totype.setButtonStyle_=function(button)button.style.backgroundImage=url(+this.BACKGROUND_IMAGE_+)；button.style.font=small Arial；button.style.border=1px solid#888888；button.style.padding=4px；button.style.textAlign=right；button.style.cursor=pointer；/*用恰当的格式表示距离*/GRulerCtotype.formatD

14、istance_=function(len)var me=this；len=Math.round(len)；if(len=1000)return len+me.METER_；else if(len=1000000)return len/1000+me.KILOMETER_；return Math.round(len/1000)+me.KILOMETER_；/*格式化角度为字符串*/GRulerCtotype.formatDegree_=function(value)value=Math.abs(value)；var v1=Math.floor(value)；var v2=M

15、ath.floor(value-v1)*60)；var v3=Math.round(value-v1)*3600%60)；return v1+v2+v3+；/*格式化经纬度为字符串*/GRulerCtotype.formatLatLng_=function(pt)var me=this；var latName,lngName；var lat=pt.lat()；var lng=pt.lng()；latName=lat=0?北纬：南纬；lngName=lng=0?东经：西经；return lngName+me.formatDegree_(lng)+，+latName+me.fo

16、rmatDegree_(lat)；/*返回控件的默认位置*/GRulerCtotype.getDefaultPosition=function()return new GControlPosition(G_ANCHOR_TOP_RIGHT,new GSize(8,8)；/*返回控件是否已启用*/GRulerCtotype.isEnabled=function()return this.enabled_；/*设置控件的启用/禁用状态*/GRulerCtotype.setEnabled=function(value)var me=this

17、；if(value=me.enabled_)return；me.enabled_=value；if(me.enabled_)me.mapClickHandle_=GEvent.addListener(me.map_,click,me.onMapClick_)；me.txtInfo_.style.display=block；me.btnReset_.style.display=inline；me.btnEnable_.src=me.ENABLE_BUTTON_IMAGE_；me.btnEnable_.title=me.ENABLE_BUTTON_TITLE_；me.updateDistance_

18、()；elseGEvent.removeListener(me.mapClickHandle_)；me.txtInfo_.style.display=none；me.btnReset_.style.display=none；me.btnEnable_.src=me.DISABLE_BUTTON_IMAGE_；me.btnEnable_.title=me.DISABLE_BUTTON_TITLE_；/*事件处理函数：当用户单击地图时，要在该位置添加一个标记*/GRulerCtotype.onMapClick_=function(marker,latlng)var me=thi

19、s.rulerControl_；/如果用户单击的是标记，不再这里处理if(marker)return；/创建标记，并添加到链表中var newMarker=new GMarker(latlng,draggable：true)；var pos=me.tail_.prev_；newMarker.prev_=pos；newMarker.next_=pos.next_；pos.next_.prev_=newMarker；pos.next_=newMarker；/为标记添加事件处理函数：拖拽标记时要更新连接线段和距离GEvent.addListener(newMarker,dragend,functio

20、n()me.map_.closeInfoWindow()；me.updateSegments_(newMarker)；me.updateDistance_()；)；/为标记添加事件处理函数：单击标记时要显示信息窗口GEvent.addListener(newMarker,click,function()newMarker.openInfoWindow(me.createInfoWindow_(newMarker)；)；/将创建的标记添加到地图中me.map_.addOverlay(newMarker)；if(newMarker.prev_！=me.head_)/如果这不是第一个标记，则创建连接

21、到上一个标记的线段，并显示在地图中var segment=newMarker.prev_.getLatLng(),latlng；newMarker.segPrev_=new GPolyline(segment)；newMarker.prev_.segNext_=newMarker.segPrev_；me.map_.addOverlay(newMarker.segPrev_)；/更新距离显示me.updateDistance_()；/*统计总距离，并显示在网页中*/GRulerCtotype.updateDistance_=function()var me=this；var

22、len=me.getDistance()；/结果显示在网页中me.txtInfo_.innerHTML=me.formatDistance_(len)；/*遍历链表，统计总距离*/GRulerCtotype.getDistance=function()var me=this；var len=0；/周游链表，累计相邻两个标记间的距离for(var m=me.head_；m！=me.tail_；m=m.next_)if(m.prev_&m.prev_.getLatLng)len+=m.prev_.getLatLng().distanceFrom(m.getLatLng()；re

23、turn len；/*清除所有标记，初始化链表*/GRulerCtotype.reset=function()var me=this；for(var m=me.head_.next_；m！=me.tail_；m=m.next_)me.map_.removeOverlay(m)；if(m.segNext_)me.map_.removeOverlay(m.segNext_)；me.head_=new Object()；me.tail_=new Object()；me.head_.next_=me.tail_；me.tail_.prev_=me.head_；me.updateDi

24、stance_()；/*事件处理函数：当用户拖拽标记、标记坐标改变时被调用，这里要更新与该标记连接的线段*paramGMarkermarker被拖拽的标记*/GRulerCtotype.updateSegments_=function(marker)var me=this；var segment；/更新连接前驱的线段if(marker.segPrev_&marker.prev_.getLatLng)/从地图上删除旧的线段me.map_.removeOverlay(marker.segPrev_)；/根据标记的当前坐标构造新的线段，并更新链表结点的相关字段segment=ma

25、rker.prev_.getLatLng(),marker.getLatLng()；marker.segPrev_=new GPolyline(segment)；marker.prev_.segNext_=marker.segPrev_；/将新线段添加到地图中me.map_.addOverlay(marker.segPrev_)；/更新连接后继的线段，与上类似if(marker.segNext_&marker.next_.getLatLng)me.map_.removeOverlay(marker.segNext_)；segment=marker.getLatLng(),marker.next

26、_.getLatLng()；marker.segNext_=new GPolyline(segment)；marker.next_.segPrev_=marker.segNext_；me.map_.addOverlay(marker.segNext_)；/*为信息窗口创建DOM对象，包括标记的坐标和删除按钮*paramGMarkermarker对应的标记*/GRulerCtotype.createInfoWindow_=function(marker)var me=this；/为气泡提示窗口创建动态DOM对象，这里我们用DIV标签var div=document.creat

27、eElement(div)；div.style.fontSize=10.5pt；div.style.width=250px；div.appendChild(document.createTextNode(me.formatLatLng_(marker.getLatLng()；var hr=document.createElement(hr)；hr.style.border=solid 1px#cccccc；div.appendChild(hr)；/创建删除按钮var lnk=document.createElement(div)；lnk.innerHTML=me.DELETE_BUTTON_T

28、ITLE_；lnk.style.color=#0000cc；lnk.style.cursor=pointer；lnk.style.textDecoration=underline；/为删除按钮添加事件处理：调用removePoint()并重新计算距离lnk.onclick=function()me.map_.closeInfoWindow()；me.removePoint_(marker)；me.updateDistance_()；div.appendChild(lnk)；/当用户关闭信息窗口时Google地图API会自动释放该对象return div；/*事件处理函数：当用户选择删除标记时被

29、调用，这里要删除与该标记连接的线段*paramGMarkermarker要删除的标记*/GRulerCtotype.removePoint_=function(marker)var me=this；/先从地图上删除该标记me.map_.removeOverlay(marker)；/对于中间结点，还要把它的前驱和后继用线段连接起来if(marker.prev_.getLatLng&marker.next_.getLatLng)var segment=marker.prev_.getLatLng(),marker.next_.getLatLng()；var polyline=n

30、ew GPolyline(segment)；marker.prev_.segNext_=polyline；marker.next_.segPrev_=polyline；me.map_.addOverlay(polyline)；marker.prev_.next_=marker.next_；marker.next_.prev_=marker.prev_；if(marker.segPrev_)me.map_.removeOverlay(marker.segPrev_)；if(marker.segNext_)me.map_.removeOverlay(marker.segNext_)；我们主要是学实

31、例的实现思想，只要掌握了它的设计思想，才能够编写出我们需要的更好的Google Maps控件。看一下GRulerControl控件的结构，将GRulerControl控件类的属性和方法拿出来：function GRulerControl()var me=this；/可国际化的字符串me.RESET_BUTTON_TITLE_=清除所有测距标记；me.ENABLE_BUTTON_TITLE_=添加测距标记已启用，单击这里禁用；me.DISABLE_BUTTON_TITLE_=添加测距标记已禁用，单击这里启用；me.DELETE_BUTTON_TITLE_=删除；me.RESET_BUTTON_I

32、MAGE_=images/ruler_clear.png；me.ENABLE_BUTTON_IMAGE_=images/ruler_enabled.png；me.DISABLE_BUTTON_IMAGE_=images/ruler_disabled.png；me.BACKGROUND_IMAGE_=images/ruler_background.pngme.KILOMETER_=公里；me.METER_=米；GRulerCtotype=new GControl()；/编写的任何控件应该实现GControl控件接口(或者说继承自GControl类)。/GRulerContro

33、l控件的可用行为(类的成员方法)GRulerCtotype.initialize=function(map).；/初始化标尺控件，主要是初始化标尺内具有的其它部件，以及定义链表。GRulerCtotype.setButtonStyle_=function(button).；/设置标尺上按钮的样式，按钮为图片按钮。GRulerCtotype.formatDistance_=function(len)(.)；/格式化数据。因为获取到的经纬度坐标值都是精度很高的浮点数，计算转化为容易读取的常规距离数值，例如单位是公里。GRulerCtotype.formatDegree_=function(value).；/格式化角度为字符串。GRulerCtotype.formatLatLng_=function(pt)