基于mysql的百地图二次开发毕业设计.doc

基于mysql的百地图二次开发毕业设计目 录第1章 绪论101.1 课题研究的的意义101.2 国内外研究现状101.3 论文研究内容及工具111.3.1 小巧高速的mysql数据库111.3.2 功能强大的百度地图API11第2章 系统方案设计122.1 设计原则及流程122.2 流程实现132.2.1 存储在mysql中的数据132.2.2 Java驱动数据库142.2.3 百度地图API函数调用142.2.4 电脑手机端页面的显示14第3章 mysql数据库163.1 mysql软件简介163.2 建立数据库163.3 存储数据17第4章 编程软件及文件184.1 JDK简介184.2 tomcat简介184.3 myeclips简介184.4 myeclips配置tomcat194.5 建立编程文件xm.jsp20第5章 Mysql数据库数据调用225.1 JDBC简介225.2 myeclipse添加JDBC驱动225.3 数据库驱动235.4 数据存储23第6章 百度地图应用程序接口256.1 百度地图API简介256.2 地图控件256.3 标注的显示266.3.1 数组的调用266.3.2 添加标注266.3.3 标注的跳动预警276.3.4 标注图标的自定义276.4 弹出窗口显示信息296.4.1 监听函数介绍296.4.2 点击窗口显示数据296.5 地址的查询316.5.1 搜索按钮316.5.2 本地搜索326.5.3 清除历史信息326.6 驾车线路查询336.6.1 驾车路线查询按钮336.6.2 路线查询实现336.7 定时更新页面信息357.1 内网通简介367.2 内网通提供静态IP367.3 tomcat的设置377.4 tomcat根据IP实现页面访问387.4.1 tomcat网页访问的机制387.4.2 网页访问38致 谢42参考文献43附录A 外文翻译44A.1 英文44A.2 译文50附录B 源程序55石家庄铁道大学毕业设计第1章 绪论1.1 课题研究的的意义随着移动平台操作系统的飞速发展和地图应用领域的不断延伸，人们对于地理信息服务的要求也越来越高，在手机端和电脑客户端拓展地图应用，尤其是可以根据特定的需求进行百度地图二次开发，开发出满足用户的需求的百度地图，本课题的目的在于市民和相关部门可以方便准确的远程实现各个地方水深，路线的查询，为人民的安全出行提供便利，同时相关部门也可以根据水深超出危险水深的地区提前做出应对措施，从而减少不必要的损失。1.2 国内外研究现状到目前为止,学者们主要讨论了知识地图在知识管理、图书馆服务以及指导学习三个方面的应用。(1)知识地图在知识管理方面的应用。知识地图不仅可以用于显性知识的管理，还可用于隐性知识的管理。可采用两种知识地图对隐性知识进行管理，一种用于隐性知识的表达，称为认知地图，亦称方法或过程图；另一种用于隐性知识的交流传播，被称为专家图，这两种图分别从隐性知识本身和隐性知识载体两个角度出发对隐性知识进行管理。(2)知识地图在图书馆参考咨询服务中的应用。知识地图是一种良好的工具，它可实现图书馆知识资源的可视化配置，明确知识的分布以及分布于不同空间的知识资源间的内在联系。参考咨询系统中的请求管理器根据知识地图就可以快速找到合理的知识匹配，进而将咨询请求提交给匹配度最高的知识资源所有者(图书馆和知识专家)，以达到咨询服务的高质量。(3)知识地图在指导学习中的应用。学生要培养自己的学习能力、实践能力和创新能力，就需要在学习的过程中学会在知识之间自主建构有意义的连接并感悟这种意义，形成知识地图，在解决问题的过程中应用并完善知识地图，总结出解决问题的各种方法和一般规律，使知识地图成为智能知识地图。综上所述，对知识地图概念的研究，国外主要集中在20世纪末，尤其以1999年和2000年居多，而国内在这方面的研究稍晚，以2002年和2003年居多；在知识地图类型、功能以及知识地图的构建和应用方面，国内2000年以来研究颇多，且远远多于国外；此外，国内关于知识地图的应用和构建领域的文献近年来呈不断增长趋势，而国内外对知识地图特点以及评价指标的研究尚显薄弱，有待加强。1.3 论文研究内容及工具论文主要研究了从数据库里读取数据在地图上进行标注，并对标注的详细信息，点击标注实现标注信息弹出窗口，显示水深地址信息，实现发送短信的功能，根据短信链接信息实现具体信息的查看，实现地址的搜索和驾车路线的查询，根据公网IP对tomcat进行设置实现网页手机端的访问。1.3.1 小巧高速的mysql数据库mysql数据库用来存储本系统使用到的经度，纬度，水深，地址数据，使用mysql数据库具有一下优势1：(1) 使用C和C+编写，并使用了多种编译器进行测试，保证源代码的可移植性(2) 支持多线程，充分利用CPU资源。(3) 优化的SQL查询算法，有效地提高查询速度2。(4) 提供TCP/IP、ODBC和JDBC等多种数据库连接途径。(5) 提供用于管理、检查、优化数据库操作的管理工具。1.3.2 功能强大的百度地图API百度地图API实现的是调用数据库数据，通过百度地图应用程序接口，调用百度地图API功能强大的函数类，实现功能丰富的百度地图二次开发。百度API具有免费，特制，高效，开放的特点，功能齐全，百度地图API的功能包括核心类，基础类，工具类，覆盖物类，服务类，图层类等。本系统实现的地图的功能包括标注的显示，标注跳动预警，窗口信息展示，地区搜素，驾车路线的查询，以及手机电脑端页面的查看11。百度地图API具有的优势：(1) 功能丰富；(2) 交互性；(3) 功能特制；(4) 免费开放；(5) 支持PC端和移动端基于浏览器的地图应用开发；(6)支持HTML5特性的地图开发；第2章 系统方案设计2.1 设计原则及流程总体实现Zigbee终端节点进行水深数据经纬度和地址的采集，把数据通过协议栈传到协调器，协调器通过串口连接GPRS，GPRS通过因特网通过因特网实现发短信打电话的功能，通过数据透传把数据存在上位机labview中，labview把数据存储在mysql数据库中，百度API从数据库中调取数据实现手机页面的访问，总体的流程如图2-1所示16。百度APILabSQL 透传驱动:无线ZigBee 无线ZigBee ZigBee无线ZigBee协调器单片机GPRS串口串口 GSM 图2-1 总体流程图本系统主要实现的是调用存储在mysql里的数据，通过Java驱动mysql使得数据存储在数组里，百度API读取数组里的经纬度，利用自身的的功能将标注唯一标注在地图上，通过跟经纬度对应的水深，地址数据，在地图上显示对应标注所在点的水深和地址12。本系统功能的实现流程图如图2-2所示。图2-2 系统流程图2.2 流程实现在mysql数据库使用其自带的数据名为test的数据库，表名为study，表study中有五个字段，包括id，jingdu，weidu，shuishen，address，其中id是唯一索引Primary Key，jingdu,weidu是根据百度地图地理反编码得到的，我国对经纬度进行了二次加密，本系统使用百度地图API实现的二次开发，所以采取的是百度地图的地理反编码得到经纬度比较准确，水深数据是根据Zigbee超声波节点采集的水深数据，address的数据是根据经纬度得到的3。2.2.1 存储在mysql中的数据上位机labview存储数据在数据库名为test，表名为study，在mysql数据库中输入select * from test.study，得到如图2-3所示的数据4。图2-3 MySQL数据库2.2.2 Java驱动数据库Java连接mysql需要安装JDBC驱动，本系统采用的是mysql-connector-java-5.0.6-bin.jar mysql的JDBC驱动，放在C:Program Files (x86)Apache Software FoundtionTomcat 6.0lib目录下，然后把驱动放在如图2-4所示的位置7。图2-4 Mysql的JDBC驱动位置2.2.3 百度地图API函数调用百度地图API函数基本面向对象的技术，包含核心类，基础类，控件类，覆盖物类，右键菜单类，工具类，地图图层类，服务类。本系统使用的是基础类，控件类，覆盖物类，服务类函数，来实现了地图方法缩小，地图的拖曳，卫星地图的显示，已经通过鼠标滚轮实现地图的放大缩小；标注的显示，应用的是百度地图API的覆盖物类，实现的是根据数据库里的经纬度通过一定的标记图标在地图上显示出来；地址的搜索，路线的查询等功能，应用的是百度地图API的服务类，通过调用服务方法来实现地点的搜索以及路线的规划11。2.2.4 电脑手机端页面的显示tomcat的功能室想用HTML页面的访问请求，先配置tomact，在C:Program Files (x86)Apache Software FoundationTomcat 6.0webappsROOT目录下导入本系统的文件xm.jsp，如图2-5所示5。图2-5 Tomcat配置文件使用内网通内网通,是专业的内网端口映射软件，该软件把本机IP映射到固定服务器的的IP地址，映射效果如图2-6所示。图2-6 端口映射映射成功后，tomcat根据映射成功的IP地址，即http：/IP/文件，来实现网页访问，所以在电脑或者手机上输入网址：53:59975/study/xm.jsp即可实现页面访问。第3章 mysql数据库3.1 mysql软件简介mysql是一个开放源码的小型关联式数据库管理系统。由于其体积小、速度快、总体拥有成本低，尤其是开放源码这一特点，许多中小型网站为了降低网站总体拥有成本而选择了mysql作为网站数据库。mysql所使用的SQL语言是用于访问数据库的最常用标准化语言。并且具有支持多线程，充分利用CPU资源，优化的SQL查询算法，有效地提高查询速度，提供用于管理、检查、优化数据库操作的管理工具等优势。本系统使用的是版本是mysql-installer-community-。登陆用户名为root，密码是yangxiaoning。3.2 建立数据库打开软件，点击MySQLForExcelConnection，如图3-1所示。图3-1 进入数据库密码是mysql数据库安装软件安装的时候确定的，设定的密码是yangxiaoning，输入用户密码yangxiaoning，点击OK。进入mysql数据库页面，建立表的前提的是在先建立一个数据库，在数据库的基础上建立表，进入页面可以看到mysql数据库有一个自带的名为test的数据库，可以mysql数据库自带的数据库名为test数据库上右击选择Creat Table，开始建表，如图3-2所示。图3-2 建立表设置表名为study，分为五个字段id，jingdu，weidu，shuishen，address，设置id为Primary key，int型，使得id为唯一索引，其他四个字段设置最大长度为255的字符型，设置好后点击Apply，表study建立完成。3.3 存储数据表建好后，在Quary1中输入select * from test.study，点击执行按钮，可以查询labview上位机存储在数据库test，表study中的数据，如图3-3所示3。图3-3 mysql中存储的数据第4章 编程软件及文件4.1 JDK简介JDK（Java Development Kit）是Sun Microsystems针对Java开发员的产品。自从Java推出以来，JDK已经成为使用最广泛的Java SDK。JDK是整个Java的核心，包括了Java运行环境、Java工具和Java基础类库。JDK是学好Java的第一步。而专门运行在x86平台的Jrocket在服务端运行效率也要比Sun JDK好很多。从SUN的JDK5.0开始，提供了泛型等非常实用的功能，其版本也不断更新，运行效率得到了非常大的提高。本系统使用的是jdk-7u45-windows-i586软件，用来搭建java运行平台。4.2 tomcat简介tomcat服务器是一个免费的开放源代码的WEB应用服务器，属于轻量级应用服务器，在中小型系统和并发访问用户不是很多的场合下被普遍使用，是开发和调试JSP程序的首选。对于一个初学者来说，可以这样认为，当在一台机器上配置好Apache服务器，可利用它响应对HTML页面的访问请求。实际上tomcat部分是Apache服务器的扩展，但它是独立运行的，所以当你运行tomcat时，它实际上作为一个与Apache独立的进程单独运行的。本系统使用的tomcat版本是apache-tomcat-6.0.39。注意需要先安装JDK软件，搭建一个合适的语言平台。4.3 myeclips简介myeclipse是一个十分优秀的用于开发Java，J2EE的Eclipse，插件集合，myeclipse的功能非常强大，支持也十分广泛，尤其是对各种开源产品的支持十分不错。myeclipse目前支持Java Servlet，AJAX，JSP，JSF，Struts，Spring，Hibernate，EJB3，JDBC数据库链接工具等多项功能。可以说myeclipse几乎囊括了目前所有主流开源产品的专属myeclipse开发工具8。本系统使用的myeclips软件是myeclipse-8.5.0，用来编写程序。注意myeclips需要对tomcat进行配置。4.4 myeclips配置tomcatmyeclipse是Java Web企业级开发中最流行的工具，Java Web的开发离不开服务器，作为J2EE平台上最流行的服务器，tomcat发挥着巨大的作用，由于myeclipse自带的tomcat功能不够完善，而且无法更好的清除服务器缓存，不能方便的透明的查看tomcat服务器的各种运行状态，所以给myeclips配置tomcat很有必要。在window-perference里进行设置。使用下载的tomcat6.0，按钮设置成Enable，如图4-1所示9。图4-1 使用下载的tomcat禁止myeclips自带的tomcat，按钮设置成Disable，如图4-2所示。图4-2 禁止使用myEclipse自带的tomcat4.5 建立编程文件xm.jspJSP是由SunMicrosystems公司倡导、许多公司参与一起建立的一种动态技术标准。在传统的网页HTML文件（*.htm，*.html）中加入Java程序片段（Scriptlet）和JSP标签，就构成了JSP网页Java程序片段可以操纵数据库、重新定向网页以及发送E-mail等，实现建立动态网站所需要的功能。所有程序操作都在服务器端执行，网络上传送给客户端的仅是得到的结果，这样大大降低了对客户浏览器的要求，即使客户浏览器端不支持Java，也可以访问JSP网页10。在myeclipse中建立.jsp文件，在WEB-INF右击，选择new，在下拉菜单里选择JSP(Advanced Templates)，设置文件名为xm.jsp，其中File Path是文件的存储路径，点击Finish完成文件的建立，如图4-3所示。图4-3 建立jsp文件得到如图4-4所示的文件，双击文件xm.jsp，进入编程环境。图4-4 文件位置第5章 Mysql数据库数据调用5.1 JDBC简介JDBC（Java Database Connectivity）称为Java数据库连接，是一种用Java编写的用于数据库访问的应用程序API。有了JDBC，就可以用统一的语法对多种关系数据库进行访问，而不必担心其数据库操作语言的差异，这充分体现了Java语言的平台无关性。5.2 myeclipse添加JDBC驱动在myeclipse中添加mysql的JDBC驱动，加载方法是myeclipse中：右键单击项目名然后build pathAdd External Archives找到你下载好的JDBC驱动Jar包（mysql-connector-java-5.0.5-bin.jar）确定会自动添加到这个Referenced Libraries，即可导入JDBC驱动。加载到myeclipse的如图5-1所示14。图5-1 JDBC数据源导入myeclipse中的位置 5.3 数据库驱动Java调用mysql中的数据需要JDBC驱动，本系统采用的是mysql-connector-java-5.0.6-bin.jar的驱动包实现mysql的JDBC驱动5。/数据库驱动Class.forName(com.mysql.jdbc.Driver);/建立数据库连接三个参数：URL、用户名、密码Connection ct=DriverManager.getConnection(jdbc:mysql:/:3306/test,root,yangxiaoning);/获取StatementStatement sm=ct.createStatement();/获取结果集ResultSetResultSet rs=sm.executeQuery(select * from study);其中Class.forName(com.mysql.jdbc.Driver);在应用程序中加载JDBC驱动程序，通常使用Class.forName()方法加载，com.mysql.jdbc.Driver是mysql的JDBC驱动。Connection ct = DriverManager.getConnection(jdbc:mysql:/:3306/test, root,yangxiaoning);成功加载驱动之后，要用DriverManager类的方法getConnection()来创建一个数据库连接类的实例。对于jdbc:mysql:/:3306/test, root,yangxiaoning，表示jdbc连接mysql的url，mysql数据库的端口号为3306，数据库名为test，登陆数据库用户名为root，密码是yangxiaoning。获取Connection对象之后，可以用其中的方法创建一个Statement对象的实例。Statement sm = ct.createStatement();Statement对象可以执行标准的SQL语句，用来完成对数据库的插入、删除或修改等操作。 ResultSet rs = sm.executeQuery(select * from study); 表示通过执行语句select * from study获取表study的数据。5.4 数据存储Java驱动数据库成功后获取到数据库里的数据，需要把数据库的数据存储在数组里。 / * 数据库连接代码开始 */异常处理语句String latis = ;String longis = ;String deeps = ;String addresss = ;while (rs.next() latis += rs.getString(jingdu) + ,;/纬度longis += rs.getString(weidu) + ,;/经度 deeps += rs.getString(shuishen) + ,;/shuishenaddresss +=rs.getString(address) + ,;rs.close();sm.close();ct.close(); 定义latis，longis，deeps，addresss定义字符串，通过while循环语句，不断的读取数据，把数据存储在字符串中。定义字符串，latis用来存储纬度数据，longis用来存储经度数据，deeps用来存储水深数据，addresss用来存储地址数据。数据库里的数据存储在读完并且存储在这四个字段之后，即完成了数据库访问，要关闭与数据库连接即rs.close(); sm.close();ct.close();第6章 百度地图应用程序接口6.1 百度地图API简介百度地图API是一套由javascript语句编写的应用程序接口，它能够使用户在网站中构建功能丰富，交互性强的地图应用程序。通过地图服务应用接口将平台和地理信息数据绑定，将复杂的GIS底层逻辑进行封装，以一种直观的方式免费提供给用户，从地图服务和开发两个层面降低了GIS的应用门槛。百度地图API不仅包含构建地图的基本接口，还提供了诸如本地搜索，路线规划等数据服务，用户可以根据自己的需要进行选择。百度地图API函数基本面向对象的技术，包含核心类，基础类，控件类，覆盖物类，右键菜单类，工具类，地图图层类，服务类。其中核心类主要用来实现地图的表达；控件类用来添加地图的浏览工具如地图的移动，缩放工具；服务类提供用户地图的相关服务，如搜索工具，公交路线查询工具，自驾路线查询工具盒地理编码工具等。每个类都通过AJAX模式实现，开发者只需要通过其API，利用javascript脚本语言就可以将百度地图服务连接到自己的网页中。通过地图API提供的借口，满足各类B/S和C/S体系架构的基于网络地图服务应用11。6.2 地图控件百度地图上负责与地图交互的UI元素，百度地图API中提供了丰富的控件，还可以通过Control类来实现自定义控件，使用的控件：/map.addControl(new BMap.NavigationControl();/平移缩放控件 /map.addControl(new BMap.ScaleControl();/比例尺控件map.addControl(new BMap.OverviewMapControl();/缩略地图控件map.addControl(new BMap.MapTypeControl();/地图类型控件map.enableScrollWheelZoom();/启用滚轮放大缩小map.addControl(new BMap.MapTypeControl();/地图类控件，地图卫星三维map.addControl(new BMap.OverviewMapControl(); map.addControl(new BMap.OverviewMapControl(isOpen:1);/开启鹰眼（迷你型缩略图控件）map.addControl(new BMap.OverviewMapControl(isOpen: 1, anchor: BMAP_ANCHOR_TOP_RIGHT);/开启鹰眼，位置在右上方map.addControl(new BMap.NavigationControl(type: BMAP_NAVIGATION_CONTROL_SMALL);/为地图添加鱼骨（迷你型平移控件）map.addControl(new BMap.ScaleControl(offset: new BMap.Size(5, 40);/添加一个带上偏移量的比例尺通过添加这些控件可以使得地图放大缩小平移，拖曳，卫星地图显示，比例尺，鼠标滚轮实现地图的放大缩小等地图表达功能，通过放入迷你控件可以使得页面的规划更加的合理。6.3 标注的显示所有叠加或覆盖到地图的内容，我们统称为地图覆盖物。如标注、矢量图形元素(包括：折线和多边形和圆)、信息窗口等。覆盖物拥有自己的地理坐标，当您拖动或缩放地图时，它们会相应的移动。通过覆盖物可以很方便的把想要在地图上标示的内容显示出来。标注的显示主要是通过调用数据库的经纬度来定位具体的地点并且在地图上标注出来。出于安全考虑，国家对坐标进行了二次加密，GPS坐标，百度坐标，goole坐标会有偏差，本系统的经纬度的值是通过地理反解码获取百度地图经纬度，可以保证定位的准确性。6.3.1 数组的调用定义数组arrayObx=.split(,); arrayOby=.split(,); arrayObz=.split(,);arrayObm=.split(,);经度放在arrayObx数组里，纬度放在arrayOby数组里，水深放在arrayObz数组里，地址放在arrayObm数组里。6.3.2 添加标注通过map.addOverlay方法向地图添加覆盖。根据经纬度定义marker，创建标注。var marker= new BMap.Marker(new BMap.Point(arrayObxi, arrayObyi),icon: icon,fillColor:blue);/创建标注将标注添加到地图中 map.addOverlay(marker);/将标注添加到地图中即可在地图上显示标注点。效果如图6-1所示。图6-1 标注的显示6.3.3 标注的跳动预警设定一个预警值，超过这个预警值就标注就跳动，程序如下： markers.push(marker);if (arrayObzi30) map.addOverlay(marker);/ 将标注添加到地图中 else map.addOverlay(marker); marker.setAnimation(BMAP_ANIMATION_BOUNCE);/跳动的动画 本系统设定的预警值是30单位是mm,超过这个值的时候通过 marker.setAnimation(BMAP_ANIMATION_BOUNCE);标注就开始跳动。6.3.4 标注图标的自定义百度地图API默认的标注图标是红色水滴状的，以后搜索功能，路线查询起始点的确定位置也是用红色水滴状的标注显示，为了便于区分两者的差别，对标注进行自定义，插入图片改变标注的样式。下载图片命名为marker.png，在目录C:UsersadminWorkspacesMyEclipse 8.5study下新建文件夹为debug，把图片放在该文件夹下，然后把图片导入如图6-2所示的目录。图6-2 标注自定义图片位置在代码里实现该图片的显示如下所示。/自定义标注图标 var icon =new BMap.Icon(icon/marker.png, new BMap.Size(20, 32), anchor: new BMap.Size(10, 30), )其中 var icon =new BMap.Icon(icon/marker.png, new BMap.Size(20, 32), 通过Icon类可实现自定义标注的图标，自定义图标名称icon。anchor: new BMap.Size(10, 30)，对标注大小的设置。效果如图6-3所示。图6-3 自定义标注的显示6.4 弹出窗口显示信息6.4.1 监听函数介绍百度地图API中的大部分对象都含有addEventListener方法，您可以通过该方法来监听对象事件。例如，BMap.Map包含click、dblclick等事件。在特定环境下这些事件会被触发，同时监听函数会得到相应的事件参数e，比如当用户点击地图时，e参数会包含鼠标所对应的地理位置point。addEventListener方法有两个参数：监听的事件名称和事件触发时调用的函数。6.4.2 点击窗口显示数据 标注已经在地图显示，若要点击标注显示水深和地址的详细信息，我们需要用到infoWindow函数，此函数的功能是点击一个要素的时候，同时需要查询这个要素的属性值并在地图上显示出来，代码如下所示：var tig;for (var i =0; iarrayObx.length-1;i+) (function() var index = i; markersi.addEventListener(click, function() var opts = width: 250,/信息窗口宽度 height: 100,/信息窗口高度 title: /信息窗口标题 var infoWindow1 = new BMap.InfoWindow(水深:+arrayObzindex+ mm+地址:+arrayObmindex, opts); this.openInfoWindow(infoWindow1); ); )(); for (var i =0; iarrayObx.length-1;i+)是从数据库中读取数据不断循环，循环次数为arrayObx.length，即有多少组就循环多少次，在每次循环里， markersi.addEventListener(click, function()，定义监听函数，addEventListener()，监听是否点击click。即是否有点击事件，监测到有点击事件，即触发function()方法。 var opts = width: 250, / 信息窗口宽度height: 100, / 信息窗口高度title: / 信息窗口标题 是对显示窗口大小的设置。var infoWindow1 = new BMap.InfoWindow(水深:+arrayObzindex+ mm+地址:+arrayObmindex, opts);设置窗口显示的内容包括水深和地址，先设置一个index，即索引，实现对数据组的数据进行编号，这样便于数据的调用提高内容显示的正确性。this.openInfoWindow(infoWindow1);调用函数openInfoWindow()打开窗口，显示窗口内容。效果如图6-4所示。图6-4 窗口信息显示点击显示窗口的手机按钮，如图6-5所示。图6-5 短信发送功能输入发送放手机号，接收方手机号，对方手机收到的短信内容如图所示，点击连接如图6-6所示。图6-6 手机端显示6.5 地址的查询位置的查询即根据输入的地址信息定位到地址所在的区域。6.5.1 搜索按钮 在页面上输入地址百度地图自动定位到那一块区域，首先在页面上设一个查询按钮，代码如下：请输入地址：定义输入的地址定义为dizhi，按钮的名字叫搜索，点击搜素那妞，触发事件，调用sousuo()方法。6.5.2 本地搜索本地搜索属于百度地图API的服务类，调用本地搜索LocalSearch()方法，该方法提供某一特定地区的位置搜索服务。var num=0;function sousuo()var a = document.getElementById(dizhi).value;var local = new BMap.LocalSearch(map, renderOptions:map: map, panel:results); local.search(a); /范围搜索function sousuo()是对定义的搜索按钮的作用的定义，起到作为对象方法的作用。var a = document.getElementById(dizhi).value;获取输入的地址定义为a。var local = new BMap.LocalSearch(map, renderOptions:map: map, panel:results);通过设置BMap.LocalSearchOptions.renderOptions.panel属性，可以为本地搜索对象提供一个结果列表容器，搜索结果会自动添加到容器元素中。local.search(a); 通过调用LocalSearch方法实现范围的搜索。6.5.3 清除历史信息百度地图API提供的搜素方法本身不具有历史信息覆盖的能力，及第二次搜素的结果在页面上会存在第一次搜素的结果。为了在页面上一次只显示一次的搜索结果，本系统使用的清除按钮，已清除历史数据。首先添加清除按钮：，点击清除按钮触发map.clearOverlays()方法，map.clearOverlays()方法具有清除图层的作用，清除图层意味着清除掉页面上的全部的信息，包括标注和历史数据。保证只清除掉历史查询数据，必须保证不清除掉标注，程序如下所示： for(var j=0;ji;j+)if(arrayObxj=arrayObxi)&(arrayObyj=arrayObyi)map.removeOverlay(markersj); /保留最后一次标注marker.disableMassClear();/清除图层时不清除标注如图6-7所示。图6-7 地址搜索6.6 驾车线路查询使用的百度API的服务类，实现的是路线的规划，根据输入的始终点的位置来实现始点到终点路线的查询。调用的方法是transit.search()方法。6.6.1 驾车路线查询按钮在页面上设置一个查询按钮，根据输入的起点框，终点框确定起始地址，点击查询按钮实现路线查询。代码如下：设置dizhi1是输入的起点的地址，dizhi2是终点的地址，有点击查询按钮即触发事件chaxun()。6.6.2 路线查询实现调用transit.search()提供驾车导航服务，该函数是通过输入的起始点的位置实现的驾车路线的查询。代码如下所示：/驾车导航function chaxun()var b = document.getElementById(dizhi1).value;var c = document.getElementById(dizhi2).value;function search(b,c,route) var transit = new BMap.DrivingRoute(map, renderOptions: map: map,panel:r-result, policy: route ); transit.search(b,c);其中var b = document.getElementById(dizhi1).value;var c = document.getElementById(dizhi2).value;是把其实点的位置传递给b,c，定义function search(b,c,route)的函数，可以为驾车查询对象提供一个结果列表容器，搜索结果会自动添加到容器元素中。transit.search(b,c);通过调用transit.search方法实现路线的查询。效果如图6-8所示：图6-8 驾车路线查询6.7 定时更新页面信息数据库中的数据是实时在更新，为了保证页面的信息也在不断更新，设置一个定时器，设定一个时间，来刷新页面，调用setInterval函数，setInterval(expression,delayTime)，每个DelayTime，都将执行Expression。常常可用于刷新表达式。每执行一次setInterval函数，刷新的时间间隔是1ms，代码如下：function test()/MapControl.marker = new BMap.Marker( this.getCenter(); / 创建标注/if(numarrayObx.length-1)/num+;/alert(arrayObznum);/else/window.clearTimeout(tig); /注销定时器/window.location.reload(true); setInterval(test,3600000); /设置超时对象 10分 刷新一次 10000=1s第7章 网页手机端页面显示的实现7.1 内网通简介内网通,是专业的内网端口映射软件，可轻松访问连接内网，不需设置路由器，不需公网IP,不需固定IP,不需动态域名，成功率90%以上，适合在公司，小区宽带，出租屋，校园网，网吧，教育网，等网络结构复杂，限制严格的环境中使用。内网通特点如下：(1)简单易用在客户端添加映射的规则实时生效，马上就能映射出外网，无需繁琐的设置过程。(2)穿透性强面对电信运营商的严格限制，PP内网通通过先进的技术手段，保证只要能打开网页，就能映射成功。(3)高速稳定服务器选择最适合中国网络的线路，完美解决电信互联互通问题，随时都能获得高速连接。(4)功能强大支持多端口映射和自定义访问端口功能。支持开机运行，自动登录，后台服务功能，保证24小时稳定不掉线。专门的服务器转发数据，达到不需要修改路由器设置，就能映射出外网的效果。7.2 内网通提供静态IP选择一个未占用的端口，把端口号输入到映射端口，本系统使用的是端口59975，点击映射全部，映射为公网IP为53:59975，映射效果如图7-1所示。图7-1 内网通端口映射7.3 tomcat的设置得到映射端口之后，为了达到整个系统的统一一致，需要更改tomcat的端口，否则会报错，网页无法查看，在C:Program Files (x86)Apache Software FoundationTomcat 6.0conf的目录下的server文件，如图7-2所示。图7-2 tomcat端口设置文件位置用记事本打开server文件，更改connector port后面的值为59975，如图7-3所示。图7-3 tomcat端口设置点击保存，此时已经设置好tomcat的端口号为59975。7.4 tomcat根据IP实现页面访问7.4.1 tomcat网页访问的机制URL打上http:/localhost：端口号/项目名字，浏览器自动到服务器找该项目的webroot下的web.xml。由它定位访问webroot文件夹下的jsp文件，如果web.xml定位的文件在web-inf文件夹下，浏览器是无法访问的。哪怕浏览器打上jsp全路径名，也无法啊访问，应为由web.xml决定。7.4.2 网页访问配置tomact，在C:Program Files (x86)Apache Software FoundationTomcat 6.0webappsROOT 目录下导