//打開百度地圖

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}]};

// 百度地圖API功能

var map = new BMap.Map("allmap"); // 創建Map實例

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,//是否啟用線編輯，默認為false

enableClicking: true,//是否響應點擊事件，默認為true

strokeWeight:'3',//折線的寬度，以像素為單位

strokeOpacity: 1,//折線的透明度，取值范圍0 - 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 += "
司機電話：" + end.userPhoe;

content += "車牌號：" + end.plateNumber;

content += "
起點：" + start.position;

content += "
終點：" + end.position;

marker.addEventListener("touchstart",function(e){

openInfo(content, poit)

});

}

function openInfo(content,poit){

// var p = e.target;

var point = new BMap.Point(poit.lng, poit.lat);

var infoWindow = new BMap.InfoWindow(content,opts); // 創建信息窗口對象

map.openInfoWindow(infoWindow,point); //開啟信息窗口

}

}

}

//關閉加載彈窗...

});

}

總結

以上是生活随笔為你收集整理的js百度地图小车html,H5页面引用百度地图绘制车辆历史轨迹的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。