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}]};
// 百度地图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 += "<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 p = e.target;
var point = new BMap.Point(poit.lng, poit.lat);
var infoWindow = new BMap.InfoWindow(content,opts); // 创建信息窗口对象
map.openInfoWindow(infoWindow,point); //开启信息窗口
}
}
}
//关闭加载弹窗...
});
}
