H5页面引用百度地图绘制车辆历史轨迹
引入
<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=Go8TPnKDL44WFZbOATH4AsbA7qTwNosi"></script>
html代码
<div id="allmap" style="width: 100%;height: 100vh"></div>
js代码
function openbMap(){
var cars = {"car_5":[{"id":1,"order_id":651,"userNane": "王五","userPhoe": "18154679854","driver_id":5,"logistics_id":21,"lng":108.96903,"lat":34.307798,"position":"西安高新区高新4路","created_at":"2018-09-07 16:23:57","updated_at":"2018-09-07 16:23:57","with_driver":{"id":5,"logistics_comp_id":20,"userNane":"001","phone":"18000000010","plate_number":"","car_model":null,"status":0,"created_at":"2018-09-17 18:06:15","updated_at":"2018-09-17 18:06:15"}},{"id":2,"order_id":651,"userNane": "王五","userPhoe": "18154679854","driver_id":5,"logistics_id":21,"lng":108.977783,"lat":34.31214,"position":"西安高新区高新5路","created_at":"2018-09-07 16:24:34","updated_at":"2018-09-07 16:24:34","with_driver":{"id":5,"logistics_comp_id":20,"userNane":"001","phone":"18000000010","plate_number":"","car_model":null,"status":0,"created_at":"2018-09-17 18:06:15","updated_at":"2018-09-17 18:06:15"}}],"car_6":[{"id":3,"order_id":651,"userNane": "张三","userPhoe": "18154679854","driver_id":6,"logistics_id":20,"lng":108.977639,"lat":34.292697,"position":"西安市高新区\n","created_at":"2018-09-20 10:09:22","updated_at":"2018-09-20 10:09:22","with_driver":null},{"id":4,"order_id":651,"userNane": "张三","userPhoe": "18154679854","driver_id":6,"logistics_id":20,"lng":109.002217,"lat":34.296991,"position":"西安市高新区\n","created_at":"2018-09-20 10:13:42","updated_at":"2018-09-20 10:13:42","with_driver":null},{"id":5,"userNane": "张三","userPhoe": "18154679854","order_id":651,"driver_id":6,"logistics_id":20,"lng":109.037718,"lat":34.29556,"position":"西安市高新区\n","created_at":"2018-09-20 10:19:48","updated_at":"2018-09-20 10:19:48","with_driver":null}]};
var map = new BMap.Map("allmap");
if(cars.length>0)
{
map.centerAndZoom(new BMap.Point(that.cars[0][0].lng, cars[0][0].lat), 13);
}
else
{
alert("未查询到历史轨迹数据");
map.centerAndZoom("西安",13);
}
map.enableScrollWheelZoom(false);
map.addEventListener("tilesloaded",function(){
if(cars.length > 0)
{
for(var i = 0; i < cars.length; i++)
{
var pois = [];
if(cars[i].length > 0)
{
for(var j = 0; j < cars[i].length; j++)
{
pois.push(new BMap.Point(cars[i][j].lng, cars[i][j].lat));
}
}
var polyline =new BMap.Polyline(pois, {
enableEditing: false,
enableClicking: true,
strokeWeight:'3',
strokeOpacity: 1,
strokeColor:"#fa5f02"
});
map.addOverlay(polyline);
function drawStart(point, text){
this._point = point;
this._text = text;
}
drawStart.prototype = new BMap.Overlay();
drawStart.prototype.initialize = function(map){
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.backgroundColor = "#08B358";
div.style.border = "none";
div.style.color = "white";
div.style.height = "25px";
div.style.width = "25px";
div.style.borderRadius = "50%";
div.style.textAlign = "center";
div.style.padding = "2px";
div.style.lineHeight = "22px";
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontSize = "13px";
var span = this._span = document.createElement("span");
div.appendChild(span);
var arrow = this._arrow = document.createElement("div");
arrow.style.position = "absolute";
arrow.style.width = "11px";
arrow.style.height = "11px";
arrow.style.backgroundColor = "#08B358";
arrow.style.transform = "rotate(45deg)";
arrow.style.top = "17px";
arrow.style.borderRadius = "50px 50% 50% 50%";
arrow.style.left = "7px";
arrow.style.overflow = "hidden";
div.style.zIndex = "99";
div.appendChild(arrow);
span.appendChild(document.createTextNode(this._text));
map.getPanes().labelPane.appendChild(div);
addClickHandler(that.cars[i][0], that.cars[i][that.cars[i].length -1],div, that.cars[i][0]);
return div;
}
drawStart.prototype.draw = function(){
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) - 6 + "px";
this._div.style.top = pixel.y - 29 + "px";
}
var startOpt = new drawStart(new BMap.Point(that.cars[i][0].lng,that.cars[i][0].lat), "起");
map.addOverlay(startOpt);
function drawEnd(point, text){
this._point = point;
this._text = text;
}
drawEnd.prototype = new BMap.Overlay();
drawEnd.prototype.initialize = function(map){
this._map = map;
var div = this._div = document.createElement("div");
div.style.position = "absolute";
div.style.zIndex = BMap.Overlay.getZIndex(this._point.lat);
div.style.backgroundColor = "#f00";
div.style.border = "none";
div.style.color = "white";
div.style.height = "25px";
div.style.width = "25px";
div.style.borderRadius = "50%";
div.style.textAlign = "center";
div.style.padding = "2px";
div.style.lineHeight = "22px";
div.style.whiteSpace = "nowrap";
div.style.MozUserSelect = "none";
div.style.fontSize = "13px";
div.style.zIndex = "100";
var span = this._span = document.createElement("span");
div.appendChild(span);
var arrow = this._arrow = document.createElement("div");
arrow.style.position = "absolute";
arrow.style.width = "11px";
arrow.style.height = "11px";
arrow.style.backgroundColor = "#f00";
arrow.style.transform = "rotate(45deg)";
arrow.style.top = "17px";
arrow.style.borderRadius = "50px 50% 50% 50%";
arrow.style.left = "7px";
arrow.style.overflow = "hidden";
div.style.zIndex = "99";
div.appendChild(arrow);
span.appendChild(document.createTextNode(this._text));
addClickHandler(that.cars[i][0], that.cars[i][that.cars[i].length -1],div, that.cars[i][that.cars[i].length -1]);
map.getPanes().labelPane.appendChild(div);
return div;
}
drawEnd.prototype.draw = function(){
var map = this._map;
var pixel = map.pointToOverlayPixel(this._point);
this._div.style.left = pixel.x - parseInt(this._arrow.style.left) - 6 + "px";
this._div.style.top = pixel.y - 29 + "px";
}
if(that.cars[i].length > 1)
{
var endOpt = new drawEnd(new BMap.Point(that.cars[i][that.cars[i].length -1].lng,that.cars[i][that.cars[i].length -1].lat), "终");
map.addOverlay(endOpt);
}
var opts = {
width : 150,
height: "",
title : "当前轨迹信息" ,
enableMessage:true,
message:"亲耐滴,晚上一起吃个饭吧?戳下面的链接看下地址喔~"
};
function addClickHandler(start, end, marker, poit){
var content = "";
content = "司机姓名:" + end.userNane;
content += "<br\/>司机电话:" + end.userPhoe;
content += "<bt\/>车牌号:" + end.plateNumber;
content += "<br\/>起点:" + start.position;
content += "<br\/>终点:" + end.position;
marker.addEventListener("touchstart",function(e){
openInfo(content, poit)
});
}
function openInfo(content,poit){
var point = new BMap.Point(poit.lng, poit.lat);
var infoWindow = new BMap.InfoWindow(content,opts);
map.openInfoWindow(infoWindow,point);
}
}
}
});
}