监一－ 。ｒ ＦＯＲＵＭ ＯＦ ＥＸＰＥＲＴＳ 一 － ．， 。 ． ， 。：。． 百度地图ＡＰＩ应用数例 朱根荣 摘要：使用地图ＡＰＩ获取地理坐标、获取路径或区域边界的地理坐标数据、获取公交、自驾线 路信息、在地图上添加标注、实现图文结合、互动。 关键词：百度地图：ＡＰＩ应用 百度地冈ＡＰＩ免费开放，无需申请ｋｅｙ（ｖ１．５以前），在线 调用方便，开发文档详尽，广为网站应用。文中以介绍秀洲党 校相关地理信息为例，对百度地图ＡＰＩ在网站建设中的应用作 了一些探讨。 １ 图文交互需求 在用文字介绍地理信息的同时，配之于地图，当用户在文 字区将光标移到某个地理要素（地名、道路、区域）名称上时， 在地图上显示相应的标注，光标离开即隐藏。一可给人于动 感，二可对相应地理要素形成直观的印象。 如介绍秀洲党校地理位置的文字为“秀洲党校位于嘉兴 老城区中心，南临市区主十道中山路，西傍传统商业街建国 路……”。希望是： （１）打开该网页时，以醒目的标记标注“秀洲党校”的位 置，当光标移到“秀洲党校”文字上时，标注产生一动画效果 ｆ如闪烁、变色、淡入淡出等）。 （２）光标移到“嘉兴老城区”几字上时，显示嘉兴老城区 区域．从而凸显党校在嘉兴市区的位置。光标离开时，隐藏该 区域。 （３）当光标移到“中山路”或“建国路”的等文字上时， 分别显示中山路或建国路，离开时隐藏之。 ２ 准备工作 要实现上述功能．首先要在网页上添加地图；其次需获取 地址、道路、区域的地理数据；ｉ是将地址、道路、区域等在 地图上标注出来；四是建立文字与地图的相互联系，形成图文 互动。 ２．１ 在网页上添加地图 （１）将百度地图ＡＰｌ导入网页： ＜ｓｃｒｉｐｔ ｓｒｃ＝ ｈｔｔｐ：／／ａｐｉ．ｍａｐ．ｂａｉｄｕ．ｃｏｍ／ａｐｉ？ｖ＝１．４”ｔｙｐｅ＝” ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ”＞＜／ｓｃｒｉｐｔ＞ （２）布局网页。采用两列布局，左列显示文字，右列显示 地图，两列均用＜ｄｉｖ＞元素定位，其ｉｄ属性分别为ｄｉｖＴｅｘｔ， ｄｉｖＭａｐ。 （３）创建并加载地图： ｖａｔ ｍａｐ； ／／全局变量，表示将创建的地图实例 ￥（ｆｕｎｃｔｉｏｎ０｛ＩｏａｄＭａｐ０；｝）； ／／网页打开时加载地图 ｆｕｎｃｔｉｏｎ ＩｏａｄＭａｐ０｛ ｍａｐ＝ｎｅｗ Ｂｍａｐ．Ｍａｐ（“ｄｉｖＭａｐ”） ｍａｐ．ｃｅｎｔｅｒＡｎｄＺｏｏｍ（ｄａｔａｓ［０］，１ ４）： ） 函数ｌｏａｄＭａｐ ０为网页＜ｂｏｄｙ＞￣素ｌｏａｄ事件的处理函数， 使网页一打开即加载地图。甬数中第一行，创建一个地图实 例，并显示在ｉｄ为ｄｉｖＭａｐ中＜ｄｉｖ＞元素中；第二行调整地图的 中心点和放大级数，其中ｄａｔａｓ［Ｏ】为秀洲党校的地理坐标点 （后面说明），１４为缩放级数，ＡＰＩ规定此值在３—１８之间。 ２＿２获取地址的地理坐标 已知地名，且百度地图数据库中有此地名，可用地址解析 类Ｇｅｏｅｏｄｅ的ｇｅｔＰｏｉｎｔ ０方法，其原型为：ｇｅｔＰｏｉｎｔ（ａｄｄｒｅｓｓ， ｃａｌｌｂａｃｋ，ｃｉｔｙ１。在已创建地图实例ｍａｐ的情况下，可通过以下 代码，在网页上显示某地址的标注及地理坐标（经、纬度）： ｖａｒ ｇｅｏ＝ｎｅｗ ＢＭａｐ．Ｇｅｏｃｏｄｅｒ０； ｇｅｏ．ｇｅｔＰｏｉｎｔ（“地址ＩＩｔｐｏｉｎｔＧｏｔ，＂嘉兴市”）： ｆｕｎｃｔｉｏｎ ｐ０ｊｎｔＧＯｔ《ｐｏｊｎｔ）｛ ｖａｒ ｓ ｏｕｔｐｕｔ＝Ｓ（“＃ｄｉｖＲｅｓｕｌｔ“）： ｉｆ（ｐｏｉｎｔ）｛ ｍａｐ．ｃｅｎｔｅｒＡｎｄＺｏｏｍ（ｐｏｉｎｔ １ ６） ｍａｐ．ａｄｄＯｖｅｒｌａｙ（ｎｅｗ ＢＭａｐ．Ｍａｒｋｅｒ（ｐｏｉｎｔ））； ／／添加该地址的标注 ｓ＝”（＿＿＋ （ｐｏｉｎｔ．Ｉｎｇ）．ｔｏＦｉｘｅｄ（６）＋“，”＋ （ｐｏｉｎｔ．１ａｔ）．ｔｏＦｉｘｅｄ（６）＋”）“： ／／该地址的经、纬度 ｏｕｔｐｕｔ．ｈｔｍＩ（ｓ）： ）ｅｌｓｅ｛ ｏｕｔｐｕｔ．ｈｔｍ 没有找到！”） ） ） 脑螭程２建０巧１３与．鲡２３挚 ２９ Ｉ】 … ’ ’’ 实用第一 智慧密集 ．． 代码中的“ｄｉｖＲｅｓｕｌｔ”为网页上以此为ｉｄ的一个＜ｄｉｖ＞元素。 如果上述方法无法获取，则可用单击取点法。先为地图实 例添加鼠标单击事件侦听器： ｍａｐ ａｄｄＥｖｅｎｔＬｉｓｔｅｎｅｒ（“ｃｌｉｃｋ”，ｓｈｏｗＰｏｉｎｔ）；／／添力口鼠标单 ∥击事件侦听器 ｍａｐ．ｓｅｔＤｅｆａｕＩｔＣｕｒｓ０ ｃｒｏｓｓｈａｉｒ”） ：／／设置地图上 ，／的光标样式为十字 然后，在事件处理函数中，借助于单击事件参数，获取单 击位置的地理坐标点： ｆｕｎｃｔｉｏｎ ｓｈｏｗＰｏｉｎｔ（ｅ）｛ ｖａｒ ｓ＝“（“＋ （ｅ ｐｏｉｎｔ．Ｉｎｇ）．ｔｏＦｉｘｅｄ（６）＋“．“＋ （ｅ．ｐｏｉｎｔ．１ａｔ）．ｔｏＦｉｘｅｄ（６）＋“）“： ∥单击位置的经、纬度 ￥《”＃ｄｉｖＲｅｓｕｌｔ“）．ｈｔｍｌ（ｓ）； ） ２．３获取路径的地理坐标数组 如果所需路径是一条道路，则可在该道路上取两点ｆ地理 坐标点１，用获取驾车路线方案的类ＤｒｉｖｉｎｇＲｏｕｔｅ的Ｓｅ￣ＦＣｈ方法 获取： 如： ｖａｒ ｄｒｖ＝ｎｅｗ ＢＭａｐ．ＤｒｉｖｉｎｇＲｏｕｔｅ（ｍａｐ，｛ｏｎＳｅａｒｃｈＣｏｍ ｐｌｅｔｅ：ｇｅｔＰｏｉｎｔｓ＂： ｄｒｖ．ｓｅａｒｃｈ（ｓｔａｒｔ．ｅｎｄ）； ∥以下是搜索完成的回调函数，参数ｒｅｓｕｌｔｓ是搜索结果 ｆｕｎｃｔｉｏｎ ｇｅｔＰＯｉｎｔｓ（ｒｅｓｕｌｔｓ）｛ ｖａｒ ｐｌａｎ＝ｒｅｓｕｌｔｓ ｇｅｔＰｌａｎ（Ｏ）；／厥第一个行车方案 ｖａ ｒ ｒｏｕｔｅ＝ｐｌａｎ．ｇｅｔＲｏｕｔｅ（Ｏ）；脓该方案中的第一条线路 ｖａｒ ａｒｒ＝ｒｏｕｔｅ．ｇｅｔＰａｔｈＯ；／／获取该线路的地理坐标点数组 ∥在地图上画出该线路 ｍａｐ．ａｄｄＯｖｅｒｌａｙ（ｎｅｗ ＢＭａｐ．Ｐｏｌｙｌｉｎｅ（ａｒｒ， ｛ｓｔｒｏｋｅＣｏｌｏｒ： ＃Ｏ０３０ｆｆ＂，ｓｔｒｏｋｅＯｐａｃｉｔｙ：０．５ ｓｔｒｏｋｅＷｅｉｇｈｔ：４，ｅｎａｂｌｅＭａｓｓＣｌｅａｒ：ｔｒｕｅ｝））； ｍａｐ．ｓｅｔＶｉｅｗｐｏｒｔ（ａｒｒ）； ／／调整视野 ∥在网页上显示该线路上各点的经、纬度 ｖａｒ Ｓ＝ ‘ ｆｏｒ（ｖａｒ ｉ＝Ｏ；ｉ＜ａｒｒ．１ｅｎｇｔｈ；ｉ＋＋）｛ ｓ＋：”＜／ｂｒ＞（ ＋ａｒｒ［ｉ］．Ｉｎｇ＋”， ＋ａｒｒ［ｉ］．１ａｔ＋ ）“： ｝ ￥（“＃ｄｉｖＲｅｓｕｌｔ“）．ｈｔｍｌ（ｓ）； ｝ 复制所输出的各点经、纬度，粘贴到ｉＳ文件中，即可组成 该路径的坐标点数组。如果所求路径不是一条道路，或上述方 法所获取的路径不是所求的，那只有用原始的单击取点法，在 路径的每个转折处单击，获取每个转折点的地理坐标。 ２．４获取区域边界的地理坐标点数组 如果所求区域是一个县级或以上的行政区域．则可用行政 区域边界类Ｂｏｕｎｄａｒｙ的ｇｅｔ ０方法。如： ｆｕｎｃｔｉｏｎ ｇｅｔＡｒｅａ（ｎａｍｅ）｛ ３０电 嚣与雏 ∥参数ｎａｍｅ为行政区域的名称 ｌｆ（！ｎａｍｅ）ｒｅｔｕｒｎ； ｖａｒ ｂｏｕｎｄ＝ｎｅｗ ＢＭａｐ．Ｂｏｕｎｄａｒｙ（）； ｂｏｕｎｄ．ｇｅｔ（ｎａｍｅ，ｂｏｕｎｄＧｏｔ）； ／／获取行政区域边界 ） ／／以下是ｇｅｔ方法的回调函数，参数ｒｅｓｕｌｔｓ为行政区域边 ，／界坐标点数组 ｆｕｎｃｔｉｏｎ ｂｏｕｎｄＧｏｔ（ｒｅｓｕＩｔｓ）｛ ｖａｒ ｒｅｓｕｌｔ＝ｄｏｃｕｍｅｎｔ．ｇｅｔＥｌｅｍｅｎｔＢｙｌｄ（“ｄｉｖＲｅｓｕｌｔ“）： ｒｅｓｕｌｔ．ｉｎｎｅｒＨＴＭ Ｌ＝“ ： 讦（！ｒｅｓｕｌｔｓ）｛ ｒｅｓｕｌｔ．ｉｎｎｅｒＨＴＭＬ＝”未找到！“： ｒｅｔｕｒｎ； ｝ ｖａｒ ｃｏｕｎｔ＝ｒｅｓｕｌｔｓ．ｂｏｕｎｄａｒｉｅｓ．１ｅｎｇｔｈ；／／区域个数 ｖａｒ ｓ＝ＩＩＩ１ ５ｓｔｍｐ ｆｏｒ（ｖａｒ ｉ＝Ｏ ｉ＜ｃ０ｕｎｔ：ｉ＋＋）｛ 脏地图上画第ｊ个区域 ｖａｒ ｐｏ Ｌｙｇｏｎ＝ｎｅｗ ＢＭａｐ ＰｏＩｙｇｏｎ（ｒｅｓｕＩｔｓ．ｂｏｕｎｄａｒｉｅｓ［ｉ］， （ｓｔｒｏｋｅＷｅｉｇｈｔ：１．ｓｔｒｏｋｅＣｏｌｏｒ：”ｂｌｕｅ”， ｓｔｒｏｋｅＳｔ，／ｌｅ：。。ｄａｓｈｅｄ”， ｆｉｌｌＣｏｌｏｒ：“＃ｆ２ｆ４ｆｆ＂，ｆｉｌｌＯｐａｃｉｔｈ：Ｏ．５））： ｍａｐ．ａｄｄ０ＶｅｒＩａｙ《ｐｏｆｙｇｏｎ）： ｓｔｒｏｐ＝ｒｅｓｕｌｔｓ．ｂｏｕｎｄａｒｉｅｓ［ｉ］； ／／第ｉ个区域的坐标点字符串 ｓｔｍｐ＝ｓｔｍｐ．ｒｅｐｌａｃｅ（／；／ｇ，＂＜ｂｒ／＞“）： ／／替换分隔符， ／／使每个坐标点一行 ｓ＋＝ｓｔｍｐ；／／将第ｉ个区域的坐标点添加到字符串中 ） ￥（“＃ｄｉｖＲｅｓｕｌｔ”）．ｈｔｍｌ（ｓ）； 腧出坐标点数组 ｍａｐ．ｓｅｔＶｉｅｗｐｏｒｔ（ｐｏｌｙｇｏｎ．ｇｅｔＰａｔｈＯ）；／／调整视野 ｝ 如所求区域不是县级及以上的行政区域，则需另觅它法： 如单击取点法，行政区域组合法（长三角），路径组合法（嘉兴 老城区１。 通过这些方法，即可获取文字描述中各地址、道路、区域 的地理坐标点、地理坐标点数组，为便于调用，将其按在文字 中出现的次序放在一个数组ｄａｔａｓ中，保存于一个名为 ｍａｐｄａｔａ．ｊｓ文件中。另外，再建一个全局数组ｍａｒｋｓ．用于存放 各标注ｆ或覆盖物）的引用。 ３应用举例 ３．１ 标注党校的地理位置 为了使网页打开时，即可在地图上看到“秀洲党校”的标 注，还需在ｌｏａｄＭａｐ函数（２．１）中添加几行，以创建该标注： ｍａｒｋｓ［Ｏ］＝ｎｅｗ Ｂｍａｐ．Ｍａｒｋｅｒ（ｄａｔａ［Ｏ］）； ｍａｐ．ａｄｄＯｖｅｒｌａｙ（ｍａｒｋｓ［Ｏ］）； 如此添加标注，虽然简便，但难免形式单一，信息量少， 一－一 ＦＯＲＵＭＯＦＥＸＰＥＲＴＳ 一 ｒ …… － 可用以下方法之一改进： （１）自定义标注图标 ｖａｒ ｉｃｎ＝ｎｅｗ Ｂｍａｐ．Ｉｃｏｎ（“ｉｍａｇｅｓ／ｄｈ．ｇｉｆ“，ｎｅｗ Ｂｍａｐ．Ｓｉｚｅ （２０，２Ｏ）） ｍａｒｋｓ［Ｏ】．ｓｅｔｌｃｏｎ（ｉｃｎ）； 其中，ｄｈ．ｇｉｆ是一幅保存于ｉｍａｇｅｓ目录下的２０ｘ２０的党徽 图片 （２）为标注添加标签 ｖａｒ ｌａｂ＝ｎｅｗ ＢＭａｐ．Ｌａｂｅｌ（”标签内容“．｛ｏｆｆｓｅｔ：ｎｅｗ Ｂｍａｐ． Ｓｉｚｅ（２０，一２Ｏ））） ｍａｒｋｓ［Ｏ］．ｓｅｔＬａｂｅ…ａｂ）： 这里的“标签内容”可以是纯文本，也可以是ｈｔｍｌ文本， 后者如：“＜ｉｍｇ ａｌｔ＝＇ｄｈ ＳＩＣ＝ ｉｍａｇｅｓ／ｄｈ．ｇｉＦ ｓｔｙｌｅ＝＇ｖｅｒｔｉｃｌｅ－ａｌｉｇｎ： ｍｉｄｄｌｅ＇／＞＜ｓｐａｎ ｓｔｙｌｅ＝＇ｃｏｌｏｒ：ｒｅｄ ＞秀洲党校＜／ｓｐａｎ＞”。 Ｏｆｆｓｅｔ：为标签相对于标注点的偏移量。 （３）使用开源库ＢＭａｐＬｉｂ中的富标注类ＲｉｃｈＭａｒｋｅｒ ｍａｒｋｓ【０】＝ｎｅｗ Ｂｍ ａｐＬｉｂ．ＲｉｃｈＭａｒｋｅｒ（“内容”，ｄａｔａｓ【０Ｌ｛¨ ａｎｃｈｏｒ“：ｎｅｗ ＢｍａｐＳｉｚｅ（一４０，一２０）））： 这里的“内容”同上款一样，既可为纯文本，也可为ｈｔｍｌ 文本。当然要使用此类，需下载该类的源代码，并将其引用到 网贞。假设下载后保存在当前网站的ｊｓ／ＲｉｃｈＭａｒｋｅｒ．ｊｓ，则应 在＜ｈｅａｄ＞标签后添加： ＜ｓｃｒｉｐｔ ｔｙｐｅ＝”ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ“ｓｒｃ＝ ｊｓ／ＲｉｃｈＭａｒｋｅｒ．ｊｓ“＞＜，Ｓｃｒｉｐｔ＞ （４）自定义覆盖物类ＣｕｓｔｏｍＯｖｅｒｌａｙ ＣｕｓｔｏｍＯｖｅｒｌａｙ继承自Ｏｖｅｒｌａｙ类，其构造函数是： ＣｕｓｔｏｍＯｖｅｒｌａｙ（ｐｏｓｔｉｏｎ，ｔｅｘｔ１，ｔｅｘｔ２，ｔｙｐｅ），如： ｖａｒ ｔｅｘｔ１．ｔｅｘｔ２； ｔｅｘｔ１＝“＜ｉｍｇ ａｌｔ＝ ｄｈ ｓｒｃ＝ ｉｍａｇｅｓ／ｄｈ．ｇｉｆ ｓｔｙｌｅ＝ ｖｅｒｔｉｃｌｅ－ ａｌｉｇｎ：ｍｉｄｄｌｅ＇／＞＜ｓｐａｎ ｓｔｙｌｅ＝ ｃｏｌｏｒ：ｒｅｄ ＞秀洲党校＜／ｓｐａｎ＞”： ｔｅｘｔ２＝ 嘉兴市秀洲区委党校＜／ｂｒ／＞中山东路１３３号” ｍａｒｋｓ［Ｏ］＝ｎｅｗ ＣｕｓｔｏｍＯｖｅｒｌａｙ（ｄａｔａ［Ｏ］，ｔｅｘｔ１，ｔｅｘｔ２，１）： ｍａｐ．ａｄｄＯｖｅｒｌａｙ（ｍａｒｋｓ［Ｏ］）； 当然，要用ＣｕｓｔｏｍＯｖｅｒｌａｙ类，也需引入该类的源代码， 即在＜ｈｅａｄ＞标签后添加 ＜ｓｃｒｉｐｔ ｔｙｐｅ＝‘‘ｔｅｘｔ／ｊａｖａｓｃｒｉｐｔ“ｓｒｃ＝。。ｊｓ／ＣｕｓｔｏｍＯｖｅｒｌａｙ ｊｓ。 。＞＜／ｓｃｒｉｐｔ＞ ３．２介绍党校周边环境 假设介绍文字为： “秀洲党校位于嘉兴老城区中心，南临 市区主干道中山路，西傍传统商业街建国路，商务区的江南 大厦、戴梦得购物中心步行数分钟即至。”为了让地图动态地显 示文字中划线的地理要素，先将划线的文字置于＜ｓｐａｎ＞元素中： ＜ｂ ｉｄ＝”ｘｚｄｘ“＞秀洲党校＜／ｂ＞ ＜ｓｐａｎ ｉｄ＝“ａｒｅａ一１”＞嘉兴老城区＜／ｓｐａｎ＞ ＜ｓｐａｎ ｉｄ＝”ｒｏｕｔｅ＿２“＞中山路＜／ｓｐａｎ＞ 这里＜ｓｐａｎ＞元素ｉｄ的命名除第第一个秀洲党校“ｘｚｄｘ” 外，其余包含两个部分，用下划线分隔，前面部分表示类型， 分别取ｐｏｉｎｔ（地点）、ｒｏｕｔｅ（路径）、ａｒｅａ（区域）、ｓｃｅｎ（景点）， 后面部分是在描述文字中出现的序号，对应ｍａｐｄａｔａ．ｊｓ文件中 ｄａｔａｓ数组的索引。 接下来，为＜ｂ＞、＜ｓｐａｎ＞元素绑定事件处理函数。先让鼠 标在“秀洲党校”文字上时，让相应标注闪烁： ／／为＜ｂ ｉｄ＝“ｘｚｄｘ“＞元素绑定鼠标在其上的事件处理函数 ￥（“＃ｘｚｄｘ“）．ｍｏｕｓｅｏｖｅｒ（ｆ¨ｃｋＭａｒｋ）； ／／以下为该事件的处理函数，每隔２００毫秒让“秀洲党校”标注显 ∥示／隐藏一次 ｆｕｎｃｔｉｏｎ ｆｌｉｃｋＭａｒｋ（ｅ）｛ ｖａｒ ｉｄｌｎｔｖ ｎ＝０，ｅｌｅｍ＝￥（ｔｈｉｓ）； ｅｌｅｍ．ｏ钎（）： ｄｌｎｔｖ＝ｓｅｔＩｎｔｅｒｖａｌ（ｆＩｉｃｋ ｎｇ，２００）； ｆｕｎｃｔｉｏｎ ｆｌｉｃｋｉｎｇ（）｛ ｎ＋＋： ｉｆ（ｎ＞６）｛ ｃｌｅａｒＩｎｔｅｒｖａｌ（ｉｄｌｎｔｖ）； ｍａｒｋｓ［Ｏ］．ｓｈｏｗ（）； ｍａｒｋ．ｍｏｕｓｅｏｖｅｒｆｆＩｉｃｋＭａｒｋ）； ｒｅｔｕｒｎ； ｝ ｉｆ（ｍａｒｋｓ［Ｏ］．ｉｓＶｉｓｉｂｌｅＯ）ｍａｒｋｓ［Ｏ］．ｈｉｄｅ（）； ｅｌｓｅ ｍａｒｋｓ［Ｏ］．ｓｈｏｗ（）； ） 】 再为＜ｓｐａｎ＞￣素绑定在鼠标上、鼠标离开的事件处理函数： ￥（”ｓｐａｎ”）．ｍｏｕｓｅｏｖｅｒ（ｓｈｏｗＭａｒｋ）； ￥ｆｌｓｌｐａｎ“）．ｍｏｕｓｅｏｕｔ（ｒｅｍｏｖｅＭａｒｋ）； 相应的事件处理函数为： ／／鼠标在＜ｓｐａｎ＞￣素上时，在地图上显示相应的覆盖物 ｆｕｎｃｔｉｏｎ ｓｈｏｗＭａｒｋ（）ｆ ｖａｒ ｉｄ，ａｒｒ，ｔｙｐｅ，ｉｎｄ； ｉｄ＝￥（ｔｈｉｓ）．ａｔｔｒ（“ｉｄ”）： ／／获取鼠标所在元素的ｊｄ ＿ｆｌ！ｉｄ）ｒｅｔｕｒｎ； ａｒｒ＝ｉｄ．ｓｐｌｉｔ（“一”）： ｉｆ（ａｒｒ．１ｅｎｇｔｈ＜２）ｒｅｔｕｒｎ；／／２Ｕ果鼠标在＜ｓｐａｎ ｉｄ＝“ｘｚｄｘ”＞，则返回 ｔｙｐｅ＝ａｒｒ［Ｏ］，ｉｎｄ＝ａｒｒ［１】： ∥从ｉｄ中提取类型和编号 ｓｗｉｔｃｈ（ｔｙｐｅ）｛ 艮据类型确定显示什么样的覆盖物 ｃａｓｅ ‘ｐｏｉｎｔ“： ｓｈｏｗＰｏｉｎｔ（ｉｎｄ，￥（ｔｈｉｓ）．ｈｔｍｌ《））： ｂｒｅａｋ； ｃａｓｅ”ｒｏｕｔｅ”： ｓｈｏｗＲｏｕｔｅ（ｉｎｄ）； ｂｒｅａｋ； ｃａｓｅ“ａｒｅａ”： ｓｈｏｗＡｒｅａ（ｉｎｄ）； ｂｒｅａｋ； ｃａｓｅ”ｓｃｅｎ”： ／／用于显示市区主要景点 ｓｈｏｗＳｃｅｎ（ｉｎｄ）； ２０１３．２３ 脑绋趣箍圬与舔护 、’ 实用第一 智慧密集 ｂｒｅａｋ； ） ） ／／鼠标离开＜ｓｐａｎ＞时，清除覆盖物 ｆｕｎｃｔｉｏｎ ｒｅｍｏｖｅＭａｒｋ（ｅ）｛ ｖａｒ ｉｄ，ａｒｒ； ｉｄ＝￥（ｔｈｉｓ）．ａｔｔｒ（ ｉｄ”）： ｉｆ（！ｉｄ）ｒｅｔｕｒｎ； ａｒｒ＝ｉｄ．ｓｐｌｉｔ（ｉｉ—ｉｉ，，． ｍａｐ．ｒｅｍｏｖｅＯｖｅｒｌａｙ（ｍａｒｋｓ［ａｒｒ［１】】）＝ ｈｉｄｅＤｉｓｔ０； ） ／／显示地点 ｆｕｎｃｔｉｏｎ ｓｈｏｗＰｏｉｎｔ（ｉｎｄ，ａｄｒＮａｍｅ）｛ ｖａｒ ｈｔｍｌ＝”＜ｄｉｖ ｓｔｙｌｅ＝ ｗｌｄｔｈ：６０ｐｘ：ｔｅ×ｔ—ａＩｉｇｎ：ｃｅｎｔｅｒ ＞“ ＋ａｄｒＮａｍｅ＋“＜／ｄｉｖ＞”： ｍａｒｋｓ［ｉｎｄ］＝ｎｅｗ ＣｕｓｔｏｍＯｖｅｒｌａｙ（ｄａｔａｓ［ｉｎｄ］，ｈｔｍｌ，ｈｔｍＩ １） ｍａｐ．ａｄｄＯｖｅｒｌａｙ（ｍａｒｋｓ［ｉｎｄ］）； ｍａｐ．ｓｅｔＶｉｅｗｐｏｒｔ（［ｄａｔａｓ［０］，ｄａｔａｓ［ｉｎｄ］］）； ） ∥显示路径 ｆｕｎｃｔｉｏｎ ｓｈｏｗＲｏｕｔｅ（ｉｎｄ）｛ ｍａｒｋｓ［ｉｎｄ】＝ｎｅｗ ＢＭａｐ．ＰｏｌｙＩｉｎｅ（ｄａｔａｓ【ｉｎｄ】， ｛ｓｔｒｏｋｅＣｏｌｏｒ：”ｂｌｕｅ”，ｓｔｒｏｋｅＷｅｉｇｈｔ：６，ｓｔｒｏｋｅ０ｐａｃｉｔｙ：Ｏ．３｝）： ｍａｐ．ａｄｄＯｖｅｒｌａｙ（ｍａｒｋｓ［ｉｎｄ］）； ｍａｐ．ｓｅｔＶｉｅｗｐｏｒｔ（ｄａｔａｓ［ｉｎｄ］）； ｝ ／／显示区域 ｆｕｎｃｔｉｏｎ ｓｈｏｗＡｒｅａ（ｉｎｄ）（ ｍａｒｋｓ［ｉｎｄ］＝ｎｅｗ ＢＭａｐ．Ｐｏｌｙｇｏｎ（ｄａｔａｓ【ｉｎｄ】， ｛ｓｔｒｏｋｅＷｅｉｇｈｔ：１，ｓｔｒｏｋｅＣｏｌｏｒ：“＃００００ｆｆ＂，ｓｔｒｏｋｅＳｔｙｌｅ：“ｄａｓｈｅｄ“， ｆｉｌｌＣｏｌｏｒ：”＃ｃ３ｄｆｅａ＂，ｆｉｌｌＯｐａｃｉｔｙ：Ｏ．５｝】 圭立多边形覆盖物 ｍａｐ．ａｄｄＯｖｅｒｌａｙ（ｍａｒｋｓ［ｉｎｄ］）； ｍａｐ．ｓｅｔＶｉｅｗｐｏｒｔ（ｄａｔａｓ［ｉｎｄ］）； ） ３．３描述党校便利的市内交通 假设描述文字如下： 交通十分便捷，距风景秀丽的南湖圣地仅１．６公里车 程，至南湖新渡Ｅｌ ３．７公里，至火车站车程仅１．２公里，至 火车南站（高铁站）车程仅１２．７公里，至汽车北站车程３．４公 里，至汽车南站ｆ客运中心）车程９．５公里。 只需用类似＜ｓｐａｎ ｉｄ＝”ｒｏｕｔｅ ６”＞南湖圣地＜／ｓｐａｎ＞的 语句将划线文字置于＜ｓｐａｎ＞元素中。ｉｄ中的前半部分相同，均 取ｒｏｕｔｅ，后半部分编号依次为６、７、８、９、１０、１１。事件的 绑定及事件处理函数同例２。 ３．４描述所在城市的位置及区位优势 描述文字：嘉兴市位于浙江省东北部、长江三角洲杭嘉湖 平原腹心地带，是长江一角洲重要城市之一。东临东海＋南 倚钱塘江，北负太湖，两接天目之水，大运河纵贯境内。市 ３２电电脑螭程技巧与维 品与维 城处于江、海、湖、河交会之位，扼太湖南走廊之咽喉，与 沪、杭、苏、湖等城市相距均不到百公里，区位优势明显，尤 以在人间天堂苏杭之间著称。 这里“嘉兴市”、“东海”、“钱塘江”、 “太湖”相应＜ ｓｐａｎ＞元素的ｉｄ的前半部分为ｐｏｉｎｔ， “浙江省”、 “长江 角 洲”相应＜ｓｐａｎ＞元素的ｉｄ的前半部分为ａｒｅａ，其余为ｒｏｕｔｅ， 后半部分编号依次为是１２—２２。 ３＿５显示市区主要景点 文字区显示为： 南湖景 ：狮子汇、小瀛洲、南湖、湖心岛、烟雨楼、会 景园、纪念馆、揽秀同、壕股塔ｆ伍相祠）。 古运河畔：… 相应的ＨＴＭＬ代码如下： ＜ｄｉｖ ｉｄ＝”ｄｅｓｃ３”＞ 南湖景区 ｐａ ｄ＝“ｓｃｅｎ一０”＞狮子汇＜／ｓｐａｎ＞ ｐａ ｄ＝“ｓｃｅｎ一１“＞／Ｊ、瀛渺ｌ＇Ｉ＜／ｓｐａｎ＞ ｐａ ｄ＝“ｓｃｅｎ一２”＞南湖＜／ｓｐａｎ＞ ｐａ ｄ＝“ｓｃｅｎ＿３“＞湖心岛＜／ｓ；ｐａｎ＞ ＜／ｄｉｖ＞ 这里用单击事件进行交互。不仅希望在单击上述景点名称 时．在地图上标注出该景点的位置．而且还希望看到该景点的 一幅或多幅罔片以及该景点的简要介绍。多幅图片以左右滑动 方式呈现。百度地图ＡＰＩ虽没有提供该项功能，但可借助于 “信息窗口”实现。具体步骤如下： （１）搜集各景点的图片保存于ｓｃｅｎｓ目录下。 （２）创建一个景点对象数组ｓｅｅｎ，数组中的每个元素表示 一个景点对象，该对象有以下属性： ｔｉｔｌｅ：景点名称 ｐｏｓｉｔｉｏｎ：景点的地理位置，数据类型为ＢＭａｐ．Ｐｏｉｎｔ ｄｅｓｃ：景点描述 ｐｉｃｓ：景点图片文件名数组 ｎａｍｅｓ：景点图片简要说明数组 鉴于该数组内容较多，单独存放于文件ｓｃｅｎｅｒｙ．ｊｓ中。 （３）创建一个滑动显示图片的网页ｓｌｉｄｅＰｉｅｓ．ｈｔｍ（这离题 较远，不赘述）．该网页带一个参数ｉｎｄ，表示景点序号。 （４）在景点名称上单击的事件处理函数ｓｈｏｗＳｃｅｎ ０．该函 数接收一个参数ｉｎｄ为景点序号，其核心是创建并显示百度地 图的信息窗口，这个信息窗口的内容是以ｓｌｉｄｅＰｉｃｓ．ｈｔｍ为源文 件的＜ｉｆｔａｍｅ＞： ｆｕｎｃｔｉｏｎ ｓｈｏｗＳｃｅｎ（ｉｎｄ）｛ ｍａｐ ｃｅｎｔｅｒＡｎｄＺｏｏｍ（ｓｃｅｎ［ｉｎｄ］ｐｏｓｉｔｉｏｎ，１ ６）： ｖａｒ ｓｒｃ＝“”： ｓｒｃ＝ ＳｌｉｄｅＰｈｏｔｏ．ｈｔｍ？ｉｎｄ＝”＋ｉｎｄ； ’ ’ 『 “ｌ ｈ 。Ｊ １ 。ｌ ’ 实用第一 智慧密集 ＿ ，】 ， 。Ｊ ｊ … 【。 Ｊ Ｌ 【ｆ＿ ，， ｌ１ ｒ ， ＾，Ｊ … ｝ ｌ“｝（－ Ｈ ｛ｆｕｎｃｔｉｏｎ ｐｏＩｉｃｙＣｈａｎｇｅ（ｉｎｄ）｛ ｖａｒ ｐｏｌｉｃｙｓ＝【ＢＭＡＰ ＤＲＩＶｌＮＧ ＰＯＬＩＣＹ ＬＥＡＳＴ ＴＩＭＥ， ＢＭＡＰ ＤＲＩＶＩＮＧ ＰＯＬＩＣＹ ＬＥＡＳＴ ＤＩＳＴＡＮＣＥ ＢＭＡＰ ， ＤＲｌＶＩＮ＿ｇｅｔＤｕｒａｔｉｏｎ（ｔｒｕｅ）： ￥（”＜ｔｄ ｃｏｌｓｐａｎ＝ ２ ＞＜／ｔｄ＞”） ．ａｄｄＣｌａｓｓ（”ｔｄｔ“）．ｃｓｓ（“ｐａｄｄｉｎｇ－ｒｉｇｈｔ＂，＂４ｐｘ”） ｈｔｍＩ（ｓ）．ａｐｐｅｎｄＴｏ（ｔｒ）； Ｇ ＰＯＬＩＣＹ ＡＶＯｌＤ ＨＩＧＨＷＡＹＳ］； ．，／获取用户输入的起点地址 ｖａｒ ｓｔａｒｔ＝Ｓ（“＃ｔｘｔＳｔａＧ”）．ｖａｌＯ； ／／获取每个关键步骤，并以表格形式输出到页面 ｆｏｒ（ｖａｒ ｉ＝Ｏ：ｉ＜ｒｏｕｔｅ．ｇｅｔＮｕｍＳｔｅｐｓ０；ｉ＋＋）｛ ∥获取用于输出的ｄｉｖ元素，并清空其中的内容 ｖａｒ ｒｅｓｕｌｔｄｉｖ＝￥（“＃ｄｒｖＲｅｓｕｌｔ“）．ｅｍｐｔｙ（）： ｉｆ（！ｄｒｉｖｉｎｇ） ｄｒｉｖｉｎｇ＝ｎｅｗ ＢＭａｐ．ＤｒｉｖｉｎｇＲｏｕｔｅ（ｍａｐ，｛ｒｅｎｄｅｒＯｐｔｉＯｎｓ： ｖａｒ ｓｔｅｐ＝ｒｏｕｔｅ．ｇｅｔＳｔｅｐ（ｉ）； ｔｒ＝￥（”＜ｔｒ＞“）．ａｔｔｒ（”ｉｄｎＩＩＩｔｒ”＋ｉ） ．ａｄｄＣｌａｓｓ（”ｔｒ“）．ｃｌｉｃｋ（ｓｈｏｗＳｔｅｐ（ｒｏｕｔｅ，ｓｔｅｐ，１）） ａｐｐｅｎｄＴ０（ｔａｂ）： ．｛ｍａｐ：ｍａｐ，ａｕｔｏＶｉｅｗｐｏｒｔ：ｔｒｕｅ｝｝）： ￥（“＜ｔｄ＞“）．ａｄｄＣｌａｓｓ（”ｔｄｌ”）．ｈｔｍＩ（（ｉ＋１）＋“．“）．ａｐｐｅｎｄＴｏ（ｔｒ） ｄｒｉｖｉｎｇ．ｃｌｅａｒＲｅｓｕｌｔｓ０； ／／清除搜索结果 ￥（“＜ｔｄ＞“）．ａｄｄＣｌａｓｓ（“ｔｄ２“） ．ｄｒｉｖｉｎｇ．ｓｅｔＰｏＩｉｃｙ（ｐｏ１ｉｃｙｓ【ｉｎｄ】）： ∥搜索完成的回调函数 ／／设置行车策略 ｈｔｍｌ（ｓｔｅｐ．ｇｅｔＤｅｓｃｒｉｐｔｉｏｎ（）） ｄｒｉｖｉｎｇ．ｓｅｔＳｅａｒｃｈＣｏｍｐｌｅｔｅＣａｌｌｂａｃｋ（ｓｅａｒｃｈＤｒｉｖｅＣｏｍｐｌｅｔｅｄ）； ．ａｐｐｅｎｄＴｏ（ｔｒ）； ） ） ） ｄｒｉｖｉｎｇ．ｓｅａｒｃｈ（ｓｔａｒｔ，“秀洲党校“）：／／调用ｓｅａｒｃｈ（）方法，开始搜索 ｝ ，／搜索完成的回调函数 ｆｕｎｃｔｉｏｎ ｓｅａｒｃｈＤｒｉｖｅＣｏｍｐｌｅｔｅｄ（ｒｅｓｕｌｔｓ）｛ ４ 结语 事实上，还可以添加行车路线中的每一步文字描述与地图 的交互，即在某一步的文字描述上单击时，在地图上显示这一 ｉｆ《ｄｒｉｖｉｎｇ．ｇｅｔＳｔａｔｕｓ（）＝＝ＢＭＡＰ—ＳＴＡＴＵＳ—ＳＵＣＣＥＳＳ）｛ ／／获取第一条方案 ｖａｒ ｐｌａｎ＝ｒｅｓｕｌｔｓ．ｇｅｔＰｌａｎ（Ｏ）； ／／获取方案的驾车线路 ｖａｒ ｒｏｕｔｅ＝ｐｌａｎ．ｇｅｔＲｏｕｔｅ（０）； ｖａｒ ｒｅｓｕｔｔｄｉｖ＝￥（“＃ｄｒｖＲｅｓｕｌｔ“）．ａｄｄＣｌａｓｓ（ ｄｒｖ“）： 步的具体路线，甚至还可以在地图上给出一个信息窗口，这个 信息窗口不仅提供这一步的具体描述，还可以提供“上一步”、 “下一步”两个按钮，单击之，使地图显示上一步（下一步）的 路径及相关说明。 （收稿日期：２０ｌ３—０８—３０） ｖａｒ ｔａｂ＝Ｓ（“＜ｔａｂｌｅ＞“）．ａｄｄＣｌａｓｓ（“ｔａｂｌｅ“）．ａｐｐｅｎｄＴｏ（ｒｅｓｕｌｔｄｉｖ）： ｖａｒ ｔｒ＝￥（“＜ｔｒ＞“）．ａｄｄＣｌａｓｓ（“ｔｒ０“）．ａｐｐｅｎｄＴｏ（ｔａｂ）： ｖａｒ Ｓ＝“全程：“＋ｐｌａｎ．ｇｅｔＤｉｓｔａｎｃｅ《ｔｒｕｅ）－－Ｉ”，。＋ｐｌａｎ （上接第２８页） ｛ ／／返回将ｔａｒｇｅｔ串中首个与ｐａｔｔｅｒｎ匹配的子串删除后的字符串 ｐｕｂｌｉｃ ｓｔａｔｉｃ ＭｙＳｔｒｉｎｇ ｄｅｌｅｔｅＦｉｒｓｔ《ＭｙＳｔｒｉｎｇ ｔａｒｇｅｔ， ＭｙＳｔｒｉｎｇ ｐａｔｔｅｒｎ） ｛ ｉｎｔ ｉ＝ｔａｒｇｅｔ．ｉｎｄｅ×Ｏｆ（ｐａｔｔｅｒｎ）： ｉｆ（ｉ一１） ｒｅｔｕｒｎ ｔａｒｇｅｔ； ４实现效果 简单介绍了用ＢＦ算法和ＫＭＰ算法实现的字符串匹配与查 找功能。限于篇幅，控件界面编程方面不再赘述。匹配与查找 操作演示如图７所示。 ｒｅｔｕｒｎ ｔａｒｇｅｔ．ｓｕｂｓｔｒｉｎｇ（０，ｉ）＋ｔａｒｇｅｔ．ｓｕｂｓｔ ｒｉｎｇ（ｉ＋ｐａｔｔｅｒｎ．１ｅｎｇｔｈ（）） ） ∥返回将ｔａｒｇｅｔ串中所有与ｐａｔｔｅｒｎ匹配的子串删除后的字符串 ｐｕｂｌｉｃ ｓｔａｔｉｃ Ｓｔｒｉｎｇ ｄｅｌｅｔｅ ＡＩｌ（Ｓｔ ｇ ｔａｒｇｅｔ，Ｓｔｒｉｎｇ ｐａｔｔｅｒｎ） ｛ ｉｎｔ ｉ＝ｔａｒｇｅｔ．ｉｎｄｅ×Ｏｆ（ｐａｔｔｅｍ）； ｗｈｉｌｅ（＿ｌ＝一１） ｛ ｔａｒｇｅｔ＝ｔａｒｇｅｔ．ｓｕｂｓｔｒｉｎｇ（０，ｉ）＋ｔａｒｇｅｔ．ｓｕｂｓｔｒｉｎｇ（ｉ＋ｐａｔｔｅｒｎ．１ｅｎｇｔｈ（）） ｉ＝ｔａｒｇｅｔ．ｉｎｄｅｘＯｆ（ｐａｔｔｅｒｎ，ｉ）： ） ｒｅｔｕｒｎ ｔａｒｇｅｔ； 图７基于ＢＦ与ＫＭＰ算法的匹配与查找 （收稿日期：２０１３—０９—２５） ） ３４电 盆与维
