项目需求 根据百度api给出的接口 实现从 始发地→目的地 线路规划 以及 车辆的实时位置跟踪定位
1.首先引入百度API
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=g0EGHiZVlG52nvXSmZsozaQVERtS9dPh"></script>2.HTML内容
<body>
<div id="allmap"></div>
</body>3.在HTML外面具体逻辑
<script src="http://www.anfenglei.com/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 = 0
var gps_lat = 0
var gps_rot = 0
var bd_lng
var bd_lat
var 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.lng
bd_lat = pointa.lat
bd_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
4125
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
