H5页面引用百度地图绘制车辆历史轨迹

Posted aui-js

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了H5页面引用百度地图绘制车辆历史轨迹相关的知识,希望对你有一定的参考价值。

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":"西安市高新区
","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":"西安市高新区
","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":"西安市高新区
","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); //开启信息窗口
                }
            }
        }
       //关闭加载弹窗...
    });
}

以上是关于H5页面引用百度地图绘制车辆历史轨迹的主要内容,如果未能解决你的问题,请参考以下文章

android百度地图如何记录车辆行车轨迹

对接腾讯地图API实现车辆轨迹回放

百度地图API 绘制轨迹历史

在物流行业地图开发中,如何实现车辆轨迹回放?

openlayers应用“三”:百度地图纠偏

android 百度地图如何实现类似滴滴打车的功能,比如可以获取自己定位和车辆移动轨迹。