基于mysql的mysqlweb地图的设计

基于mysql的mysqlweb地图的设计

1le-pbdi谷歌androidapi是谷歌开发的api，它可以让世界各地对谷歌android熟悉的程序设计师开发基于谷歌android地图的服务，并创建自己的地图网站。GoogleMapsJavaScriptAPI允许使用者把Google地图嵌入到自己的网页内。当使用这个API时,首先申请一个APIkey,然后利用JavaScript类创建所需实例,实现所需电子地图的引入,完成地图中点、线、标记、交通线等对象的设置,从而能以更加直观的效果来显示运输的出发地、目的地、路径及运输状态等。鉴于GoogleMapsAPI的这些特点,将其应用到运输管理信息系统中来实现现代化物流运输管理,如:根据运输单在电子地图中显示该运单的起始地和目的地,显示两地之间的运输路径,对运输车辆的实时监控以及对交通状态的实时查询等。2玻璃纸叠加合成我们看到的电子地图,都是多个图层叠加以后的效果。何为图层?举个例子来说,在一张张透明的玻璃纸上作画,透过上面的玻璃纸可以看见下面纸上的内容,但是无论在上一层上如何涂画都不会影响到下面的玻璃纸,上面一层会遮挡住下面的图像。最后将玻璃纸叠加起来,通过移动各层玻璃纸的相对位置或者添加更多的玻璃纸即可改变最后的合成效果。我们能在电子地图中看到起始地、目的地、交通线、运输路径等,其实就是将这些对象分别作为一个图层,然后将它们进行叠加。本项目中设计的叠加层有点,标记,折线,交通叠加层,街道视图叠加层等。2.1创建一个实例创建地图使用GoogleMapsAPI中的GLatLng类。GLatLng是以经度和纬度表示的地理坐标点。利用构造函数GLatLng()创建一个实例,如在地图中定义北京的位置,用point表示北京的地理坐标点。即可表示为:point=newGLatLng(39.909736,116.279297)。利用方法Lat()和Lng()来获得坐标点的经度和纬度。2.2标记对象的地理位置;定义了北京的地理坐标点,当需要在地图中将北京标示出来时,使用GoogleMapsAPI中的Gmrker类。GMarker标记地图上的位置,它实现GOverlay接口,因此使用GMap2.addOverlay()方法添加到地图中。标记对象包含latlng(标记在地图中锚定的地理位置)和icon。由此可以表示为:varmarker=newGMarker(point);map.addOverlay(marker);若没有设置标记对象的ICON参数,则标记符号则以默认样式显示,在项目中需要分别用不同的符号来表示起始地、目的地以及运输过程中的地理位置,所以需要设置符号样式。如用黄色标识来作为北京的标记时,用如下方式表示:varyellowIcon=newGIcon(G_DEFAULT_ICON);markerOptions={icon:yellowIcon};varmarker=newGMarker(point,markerOptions);map.addOverlay(marker);将标记添加到地图中后,即可调用它的方法,如当将鼠标放置在北京的标记上时,显示北京的坐标值;如当点击标记时,显示当前标记对象的地理环境等。2.3北京交通信息的添加Google地图API使用GTrafficOverlay对象向地图中添加交通信息。可以使用GMap2.addOverlay()方法向地图中添加交通信息。GTrafficOverlay有两种方法(hide()和show())用于切换是否显示交通叠加层。只有支持的城市才能显示交通信息。在项目中显示北京的交通信息,设置如下:vartrafficOptions={incidents:true};trafficInfo=newGTrafficOverlay(trafficOptions);map.addOverlay(trafficInfo);2.4gstsearte-pcr检测Google地图API提供街道视图服务,可用于获取及处理在Google地图街道视图中使用的图像。通过使用GStreetviewPanorama对象可支持街道视图图像,该对象可向街道视图Flash•查看器提供一个API接口。要将街道视图合并到地图API应用程序中,按如下操作步骤即可:①创建一个容器(通常是<div>元素),来包含街道视图Flash•查看器。②创建一个GStreetviewPanorama对象,然后将其放入该容器中。③将街道视图对象初始化为引用一个特定位置并显示初始“视点”(POV)。④通过检查603错误值来处理不受支持的浏览器。GStreetviewPanorama对象要求其构造函数中有一个容器元素。在构造函数调用结束后调用对象的setLocationAndPOV方法来更改其位置和POV。·街道视图容器街道视图Flash查看器需要一个DOM容器节点,此节点用于显示查看器的内容(通常是<div>元素)。为使全景图像达到最佳显示效果,尺寸设置为200像素x200像素。GStreetviewPanorama构造函数需要一个container参数来确定初始容器元素,该容器元素中将显示街道视图Flash查看器。可以对GStreetviewPanorama对象应用hide(),使其暂时不显示;应用show(),使其重新显示出来。在任何时候,当要更改街道视图Flash查看器的容器时,向容器发送setContainer()方法,从而向该容器传递其应当关联的新元素。如果想要从DOM中彻底删除街道视图Flash查看器并释放其内存,则向该对象传递remove()方法。如果想要从DOM中删除容器元素,则必须调用该方法,否则将导致客户端浏览器的内存泄漏。·街道视图位置街道视图图像包含一个位置(对应于GLatLng)和一个特定的方向(GPov),二者共同标识图像显示的视图。由于街道视图要求支持Flash•插件,需先检查该插件在用户浏览器上是否可用。也可以注册一个对GStreetviewPanorama对象上的error事件进行侦听的事件侦听器,来在应用程序中进行此检查,通过error事件可传递一个可以评估的错误代码。·街道视图视点(POV)街道视图位置定义一个图像相机的放置位置,但是不定义该图像相机的方向。为了定义相机方向,GPov对象常量定义了三个属性:·yaw定义以相机位置为圆心相对于正北方向的旋转角度(以度为单位)。摆角按顺时针方向测量(90度为正东方向)。·pitch定义相对于相机初始默认倾斜度的“向上”或“向下”差值,默认倾斜度通常为平直水平。·zoom定义此视图的缩放级别(有效地限制“视野”),0表示完全缩小。不同的街道视图位置可能提供更高或更低的缩放级别。默认情况下,这些值均为0,所定义的视图为平直水平,方向为正北,且显示最宽的视野。·设置全景视图可以在构造全景对象时使用GStreetviewPanoramaOptions参数设置该对象的位置和GPov。·使用街道视图叠加层确定道路是否支持街道视图的最简单方法是通过使用GStreetviewOverlay对象。只需创建一个此类型的叠加层,然后将其添加到地图中;包含街道视图数据的道路将使用蓝色边界在地图上高亮显示。当检查到某个地理区域支持街道视图后,通过填充GStreetviewPanorama对象在有效的街道视图道路上添加可响应单击操作的逻辑。设计如下:varmyPano=newGStreetviewPanorama(document.getElementById(“pano”));varmap=newGMap2(document.getElementById(“map”));map.setCenter(newGLatLng(39.909736,116.279297),14);svOverlay=newGStreetviewOverlay();map.addOverlay(svOverlay);GEvent.addListener(map,“click”,function(overlay,latlng){myPano.setLocationAndPOV(latlng);});3地图api带安全要素对所显示的电子地图进行平移、缩放、地图类型转换、比例尺调整、地址搜索、鸟瞰图视图等操作时,是通过设置地图API带有的可以在地图中使用的内置控件来实现的。3.1基于gps监控的地图显示GSmallMapControl实现在Google地图上使用的小平移/缩放控件。显示在地图的左上角。GSmallZoomControl是一个小型缩放控件,用于在Google地图上显示行车路线的小地图弹出窗口。GScaleControl用来设置地图比例尺3.2map确定中国在项目中实现可通过地图、卫星、混合地图、地球四种方式来显示地图信息时,使用GMapTypeControl来实现,并将控件显示在地图的左下角位置。设置如下:map.addMapType(G_SATELLITE_3D_MAP);varmapTypeControl=newGMapTypeControl();varbottomLeft=newGControlPosition(G_ANCHOR_BOTTOM_LEFT,newGSize(10,10));map.addControl(mapTypeControl,bottomLeft);3.3alsearch介绍map.addControl(newgoogle.maps.LocalSearch(),newGControlPosition(G_ANCHOR_BOTTOM_RIGHT,newGSize(10,20)));上述所有这些控件都基于GControl对象。4地图的生成和创建任何Google地图API应用程序中的基础元素都是“地图”本身。如在网页中显示以北京为中心的地图。在上述代码中,可从以下5点进行介绍:①/maps?file=api&v=2&key=ABQIAAAAenric1_zpeH8z_st1qduvBTuwpJVEPjTGK5sS1H_kKs79n3jZRQW8lO-26_mFE6g5Vzaw8CXBF9Dw网址指向包含使用Google地图API所需所有符号和定义的JavaScript文件的位置。使用script标签包含Google地图APIJavaScript。②要让地图在网页上显示,必须为其留出一个位置,由此,创建一个名为“map”的div,并使用样式属性设置其尺寸。③编写JavaScript函数创建“map”对象。GMap2类是表示地图的JavaScript类。使用JavaScript的new操作来创建此类的新实例。通过GMap2构造函数创建地图后,将其初始化。初始化通过地图的setCenter()方法完成。setCenter()方法要求有GLatLng坐标和缩放级别,而且必须先发送此方法,然后再在地图上执行其他任何操作,包括设置地图本身的其他任何属性。④将北京的中心设置为指定的地理点。当有了地图,则需要引用地图上的位置。在Google地图API中,使用GLatLng构造一个GLatLng对象,以{经度,纬度}的顺序传递参数:⑤从body标签的onLoad事件初始化地图对象。5生成期数据的生成电子地图中所显示的地理对象来自于运输单的起始地和目的地,由这两个地址显示路径,并根据运输单的状态值模式显示当地的地理位置,由此需要实现电子地图与运输管理系统中的数据关联。本项目的解决方法是:先将包含城市名称,经度值,纬度值信息的表放置在SOA平台,当运输系统中进行一运输订单的下达时,提取该运单的起始地和目的地名称信息,与SOA的地理信息表相关联,取得起始地和目的地对应的精度和纬度信息,并生成XML文件,在网页中用静态方法Gxml处理XML文档。如在项目中实现显示某运单的起始地址时,首先通过提取起始地址名称,然后与SOA中的地理信息表相关联,生成XML文件,通过GXml获取XML的内容,并以此内容获取得地理坐标点,并标记出来,可表示如下:GDownloadUrl(“begin1.xml”,function(data){varxml=GXml.parse(data);varmarkers=xml.documentElement.getElementsByTagName(“marker”);point=newGLatLng(parseFloat(markers.getAttribute(“lat”)),parseFloat(markers.getAttribute(“lng”)));varmarker=newGMarker(point);map.addOverlay(marker);取得两地的名称,并生成以此信息为内容的XML文件,通过ActiveXObject(‘Microsoft.XMLDOM’)构造实例,获取XML的内容,从而显示两地运输路径。当在项目中模