欢迎访问广西陌上网络科技有限责任公司官网 · 专注企业数字化管理软件定制开发 客服热线:黄生 15678982250

高德地图绘制实时轨迹 实现动态轨迹跟踪

更新时间:2023-11-13 浏览:4276 标签:地图 轨迹 动态 跟踪 

1、创建高德基础地图

//创建地图

    var map = new AMap.Map('container', {

      resizeEnable: true,

      zoom: 13,

      center: []

    })

2、创建图标和其他全局变量

//汽车图标

const icon = new AMap.Icon({

        size: new AMap.Size(45, 45),

        image: '/images/map/car.png',

        imageSize: new AMap.Size(32, 32),

    });

//轨迹位置数组

var lineArr=[]

//创建线条绘制

const polyline=new AMap.Polyline({

    path:[],

    strokeColor:'green',

    strokeWeight:5

})

polyline.setMap(map)

3、获取历史轨迹

//从后台获取历史轨迹数组

$.post('',{},function(res){

lineArr.push(res.data.data)

})

4、循环抓取车辆位置

4.1 API主动获取,一秒一次几乎是极限了。

4.2 Websocket连接,不间断连接有数据即更新,车辆图标移动更流畅。

将获取到的经纬度同样PUSH到轨迹数组


0.088664s