最近项目上涉及到地图，考虑到精度等问题，最终选择了51ditu。要实现电子围栏等等功能，经过几天努力，大致有了个雏形，由于是第一次接触HTML和JavaScript编程，三天下来脑袋大了不少，碰到了一些问题，暂时还在挣扎当中，现在我将雏形工程发布出来，目的在于向大家学习，希望得到各位的指点和教导，以期我的工程能够日益完美。
一、相关文件说明：
(1) 工程文件我已经放到了http://download.csdn.net/detail/zhangyuehua123/3704087上，免积分下载(可以进入我的资源列表，排在第一个的就是)。为了方便阅读和交流，我在下面也贴出了完整的代码。
(2) 实时交流方式：QQ--1803220843， [email protected]。期盼讨论、指教！谢谢~~~
二、工程运用目的：
因工程项目需要，用C#设计一个车辆监控软件，其中重要的一部分就是将地图嵌入到软件界面当中。我的思路是运用其强大的webbrowser控件来实现嵌入地图功能。因此，调试Javascript描述的HTML网页就成了工作当中的第一步。
三、地图功能需求：
(1) 测距离。在地图上点击任意两个位置，计算出物理距离。
(2) 测面积。在地图上拖拽一个多边形，计算出面积。
(3) 电子围栏。在地图上拖拽一个矩形框，当车辆(暂时用标注marker来模拟)在矩形框内的时候，处于正常状态；当车辆驶出矩形框外的时候，报警。
(4)实时路况。提供部分城市的实时路况信息。这个功能51dituAPI支持。
(5)逆地理编码详细描述。在地图上点击任意一个标注(marker)，信息浮窗提示当前位置的具体地点。这个功能51dituAPI支持。
(6)地图鹰眼。
(7)历史轨迹播放。首先选择车辆，然后选择历史轨迹时间(如从2011-10-18-21:00到2011-10-19-21:00)，再选择播放速度，点击播放按钮，就可以在地图上播放出历史行车轨迹。
(8)鼠标右键。放大、缩小、添加标注功能。
四、雏形版本功能：
(1) 功能：测距离。
状态：已经完美解决。
问题：无。
(2) 功能：测面积。
状态：已经完美解决。
问题：无。
(3) 功能：电子围栏。
状态：已经解决大部分，可以拖拽一个矩形框，用标注(marker)模拟一辆车，当marker在矩形框内的时候，提示没有越界，矩形框显示绿色；当marker拖拽出矩形框时，提示车辆越界，此时矩形框呈红色。
问题：① 只能先拖拽矩形框，然后才能拖拽标注(marker)，否则提示出错。
② 想用更多的标注(marker)来模拟汽车，用鼠标右键来实现添加标注功能。但是marker能够添加进去，但是不能实现类似可以拖拽的marker那样提示经纬度的功能，所以暂时只能通过拖拽地图上唯一的一个“可以拖拽的标注(marker)”来模拟汽车时候越界。
(4) 功能：实时路况。
状态：已经完美解决。
问题：无。
(5)功能：逆地理编码详细描述。
状态：已经完美解决。
问题：标注还是太少，最好是能用更多的“动态的marker”来模拟汽车，在每个marker上单击就可以显示当前的地理位置信息提示窗。
(6) 功能：地图鹰眼。
状态：已经完美解决。
问题：无。
(7)功能：历史轨迹播放。
状态：还没开始做。
问题：我的思路是：
①将车辆信息(主要是经纬度数据)存储在本地Xml文件中，然后用javascript读取经纬度数据，调用51ditu的API，在地图上添加marker，设置系统时间(添加一个定时器)，用于地图刷新，这样可以实现“播放速度”功能，选择播放速度实际上就是选择不同的定时器时间。
②至于“选择历史轨迹的起止时间”，暂时的想法也是通过javascript从Xml文件中读取历史信息，选择不同的时间段，获取其时间段内的经纬度值，然后在地图上marker出来。
(8)功能：鼠标右键。
状态：解决了一部分。
问题：功能单一，还需扩展。
五、雏形版本截图：
六、附源代码：
[javascript] view plain copy
- <html xmlns:v="urn:schemas-microsoft-com:vml">
- <head>
- <meta http-equiv="content-type" content="text/html; charset=GB2312"/>
- <style type="text/css">v\:*{behavior:url(#default#VML);}</style>
- <style type="text/css">
- html,body
- {
- background:#FFFFFF;
- overflow : auto;
- }
- table
- {
- font-size:12px;
- font-weight:bold;
- color:#E066FF;
- }
- input
- {
- font-size: 12px;
- color:#E066FF;
- }
- </style>
- <script language="javascript" src="http://api.51ditu.com/js/maps.js"></script>
- <script language="javascript" src="http://api.51ditu.com/js/traffic.js"></script>
- <script language="javascript">
- var map;
- var mgr;
- var poit;
- var scaleControl; /* 比例尺控件 */
- var icon; /* 标注自定义图标样式 */
- var mapText; /* 添加文字标签 */
- var controlZoom; /* 拉框放大控件 */
- var controlDistance; /* 测距离控件 */
- var controlMianji; /* 侧面积控件 */
- var aryRightMenu; /* 右键菜单数组 */
- var zoomIn; /* 右键放大 */
- var zoomOut; /* 右键缩小 */
- var markerRightMenu; /* 右键添加标注 */
- var menuRightMenu; /* 添加右键菜单控件到地图上 */
- var LatMin; /* 矩形框的边界值，最小维度 */
- var LatMax; /* 矩形框的边界值，最大维度 */
- var LonMin; /* 矩形框的边界值，最小经度 */
- var LonMax; /* 矩形框的边界值，最大经度 */
- var rect; /* 矩形框对象 */
- var controlOfweilan; /* 建立新的拉框查找控件对象 */
- var markerToDrag; /* 可拖拽的标注对象 */
- /*===================== 主函数 ===================== */
- function onLoad()
- {
- map=new LTMaps("mapDiv"); /* 创建地图 */
- point = new LTPoint( 10645971,2956742 );
- map.centerAndZoom( point,2 );
- map.setMapCursor("hand","move"); /* 设置鼠标在地图上的形状 */
- map.addControl(new LTStandMapControl());
- map.addControl(new LTOverviewMapControl()); /* 添加鹰眼 */
- mgr = new LTTraffic(map);
- scaleControl=new LTScaleControl(); /* 添加比例尺 */
- scaleControl.units=[[1000,"km"],[1,"m"]];
- scaleControl.setColor("red");
- scaleControl.setLeft(280);
- map.addControl(scaleControl);
- map.handleMouseScroll(true); /* 鼠标滚轮操作 */
- map.mapCartoonControl(true); /* 滚轮操作时，地图动画效果展示放大和缩小 */
- LTEvent.bind(map,"dblclick",map,function(){{this.zoomIn()}}); /* 双击放大地图 */
- icon=new LTIcon("C:\\centerPoi.gif",[24,24],[12,12]); /* 添加标注 */
- var marker = new LTMarker( point,icon );
- map.addOverLay( marker );
- LTEvent.addListener( marker , "click" , doitForMarker); /* 给标记添加点击事件，点击显示当前的详细地理位置 */
- mapText = new LTMapText( marker ); /* 为标注添加文字标签 */
- mapText.setLabel("{2}" );
- mapText.setBackgroundColor("#CAFF70");
- mapText.setFontColor("#D15FEE");
- map.addOverLay( mapText );
- var myHtml="我在这里,这是第1个标记";
- var infoWin=mapText.openInfoWinHtml(myHtml);
- infoWin.setTitle("这里是我的标记的标题");
- LTEvent.addListener( mapText , "click" ,getClickCallBack(mapText,myHtml));
- controlZoom = new LTZoomInControl();
- controlZoom.setTop( 400 );
- controlZoom.setLeft( 30 );
- controlZoom.setLabel("拉框放大"); /*拉框放大*/
- map.addControl(controlZoom);
- controlDistance=new LTPolyLineControl();
- controlDistance.setTop( 350 );
- controlDistance.setLeft( 30 );
- controlDistance.setLabel(" 测距离 "); /*测距离按钮*/
- controlDistance.lineColor="red";
- controlDistance.lineStroke=1;
- controlDistance.lineOpacity=1;
- controlDistance.lineStyle="ShortDash";
- controlDistance.lineArrow=["Open","Open"];
- map.addControl(controlDistance);
- LTEvent.addListener(controlDistance,"draw",onDraw);
- controlMianji = new LTPolygonControl();
- map.addControl( controlMianji );
- controlMianji.setTop( 300 );
- controlMianji.setLeft( 30 );
- controlMianji.setLabel(" 测面积 "); /*测面积按钮*/
- aryRightMenu = new Array();
- zoomIn = new LTMenuItem(); /* 右键放大 */
- zoomIn.id = "zoomIn";
- zoomIn.menuText = "放大";
- zoomIn.functionName = mapZoomIn;
- aryRightMenu.push(zoomIn);
- zoomOut = new LTMenuItem(); /* 右键缩小 */
- zoomOut.id = "zoomOut";
- zoomOut.menuText ="缩小";
- zoomOut.functionName = mapZoomOut;
- aryRightMenu.push(zoomOut);
- markerRightMenu = new LTMenuItem(); /* 右键添加标注 */
- markerRightMenu.id = "marker";
- markerRightMenu.menuText ="在此添加标注";
- markerRightMenu.functionName = mapMarker;
- aryRightMenu.push(markerRightMenu);
- menuRightMenu = new LTMenuControl(aryRightMenu); /* 添加右键菜单控件到地图上 */
- map.addMenuControl(menuRightMenu);
- controlOfweilan = new LTZoomSearchControl("red","red",1,0.4); /* 建立新的拉框查找控件 */
- controlOfweilan.setTop( 450 );
- controlOfweilan.setLeft( 30 );
- controlOfweilan.setLabel("电子围栏" );
- map.addControl(controlOfweilan); /* 添加控件到地图 */
- markerToDrag=new LTMarker(point);
- markerToDrag.enableDrag();
- map.addOverLay(markerToDrag);
- LTEvent.addListener(markerToDrag,"dragend",onDragEnd); /* 设置用户在拖拽标记之后执行onDragEnd函数 */
- LTEvent.addListener(controlOfweilan,"mouseup",doit); /* 设置在用户拉框完成之后执行doit函数 */
- }
- /*====================== 在标记被点击的时候执行的函数,marker的onClick监听的事件 ====================== */
- function doitForMarker()
- {
- onClickForMarker();
- }
- /*====================== 在标记被点击的时候执行的函数 ====================== */
- function onClickForMarker()
- {
- var reg=new LTRegoLoader();
- LTEvent.bind(reg,"loaded",reg,myLocation);
- reg.loadDescribe(point);
- }
- /*====================== onClickForMarker函数中，reg对象绑定的事件myLocation ====================== */
- function myLocation(obj)
- {
- var myHtml = obj.describe; /* 逆地理信息描述 */
- var infoWin=mapText.openInfoWinHtml(myHtml);
- infoWin.setTitle("当前具体位置");
- }
- /*====================== 本函数是在用户每次拉框操作完成之后执行的操作，bounds是代表用户拉框选择的区域的范围 ====================== */
- function doit(bounds)
- {
- var str="电子围栏区域坐标为：\n";
- str+="起点："+bounds.getXmin()+","+bounds.getYmax()+"\n";
- str+="终点："+bounds.getXmax()+","+bounds.getYmin()+"\n";
- alert(str);
- LatMin = bounds.getYmin(); /* 保存当前矩形框的经纬度值，在后面的判断中要用到 */
- LatMax = bounds.getYmax();
- LonMin = bounds.getXmin();
- LonMax = bounds.getXmax();
- rect = new LTRect(bounds); /* 矩形框对象 */
- map.addOverLay(rect); /* 将矩形框对象添加到地图上 */
- }
- /*====================== 本函数是在用户每次拖拽标注操作完成之后执行的操作 ======================*/
- function onDragEnd(point)
- {
- var str="标注被拖动到：\n";
- str+="经度："+point.getLongitude()+"\n";
- str+="纬度："+point.getLatitude()+ "\n";
- alert(str);
- if(point.getLongitude()>LonMin && point.getLongitude()<LonMax && point.getLatitude()<LatMax && point.getLatitude()>LatMin)
- {
- alert("您当前的位置在矩形内，OK！");
- rect.setLineColor("blue");
- rect.setFillColor("green");
- rect.setLineStroke(3);
- }
- else
- {
- alert("您的位置不在在矩形内，Warning！");
- rect.setLineColor("red");
- rect.setFillColor("red");
- rect.setLineStroke(5);
- }
- }
- /*====================== 右键菜单====================== */
- function mapZoomIn(){ map.zoomIn(); }
- function mapZoomOut(){ map.zoomOut(); }
- function mapMarker(p){ var markerRightMenu0 = new LTMarker(p); map.addOverLay(markerRightMenu0); }
- /*====================== 测距====================== */
- function onDraw(points,length,polyline)
- {
- alert("结束测距");
- }
- /*====================== 添加信息浮窗 ====================== */
- function getClickCallBack(mapText,myHtml)
- {
- return function()
- {
- mapText.openInfoWinHtml( myHtml );
- }
- }
- /*====================== 打开实时交通 ====================== */
- function openTraffic()
- {
- mgr.addTips(); /* 显示路况提示信息*/
- if(mgr.getTrafficEnabled()) /* 判断实时交通是否开启,true为开启，false为关闭 */
- {
- alert("实时交通已经开启");
- return;
- }
- var city = document.getElementById("city"); /* 将地图定位到下拉菜单所显示的城市*/
- map.centerAndZoom(city.value,8);
- mgr.openTraffic(city.value); /*打开实时交通*/
- }
- /*====================== 关闭时实交通 ======================*/
- function closeTraffic()
- {
- mgr.removeTips(); /* 显示路况提示信息 */
- mgr.closeTraffic(); /* 关闭时实交通 */
- }
- /*====================== 更换城市 ====================== */
- function changeCity()
- {
- if(mgr && mgr.getTrafficEnabled()) /*如果实时交通已打开，将其关闭*/
- {
- mgr.closeTraffic();
- }
- var city = document.getElementById("city");
- map.centerAndZoom(city.value,8); /* 将地图定位到下拉菜单所显示的城市 */
- }
- </script>
- </head>
- <body onLoad="onLoad()">
- <body leftmargin= "0 " topmargin= "0 " marginwidth= "0" marginheight= "0 ">
- <div id="mapDiv" style="position:absolute;width:100%; height:100%;"></div>
- <div id="trafficID" style="position:absolute;right:180px;">
- <table>
- <tr>
- <td>实时路况：
- <select id="city" onChange="changeCity();">
- <option value="beijing">北京</option>
- <option value="shanghai">上海</option>
- <option value="guangzhou">广州</option>
- <option value="shenzhen">深圳</option>
- <option value="chengdu">成都</option>
- <option value="chongqing">重庆</option>
- <option value="shenyang">沈阳</option>
- </select>
- <input type="button" name="button" value="开启" onClick="openTraffic();">
- <input type="button" name="button" value="关闭" onClick="closeTraffic();">
- </td>
- </tr>
- </table>
- </div>
- </body>
- </html>
时间： 2024-07-31 14:31:37