学习Google Maps自带实例 多点测距尺.doc

学习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/htmlcharsetutf-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中正常显示折线必须在网页的HTML标签中加上 html xmlnsvurnschemas-microsoft-comvml author haogang / / 创建地图控件并添加一些基本的控件 / function load ifGBrowserIsCompatible var mapnew GMap2document.getElementByIdmap //给地图添加内置的控件分别为 //平移及缩放控件左上角、比例尺控件左下角、缩略图控件右下角 map.addControlnew GLargeMapControl map.addControlnew GScaleControl map.addControlnew GOverviewMapControl //添加自定义的控件 map.addControlnew GRulerControl //将视图移到自己定义的位置 map.setCenternew GLatLng43.832125.32214 // /script /head body onloadloadonunloadGUnload div idintrostylewidth700px p b提示/b单击地图添加多个标记设定您的路径。您还可以随意地修改现有路径。试试看在已有的标记上单击或者拖拽它们/p /div div idmapstylewidth700pxheight500px/div /body /html 运行代码后的地图视图如图所示 从代码可以看到似乎实现比较容易不过就是向创建的地图中添加一系列控件 var mapnew GMap2document.getElementByIdmap //给地图添加内置的控件分别为 //平移及缩放控件左上角、比例尺控件左下角、缩略图控件右下角 map.addControlnew GLargeMapControl map.addControlnew GScaleControl map.addControlnew GOverviewMapControl //添加自定义的控件 map.addControlnew GRulerControl //将视图移到自己定义的位置 map.setCenternew GLatLng43.832125.32214 GLargeMapControl、GScaleControl、GOverviewMapControl、GRulerControl其中GRulerControl控件是一个自定义控件。 实际上这个实例的经典之处在于一个GRulerControl控件的实现可以从引入的ruler.js文件中看到实现过程代码如下 / 这个例子演示了Google地图API的以下功能 可拖拽的标记 在地图上叠加折线 计算地理距离 事件处理单击、拖拽 信息窗口 利用链表维护各种对象 自定义控件 注意为了在IE6中正常显示折线必须在网页的HTML标签中加上 html xmlnsvurnschemas-microsoft-comvml author haogang / / 本示例用一个双向链表维护用户设定的标记能够容易的实现标记的遍历和删除 每个链表结点m有如下字段 m.prev前驱标记 m.next后继标记 m.segPrev连接本标记与前驱标记的线段 m.segNext连接本标记与后继标记的