《学习Google Maps自带实例 多点测距尺》由会员分享，可在线阅读，更多相关《学习Google Maps自带实例 多点测距尺（5页珍藏版）》请在金锄头文库上搜索。
1、学习Google Maps 自带实例 多点测距尺 学习Google Maps自带实例多点测距尺2010-05-28 1116 Google Maps自带实例多点测距尺实现的功能就是可以根据用户标出的任意多点从而返回计算得到的各个点之间的距离。也就是说计算出了一条折线的长度-是在地理上的 实际距离。 实例代码如下所示 DOCTYPE html PUBLIC-/W3C/DTD XHTML 1.0 Strict/EN html xmlnsxmlnsvurnschemas-microsoft-comvml head meta http-equivcontent-typecontenttext/html
2、charsetutf-8/ title Google地图API示例-多点测距尺/title script srctypetext/javascript/script -包含自定义控件的源文件。引入GRulerControl控件。 - script srcruler.jstypetext/javascript/script script typetext/javascript /CDATA /Copyright 2007 Google Inc. /All Rights Reserved. / 这个例子演示了Google 地图API的以下功能 使用自定义控件 注意为了在IE6 中正常显示折线必须在
3、网页的HTML标签中加上 html xmlnsvurnschemas-microsoft-comvml author haogang / / 创建地图控件并添加一些基本的控件 / function load ifGBrowserIsCompatible var mapnew GMap2document.getElementByIdmap /给地图添加内置的控件分别为 /平移及缩放控件左上角、比例尺控件左下角、 缩略图控件右下角 map.addControlnew GLargeMapControl map.addControlnew GScaleControl map.addControlnew
4、 GOverviewMapControl /添加自定 义的控件 map.addControlnew GRulerControl /将视图移到自己定义的位置 map.setCenternew GLatLng43.832125.32214 / /script /head body onloadloadonunloadGUnload div idintrostylewidth700px p b提示/b单击地图添加多个 标记设定您的路径。您 还可以随意地修改现有路径。试试看在已有的标记上单击或者拖拽它们/p /div div idmapstylewidth700pxheight500px/div /b
5、ody /html 运行代码后的地图视图如图所示 从代码可以看到似乎实现比较容易不过就是向创建的地图中添加一系列控件 var mapnew GMap2document.getElementByIdmap /给地图添加内置的控件分别为 /平移及缩放控件左上角、比例尺控件左下角、缩略图控件右下角 map.addControlnew GLargeMapControl map.addControlnew GScaleControl map.addControlnew GOverviewMapControl /添加自定义的控件 map.addControlnew GRulerControl /将视图移到
6、自己定义的位置 map.setCenternew GLatLng43.832125.32214 GLargeMapControl、GScaleControl、GOverviewMapControl、GRulerControl其中GRulerControl控件是一个自定义控件。 实际上这个实例的经典之处在于一个GRulerControl控件的实现可以从引入的ruler.js文件中看到实现过程代码如下 / 这个例子演示了Google 地图 API的以下功能 可拖拽的标记 在地图上叠加折线 计算地理距离 事件处理单击、拖拽 信息窗口 利用链表维护各种对象 自定义控件 注意为了在IE6 中正常显示折
7、线必须在网页的HTML标签 中加上 html xmlnsvurnschemas-microsoft-comvml author haogang / / 本示例用一个双向链表维护用户设定的标记能够容易的实现标记的遍历和删除 每个链表结点m 有如下字段 m.prev前驱标记 m.next后继标记 m.segPrev连接本标记与前驱标记的线段 m.segNext连接本标记与后继标记的线段 / function GRulerControl var methis /可国际化的字符串 me.RESET_BUTTON_TITLE_清除所有测距标记 me.ENABLE_BUTTON_TITLE_添加测距标记已
8、启用单击这里禁用 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_disabled.png me.BACKGROUND_IMAGE_images/ruler_background.png me.KILOMETER_公里 me.METER_米 GRulerC
9、ontrol.prototypenew GControl / 初始化标尺控件 / GRulerControl.prototype.initializefunctionmap var methis var containerdocument.createElementdiv me.setButtonStyle_container /启用/ 禁用按钮 var btnEnabledocument.createElementimg btnEnable.widthbtnEnable.height19 GEvent.addDomListenerbtnEnableclick function me.setE
10、nabledme.isEnabled container.appendChildbtnEnable /重置按钮 var btnResetdocument.createElementimg btnReset.widthbtnReset.height19 btnReset.srcme.RESET_BUTTON_IMAGE_ btnReset.titleme.RESET_BUTTON_TITLE_ GEvent.addDomListenerbtnResetclick function me.reset container.appendChildbtnReset /距离标签 var txtInfodo
11、cument.createElementdiv txtInfo.style.fontsmall Arial txtInfo.style.fontWeightbold txtInfo.style.fontSize9pt txtInfo.style.width82px container.appendChildtxtInfo /初始化内部变量 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_b
12、tnEnable me.btnReset_btnReset me.txtInfo_txtInfo me.setEnabledtrue map.getContainer.appendChildcontainer return container / 设置控件的格式 / GRulerControl.prototype.setButtonStyle_functionbutton button.style.backgroundImageurlthis.BACKGROUND_IMAGE_ button.style.fontsmall Arial button.style.border1px solid8
13、88888 button.style.padding4px button.style.textAlignright button.style.cursorpointer / 用恰当的格式表示距离 / GRulerControl.prototype.formatDistance_functionlen var methis lenMath.roundlen iflen1000 return lenme.METER_ else iflen1000000 return len/1000me.KILOMETER_ return Math.roundlen/1000me.KILOMETER_ / 格式化
14、角度为字符串 / GRulerControl.prototype.formatDegree_functionvalue valueMath.absvalue var v1Math.floorvalue var v2Math.floorvalue-v160 var v3Math.roundvalue-v1360060 return v1v2v3 / 格式化 经纬度为字符串 / GRulerControl.prototype.formatLatLng_functionpt var methis var latNamelngName var latpt.lat var lngpt.lng latNa
15、melat0北纬南纬 lngNamelng0东经西经 return lngNameme.formatDegree_lng latNameme.formatDegree_lat / 返回控件的默认位置 / GRulerControl.prototype.getDefaultPositionfunction return new GControlPositionG_ANCHOR_TOP_RIGHTnew GSize88 / 返回控件是否已启用 / GRulerControl.prototype.isEnabledfunction return this.enabled_ / 设置控件的启用/禁用状
16、态 / GRulerControl.prototype.setEnabledfunctionvalue var methis ifvalueme.enabled_ return me.enabled_value ifme.enabled_ me.mapClickHandle_GEvent.addListenerme.map_clickme.onMapClick_ me.txtInfo_.style.displayblock me.btnReset_.style.displayinline me.btnEnable_.srcme.ENABLE_BUTTON_IMAGE_ me.btnEnable_.titleme.ENABLE_BUTTON_TITLE_ me.updateDistance_ else GEvent.removeListenerme.mapClickHandle_ me.txtInfo_.style.displaynone me.btnReset_.style
