js_baidumap_页面上添加节点,并将这些节点连成线路,查询线路信息
2013-01-08 15:44
483 查看
百度地图效果图:
主要实现方式:
引用百度api,依靠javascript实现。
baidumap.js
baidumap.css
baidumap.html
主要实现方式:
引用百度api,依靠javascript实现。
baidumap.js
//模拟从南京到台北的线路 //南京:118.81,32.03 //常州:119.98,31.79 //无锡:120.35,31.54 //苏州:120.58,31.27 //上海:121.48,31.20 //杭州:120.16,30.27 //绍兴:120.59,29.99 //宁波:121.55,29.88 //台州:121.42,28.66 //温州:120.71,28.01 //福州:119.31,26.07 //台北:121.52,25.04 var RARTH_RADIUS = 6378137.0;//地球半径 单位M var PI = Math.PI; $(function(){ //创建一个地址解析器实例 var myGeo = new BMap.Geocoder(); //获取所经过城市的数组 var cityArray = createCityArray(); //获取当前所在城市 var curCity = new BMap.Point(121.42,28.66); //var point = new BMap.Point(121.48,31.20);//创建一个坐标点 //创建地图实例 var map = createMap(curCity); //添加控件 createControl(map); //获取点击点坐标 //getPosition(map); //获得当前地图级别 //getZoom(map); //创建一个圆形覆盖物 //createCircle(map,point,8000,"red","red"); //绘线 var disc = createAllLine(map,cityArray,curCity); //绘覆盖物 createAllCircle(map,cityArray,curCity,disc,myGeo); //两个点之间划线 //createLine(map,new BMap.Point(120.35,31.54),new BMap.Point(118.81,32.03),"red",6,1); //测试两点间的距离 //alert(getDistance(new BMap.Point(120.35,31.54),new BMap.Point(120.58,31.27))); }); //根据中心点坐标创建地图 function createMap(curCity){ var map = new BMap.Map("container");//创建地图实例 map.centerAndZoom(curCity,7);//初始化地图,设置中心点坐标和地图级别 map.enableScrollWheelZoom(); // 开启鼠标滚轮缩放 map.enableKeyboard(); // 开启键盘控制 map.enableContinuousZoom(); // 开启连续缩放效果 map.enableInertialDragging(); // 开启惯性拖拽效果 return map; } //向地图添加控件 function createControl(map){ map.addControl(new BMap.NavigationControl({type:BMAP_NAVIGATION_CONTROL_LARGE})); //地图添加平移缩放控件 map.addControl(new BMap.ScaleControl());//比例尺控件 map.addControl(new BMap.OverviewMapControl());//缩略地图控件 map.addControl(new BMap.MapTypeControl());//地图类型控件 } //获取当前点击点的坐标 function getPosition(map){ map.addEventListener("click",function(e){ alert("经度:"+e.point.lng+",纬度:"+e.point.lat); }); } //获取当前地图缩放级别 function getZoom(map){ map.addEventListener("zoomend",function(){ alert("地图缩放至:"+this.getZoom()+"级"); }); } //创建一个圆形覆盖物 function createCircle(map,point,radius,strColor,filColor){ //需要为创建的圆形覆盖物设置颜色 var myCircle = new BMap.Circle(point,radius,{strokeColor:strColor, fillColor:filColor,strokeOpacity:1,fillOpacity:1}); map.addOverlay(myCircle); return myCircle; } //创建南京 常州 无锡 苏州 上海 五个站点的圆形覆盖物 function createAllCircle(map,cityArray,curCity,disc,myGeo){ // for(var i=0;i<cityArray.length;i++){ //从起点开始为站点添加默认覆盖物 createCircle(map,cityArray[i],8000,"red","red"); if((curCity.lng === cityArray[i].lng) && (curCity.lat === cityArray[i].lat)){ var curCityCircle = createCircle(map,curCity,8000,"blue","blue"); //为当前据点的圆形覆盖物添加点击事件 alertInfo(map,curCityCircle,curCity,disc,myGeo); //为当前所在点之后的站点添加不同的颜色 if(i == cityArray.length-1){ return; } for(var j=i+1;j<cityArray.length;j++){ createCircle(map,cityArray[j],8000,"silver","silver"); } //执行完后,结束循环 break; } } } //模拟创建所有城市,该数据应该从数据库中获取 function createCityArray(){ var cityArray = new Array(); cityArray.push(new BMap.Point(118.81,32.03)); cityArray.push(new BMap.Point(119.98,31.79)); cityArray.push(new BMap.Point(120.35,31.54)); cityArray.push(new BMap.Point(120.58,31.27)); cityArray.push(new BMap.Point(121.48,31.20)); cityArray.push(new BMap.Point(120.16,30.27)); cityArray.push(new BMap.Point(120.59,29.99)); cityArray.push(new BMap.Point(121.55,29.88)); cityArray.push(new BMap.Point(121.42,28.66)); cityArray.push(new BMap.Point(120.71,28.01)); cityArray.push(new BMap.Point(119.31,26.07)); cityArray.push(new BMap.Point(121.52,25.04)); return cityArray; } //为两两站点之间划线 function createLine(map,pointA,pointB,strColor,strWeight,strOpacity){ var polyline = new BMap.Polyline([pointA,pointB],{strokeColor:strColor,strokeWeight:strWeight,strokeOpacity:strOpacity}) map.addOverlay(polyline); } //为线路描线 function createAllLine(map, cityArray, curCity){ var disc = 0; for(var i=0;i<cityArray.length;i++){ if(i == cityArray.length-1){ return 0; } createLine(map,cityArray[i],cityArray[i+1],"red",2,1); if((curCity.lng === cityArray[i].lng) && (curCity.lat === cityArray[i].lat)){ for(var j = i;j<cityArray.length-1;j++){ //为两点绘线 createLine(map,cityArray[j],cityArray[j+1],"silver",3,1); //测量两点间的距离 disc += getDistance(cityArray[j],cityArray[j+1]); //alert(disc); } break; } } return disc; } //为当前据点添加点击事件 function alertInfo(map,curCityCircl,curCity,disc,myGeo){ curCityCircl.addEventListener("click",function(e){ //首先获取当前点的坐标 var location = analyzeLongitude(e.point); //alert(location); //计算当前点到终点的距离 //对距离信息进行处理 var realDisc = analyzeDisc(disc); //alert("距离终点:"+disc.toFixed(2)+"公里"); //获取当前点的城市名 myGeo.getLocation(curCity,function(result){ var address = result.addressComponents; //alert("所在地:"+address.city); //创建信息窗口对象 var infoWindow = new BMap.InfoWindow( location+"<br/>"+ realDisc+"<br/>"+ "所在地:"+address.city ,{width:200,height:90,title:"所在地信息"}); map.openInfoWindow(infoWindow,curCity); }); }); } //经纬度解析 function analyzeLongitude(point){ //解析经度 var x = analyzeX(point.lng); //解析纬度 var y = analyzeY(point.lat); return x+" , "+y; } //解析经度 function analyzeX(x){ var newX = x.toFixed(2); if(x>0 && x<180){ return "东经:"+newX; }else{ return "西经:"+Math.abs(newX); } } //解析纬度 function analyzeY(y){ var newY = y.toFixed(2); if(y>0 && y<180){ return "北纬:"+newY; }else{ return "南纬:"+Math.abs(newY); } } // function getRad(d){ return d*PI/180.0; } //获取地球上任意两点间的距离 function getDistance(pointA,pointB){ if((pointA.lng === pointB.lng) && (pointA.lat == pointB.lat)){ return 0; } var f = getRad((pointA.lat+pointB.lat)/2); var g = getRad((pointA.lat-pointB.lat)/2); var l = getRad((pointA.lng-pointB.lng)/2); var sg = Math.sin(g); var sl = Math.sin(l); var sf = Math.sin(f); var s,c,w,r,d,h1,h2; var a = RARTH_RADIUS; var f1 = 1/298.257; sg = sg*sg; sl = sl*sl; sf = sf*sf; s = sg*(1-sl) + (1-sf)*sl; c = (1-sg)*(1-sl) + sf*sl; w = Math.atan(Math.sqrt(s/c)); r = Math.sqrt(s*c)/w; d = 2*w*a; h1 = (3*r - 1)/2/c; h2 = (3*r + 1)/2/s; return d*(1 + f1*(h1*sf*(1-sg) - h2*(1-sf)*sg))/1000; } //对距离信息进行处理 function analyzeDisc(disc){ if(disc == 0){ return "已到达目的地"; }else{ return "距离目的地还有"+disc.toFixed(2)+"公里"; } }
baidumap.css
#container{ height:100%; width:100%; }
baidumap.html
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <!--引用百度地图API--> <link rel="stylesheet" type="text/css" href="baidumap.css" /> <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4&services=true"></script> <script type="text/javascript" src="../jquery-1.4.4.js"></script> <script type="text/javascript" src="baidumap.js"></script> </head> <body> <h1>百度定位</h1> <!--百度地图容器--> <center> <div id="container"> </div> </center> </body> </html>
相关文章推荐
- html+css+angularjs 实现商品库存信息管理页面 可删除/批量删除/可模糊查询/可升序降序
- 在昨天作业的基础上添加 :删除按钮,修改并保存按钮 和 添加按钮。完成这些按钮所对应的功能/新建页面DataXML,使用GridView显示book.xm中的图书信息
- php和js 获取当前页面的查询信息
- 1. AngularJS+路由+JQuery:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息(路由显示添加页面)
- 2. AngularJs+JQuery:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息
- AngularJs+JQuery:模糊查询过滤内容,下拉菜单排序,过滤敏感字符,验证判断后添加表格信息
- Flex+JS:实现可视化的多叉树遍历、查询、聚焦、添加、删除节点
- html+css+angularjs 实现商品库存信息管理页面 可删除/批量删除/可模糊查询/可升序降序
- JS添加节点方法与JQuery添加节点方法的比较及总结
- 数据操作后,页面alert提示例子3-后台js打印提示信息并重定向
- js获取当前页面的信息
- js获取当前页面的URL信息
- js中创建html标签、添加select下默认的option的value和text、删除select元素节点下所有的OPTION节点
- JS添加删除一组文本框并对输入信息加以验证判断其正确性
- jQuery打印插件(jQuery.print.js)在单页面中,打印的是首页的信息而不是iframe的内容
- baidu页面类型信息缓存过期时间
- JS获取当前页面的URL等信息
- js提示信息后,转到指定页面
- 如何用js得到当前页面的url信息方法(JS获取当前网址信息)
- 学生信息的添加与查询