1500字范文 > 百度地图api 自定义驾车线路规划车辆实时定位

百度地图api 自定义驾车线路规划车辆实时定位

时间：2024-07-08 12:38:32

项目需求根据百度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外面具体逻辑

{

“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

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。