项目需求 根据百度api给出的接口 实现从 始发地→目的地 线路规划 以及 车辆的实时位置跟踪定位
1.首先引入百度API
<script type="text/javascript" src="http://api./api?v=2.0&ak=g0EGHiZVlG52nvXSmZsozaQVERtS9dPh"></script>
2.HTML内容
<body><div id="allmap"></div></body>
3.在HTML外面具体逻辑
<script src="/jds/JavaScript/jquer1.8.3.js"></script><script type="text/javascript">var coordinateArr = [] //定义一个全聚德所有的绘制线路点坐标数组var icona = []; //定义标注图标数组var zhandianpoint = []; //定义站点坐标数组var map = new BMap.Map("allmap");map.enableScrollWheelZoom(true); //可以缩放移动map.centerAndZoom(new BMap.Point(122.187499, 37.974944), 10);//添加缩略地图控件//设置标注的图标var icon1 = new BMap.Icon("image/shang.png", new BMap.Size(25, 33)); //上车点var icon2 = new BMap.Icon("image/xia.png", new BMap.Size(25, 33)); //下车点var icon3 = new BMap.Icon("image/tujing.png", new BMap.Size(25, 25)); //站点//var icon4 = new BMap.Icon("", new BMap.Size(25, 25)); //站点icona.push(icon1); //将图标对象存入数组icona.push(icon2); //将图标对象存入数组icona.push(icon3); //将图标对象存入数组//icona.push(icon4);$(document).ready(function() {//获取站点信息$.get("js/zhandianceshi.json", function(d) {$.each(d.data, function(idx, item) {// if(idx == 0) {// return true; //同countinue,返回false同break// }var lng_lat = this.geometry.coordinates; //获取接送数据var point = new BMap.Point(lng_lat[0], lng_lat[1]); // 创建点zhandianpoint.push(point); //将所有点坐标给数组// 创建标注坐标 设置所有点坐标图片 这个一定要在循环里面if(this.jiuzheng!==1){var marker = new BMap.Marker(point, {icon: icona[2]});map.addOverlay(marker); var content = "<div style='overflow:hidden;width:300px;'>"; //设置标注信息 这个也要在循环里面这是写的 上车下车content = content + "<p style='padding:0;margin:0 ;width:80%;border-radius:4px;margin:0 auto ;margin-bottom:10px; border:1px solid #f90;overflow:hidden;'><span style='display: inline-block; width:40% ;line-height:30px ; color:green ; text-align: center; float: left;'>" + this.geometry.type + "</span><span style='display: inline-block; width:60% ; line-height:30px ; color:green ; text-align: center; float: left;'>" + this.name + "</span></p>";content = content + "<div style=' width:50% ; float: left;overflow:hidden;'>";content = content + "<img src='" + this.image1 + "'style='width:140px;height:105px;'/>";content = content + "<span style='width:140px;display: inline-block;font-size:12px;'>" + this.title1 + "</span>";content = content + "</div>";content = content + "<div style=' width:50% ; float:right;overflow:hidden;'>";content = content + "<img src='" + this.image2 + "'style='width:140px;height:105px;'/>";content = content + "<span style='width:140px;display: inline-block;font-size:12px;'>" + this.title2 + "</span>";content = content + "</div>";content += "</div>";var infowindow = new BMap.InfoWindow(content);marker.addEventListener("click", function() {this.openInfoWindow(infowindow);});//将标注添加到地图 这个一定要在循环里面}});//alert(zhandianpoint.length)//上车点 下车点 一定要在循环外边//设置第一个点的坐标(上车点)图片var marker1 = new BMap.Marker(zhandianpoint[0], {icon: icona[0]});//设置最后一个点的坐标(下车点)图片var marker2 = new BMap.Marker(zhandianpoint[zhandianpoint.length - 1], {icon: icona[1]});// var marker3 = new BMap.Marker(zhandianpoint[zhandianpoint.length - 2], {// icon: icona[0]//});//map.removeOverlay(marker3);map.addOverlay(marker1); //将标注添加到地图map.addOverlay(marker2); //将标注添加到地图//map.addOverlay(marker3);//marker3.addEventListener("click", function() {// //this.openInfoWindow(infowindow1);//});//map.removeOverlay(marker3);var content1 = "<div style='overflow:hidden; width:300px;'>"; //设置标注信息 这个也要在循环里面这是写的 上车下车content1 = content1 + "<p style='padding:0;margin:0 ;width:80%;border-radius:4px;margin:0 auto ;margin-bottom:10px; border:1px solid #f90;overflow:hidden;'><span style='display: inline-block; width:40% ;line-height:30px ; color:green ; text-align: center; float: left;'>" + d.data[0].geometry.type + "</span><span style='display: inline-block; width:60% ; line-height:30px ; color:green ; text-align: center; float: left;'>" + d.data[0].name + "</span></p>";content1 = content1 + "<div style=' width:50% ; float: left;overflow:hidden;'>";content1 = content1 + "<img src='" + d.data[0].image1 + "'style='width:140px;height:105px;'/>";content1 = content1 + "<span style='width:140px;display: inline-block;font-size:12px;'>" + d.data[0].title1 + "</span>";content1 = content1 + "</div>";content1 = content1 + "<div style=' width:50% ; float:right;overflow:hidden;'>";content1 = content1 + "<img src='" + d.data[0].image2 + "'style='width:140px;height:105px;'/>";content1 = content1 + "<span style='width:140px;display: inline-block;font-size:12px;'>" + d.data[0].title2 + "</span>";content1 = content1 + "</div>";content1 += "</div>";var infowindow1 = new BMap.InfoWindow(content1);marker1.addEventListener("click", function() {this.openInfoWindow(infowindow1);});if(d.data[d.data.length - 1].image1==""){var content2 = "<div style='overflow:hidden;width:300px;'>"; //设置标注信息 这个也要在循环里面这是写的 上车下车content2 = content2 + "<p style='padding:0;margin:0 ;width:80%;border-radius:4px;margin:0 auto ;margin-bottom:10px; border:1px solid #f90;overflow:hidden;'><span style='display: inline-block; width:40% ;line-height:30px ; color:green ; text-align: center; float: left;'>" + d.data[d.data.length - 1].geometry.type + "</span><span style='display: inline-block; width:60% ; line-height:30px ; color:green ; text-align: center; float: left;'>" + d.data[d.data.length - 1].name + "</span></p>";content2 = content2 + "<div style=' width:48% ; float: left;overflow:hidden;'>";content2 = content2 + "<span style='width:140px;display: inline-block;font-size:12px;'>" + d.data[d.data.length - 1].title1 + "</span>";content2 = content2 + "</div>";content2 = content2 + "<div style=' width:48% ; float:right;overflow:hidden;'>";content2 = content2 + "<span style='width:140px;display: inline-block;font-size:12px;'>" + d.data[d.data.length - 1].title2 + "</span>";content2 = content2 + "</div>";content2 += "</div>";}else{var content2 = "<div style='overflow:hidden;width:300px;'>"; //设置标注信息 这个也要在循环里面这是写的 上车下车content2 = content2 + "<p style='padding:0;margin:0 ;width:80%;border-radius:4px;margin:0 auto ;margin-bottom:10px; border:1px solid #f90;overflow:hidden;'><span style='display: inline-block; width:40% ;line-height:30px ; color:green ; text-align: center; float: left;'>" + d.data[d.data.length - 1].geometry.type + "</span><span style='display: inline-block; width:60% ; line-height:30px ; color:green ; text-align: center; float: left;'>" + d.data[d.data.length - 1].name + "</span></p>";content2 = content2 + "<div style=' width:48% ; float: left;overflow:hidden;'>";content2 = content2 + "<img src='" + d.data[d.data.length - 1].image1 + "'style='width:140px;height:105px;'/>";content2 = content2 + "<span style='width:140px;display: inline-block;font-size:12px;'>" + d.data[d.data.length - 1].title1 + "</span>";content2 = content2 + "</div>";content2 = content2 + "<div style=' width:48% ; float:right;overflow:hidden;'>";content2 = content2 + "<img src='" + d.data[d.data.length - 1].image2 + "'style='width:140px;height:105px;'/>";content2 = content2 + "<span style='width:140px;display: inline-block;font-size:12px;'>" + d.data[d.data.length - 1].title2 + "</span>";content2 = content2 + "</div>";content2 += "</div>";}var infowindow2 = new BMap.InfoWindow(content2);marker2.addEventListener("click", function() {this.openInfoWindow(infowindow2);});// var p1 = zhandianpoint[0];//上车点// var p2 = zhandianpoint[zhandianpoint.length - 1];//下车点// var myP3 = zhandianpoint[1]; //途径// var myP4 = zhandianpoint[2]; //途径// var myP5 = zhandianpoint[3]; //途径var driving = new BMap.DrivingRoute(map); //创建驾车实例var shugroup = Number((zhandianpoint.length) - 1)//alert(shugroup)for(var i = 0; i < shugroup; i++) {driving.search(zhandianpoint[i], zhandianpoint[i + 1]); //waypoints表示途经点}// driving.search(p1, myP3); //第一个驾车搜索 // driving.search(myP3, myP4); //第一个驾车搜索// driving.search(myP4, myP5); //第一个驾车搜索// driving.search(myP5, p2); //第一个驾车搜索driving.setSearchCompleteCallback(function() {var pts = driving.getResults().getPlan(0).getRoute(0).getPath(); //通过驾车实例,获得一系列点的数组var polyline = new BMap.Polyline(pts, {strokeColor: "green", //颜色strokeWeight: 4, //粗细strokeOpacity: 0.6 //不透明度})map.addOverlay(polyline);map.setViewport(zhandianpoint);//map.setViewport(allPoints);});});});</script>4.zhandianceshi.json脚本
{
“data”:[
{“id”:1,
“jiuzheng”:0,
“name”: “学校1”,
“image1”: “image/1-1.jpg”,
“image2”: “image/1-2.jpg”,
“title1”: “说明1”,
“title2”: “说明2”,
“geometry”:
{“type”: “上车点”, “coordinates”:[122.384485,36.101752]}
},
{“id”:2,
“jiuzheng”:0,
“name”: “学校2”,
“image1”: “image/2-1.jpg”,
“image2”: “image/2-2.jpg”,
“title1”: “说明1”,
“title2”: “说明2”,
“geometry”:
{“type”: “途径站点”, “coordinates”:[122.374139,36.101374]}
},
{“id”:3,
“jiuzheng”:0,
“name”: “学校3”,
“image1”: “image/3-1.jpg”,
“image2”: “image/3-2.jpg”,
“title1”: “说明1”,
“title2”: “说明2”,
“geometry”:
{“type”: “途径站点”, “coordinates”:[122.367837,36.10335]}
},
{“id”:4,
“jiuzheng”:1,
“name”: “纠正点”,
“image1”: “”,
“image2”: “”,
“title1”: “”,
“title2”: “”,
“geometry”:
{“type”: “途径站点”, “coordinates”:[122.367855,36.10355]}
},
{“id”:5,
“jiuzheng”:0,
“name”: “终点”,
“image1”: “”,
“image2”: “”,
“title1”: “”,
“title2”: “”,
“geometry”:
{“type”: “下车点”, “coordinates”: [120.125554,36.314088]}
}
]
}
下面说说 车辆是如何定位的实现方法:
这两个脚本一定要加载地图下边 等地图加载完成
1创建小车实例:new_carAction.js
//车辆相关操作(必须放在地图初始化完成之后加载)//----------------小车实体类(用于封装小车常用操作)---------------------var carEntity = (function() {var lastTime;var carPosition; //小车位置var carLabel; //小车标注var car; //小车//创建小车(小车图标,小车初始化经、纬度)var createCar = function(carIcon, lng, lat) {carPosition = new BMap.Point(lng, lat);car = new BMap.Marker(carPosition, {icon: carIcon});car.setTop(true);car.disableMassClear()return car;};//创建标注(标注显示的信息(标题+标注内容),标注相对小车偏移位置)var createLabel = function(carTitle, carContent, size1, size2) {carLabel = new BMap.Label(carContent, {offset: new BMap.Size(size1, size2)});carLabel.setTitle(carTitle);carLabel.disableMassClear();return carLabel;};//创建小车并设置标注var createCarAndSetLabel = function(carIcon, lng, lat, carTitle, carContent, size1, size2) {car = createCar(carIcon, lng, lat);car.setLabel(createLabel(carTitle, carContent, size1, size2));return car;};//更改小车坐标及方向var changeCarPostion = function(lng, lat, rot) {if (carPosition) {carPosition.lng = lng;carPosition.lat = lat;car.setPosition(carPosition); //更新坐标car.setRotation(rot); //修改方向}};//给小车绑定事件var addCarEvent = function(act, operation) {car.addEventListener(act, operation);};//删除小车某个绑定事件var removeCarEvent = function(act, operation) {car.addEventListener(act, operation);};//public接口(对外开放的调用方法)return {getCar: function() {return car},getPosition: function() {return carPosition;},getLabel: function() {return carLabel;},getTime: function() {return lastTime;},setTime: function(nowTime) {lastTime = nowTime;},//创建标注newLabel: createLabel,//创建小车newCar: createCar,//创建车辆和标注(合成上面两步)newCarAndSetLabel: createCarAndSetLabel,//改变车辆位置changePosition: changeCarPostion,//增加绑定事件addEvent: addCarEvent,//删除绑定事件delEvent: removeCarEvent}});//--------------------弹出窗口信息实体类-------------------var publicInfoWindowEntity = (function() {// 创建信息窗口对象var publicInfoWindow = new BMap.InfoWindow("<div style='width:100%;height:100%'><h4 style='margin:0 0 5px 0;padding:0.2em 0' id='publicInfoWindowTitle'>车辆信息</h4>" +"<img style='float:right;margin:1px' id='publicInfoWindowImg' src='/entbus/themes/default/image/che.png' width='12' height='22' title='车辆信息'/>" +"<p>车牌号:<span id='publicInfoWindowCarNum'>" + 1 +"</span></p><p>位置:<span id='publicInfoWindowCarLng'>" + 2 +"</span>,<span id='publicInfoWindowCarLat'>" + 3 + "</span></p><p>定位时间:<span></span></p></div>");//改变公共弹出窗口function changePublicInfoWindow(witchCar, lastTime) {var carTitle = witchCar.getLabel().getTitle();var carPos = witchCar.getPosition();publicInfoWindow.setTitle(carTitle);publicInfoWindow.setContent("<div style='width:100%;height:100%'><h4 style='margin:0 0 5px 0;padding:0.2em 0' id='publicInfoWindowTitle'>车辆信息</h4>" +"<img style='float:right;margin:1px' id='publicInfoWindowImg' src='/entbus/themes/default/image/che.png' width='12' height='25' title='车辆信息'/>" +"<p>车牌号:<span id='publicInfoWindowCarNum'>" + carTitle +"</span></p><p>位置:<span id='publicInfoWindowCarLng'>" + carPos.lng +"</span>,<span id='publicInfoWindowCarLat'>" + carPos.lat + "</span></p><p>定位时间:<span></span>" + lastTime + "</p></div>");}return {//获取当前窗口getInfoWindow: function() {return publicInfoWindow;},//改变窗口信息changeInfo: changePublicInfoWindow}});//创建车辆公共图标方法var createCarIcon = function(imgUrl, width, height, offset1, offset2) {return new BMap.Icon(imgUrl, new BMap.Size(width, height), { //小车图片//offset: new BMap.Size(0, -5), //相当于CSS精灵imageOffset: new BMap.Size(offset1, offset2) //图片的偏移量。为了是图片底部中心对准坐标点。});};//创建公共的小车图标所有小车都可以使用var myIcon = createCarIcon("/entbus/themes/default/image/che.png", 12, 25, 0, 0);
2.小车运动代码:new_demoAction.js
//实例演示//用于演示车辆定位和电子围栏功能//创建一个小车操作对象var car1 = new carEntity();//创建小车实例//car1.newCarAndSetLabel(myIcon, 120.399275,36.087634, "鲁B1151", "鲁B1151", 0, -15);//把小车添加到地图//map.addOverlay(car1.newCarAndSetLabel(myIcon, 120.399275,36.087634, "鲁B1151", "鲁B1151", 0, -15));//可以这样做car1.newCar(myIcon) //创建小车实例map.addOverlay(car1.getCar()); //将小车添加到地图//car1.getCar().hide();//显示小车function showCar() {car1.getCar().show();}//隐藏小车function hideCar() {car1.getCar().hide();}//测试小车跑起来function testRun(pid) {//获取站点信息// var chedongpoint=[] //定义线路数组var chedongpointlng = []//定义线路经度数组var chedongpointlat = []//定义线路纬度数组var chedongpointrot = []//定义线路旋转角度数组$.get("实时坐标.json", function (d) {var gps_lng = 0var gps_lat = 0var gps_rot = 0var bd_lngvar bd_latvar bd_rot$.each(d.data, function(idx, item) {// if(idx == 0) {// return true; //同countinue,返回false同break// } var lng_lat = this.coordinates; //获取json数据var point = new BMap.Point(lng_lat[0],lng_lat[1]);var pointlng =lng_lat[0]; // 创建经度点var pointlat = lng_lat[1]; // 创建纬度点var pointrot = lng_lat[2]; // 创建小车偏移量gps_lng = lng_lat[0]; // 创建经度点gps_lat = lng_lat[1]; // 创建纬度点gps_rot = lng_lat[2]; // 创建小车偏移量//chedongpoint.push(point);chedongpointlng.push(pointlng); //将经度点传数组chedongpointlat.push(pointlat);//将纬度点传数组chedongpointrot.push(pointrot);//将小车偏移量传数组});var gpsPoint = new BMap.Point(gps_lng, gps_lat);translateCallback = function (pointa) {bd_lng = pointa.lngbd_lat = pointa.latbd_rot = gps_rot;// alert(pointa.lng + "," + pointa.lat);}BMap.Convertor.translate(gpsPoint, 0, translateCallback);//真实经纬度转成百度坐标//alert(chedongpoint.length)setTimeout(function () {car1.changePosition(bd_lng, bd_lat, bd_rot); // 小车的动态位置}, 1000);});
如有使用请换上 自己的 坐标点 即可
因为第一次写 有什么不足请指教
详情QQ:1140376389