![[demo] 高德地图 用户位置动态移动](https://700zi.400zi.cn/uploadfile/img/15/124/799579fe3cfbcab29af8a46052c7471f.jpg)
高德地图 用户位置动态移动
BG
最近帮朋友做做项目，一个打车app,我帮忙管理后台做个查看司机实时位置的页面，本着cv大法好的原则，东看看文档，西瞅瞅别人的demo，然后就整出来这么一个简单的小demo
功能
主要功能就是从后台获取到司机的基本信息，根据其中的坐标信息展示到地图中，然后定时刷新司机信息，然后根据最新的坐标信息，对应的图标作出相应的移动。代码里原本有轨迹显示，不过效果不理想就注掉了，有哪位大佬对Polyline熟可以补充下，由于自定义的点标记，图标中心在头像上，所以动的时候小车会不协调，可以通过处理div内容解决。
页面代码
页面可直接执行，高德js引用需替换自己的key
<!-- qq 1092843362 --><!DOCTYPE html><html><head><meta charset="utf-8"><title>demo</title><meta name="renderer" content="webkit"><meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"><meta name="viewport"content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"><link rel="stylesheet" href="/jsapi_demos/static/demo-center/css/demo-center.css"/></head><body><div id='container' style="width: 100%;height: 80vh;margin: 20px auto;"></div><script type="text/javascript" src="/libs/jquery/2.1.1/jquery.min.js"></script><script type="text/javascript" src="/maps?v=1.4.15&key=??????????"></script><script type="text/javascript">var lineArr = [];var position = [], center = [115.113739, 36.711773];var driverMaker = [];var driverlines = [];var driverInfo = {};//创建地图var map = createMap();map.setFitView();//初始化坐标信息getDriverInfo({});//定期获取坐标信息setInterval(function () {getDriverInfo({});}, 5000)function createMap() {return new AMap.Map("container", {resizeEnable: true,center: center,zoom: 17});}/*const createMarker = (data) => {map.remove(driverMaker);var temLine=[];for(i in data){if(data[i].line.length==0){continue;}var color=data[i].online_status=='2'?'color:green;':data[i].online_status=='3'?'color:#e57441;':data[i].online_status=='4'?'color:red;':'';var temp= new AMap.Marker({content:'<div class="marker-route marker-marker-bus-from"><img src="/images/car.png"/><span style="'+color+'">'+data[i].user_name+'</span></div>',position:data[i].move[data[i].move.length-1],//icon: "/images/car.png", //轨迹地图上出现车的图标(运行时有车在上面移动)offset: new AMap.Pixel(-26, -13),autoRotation: true,//angle: -90,});map.add(temp);driverMaker.push(temp);//开始绘制地图及轨迹var tem=createPolyline(data[i].line);temLine.push(tem);//开始动画temp.moveAlong(data[i].move, 100); //轨迹点,移动速度KM/小时}map.remove(driverlines);driverlines=temLine;}*/var allDriverMarker = {};const createMarker2 = (data) => {//循环司机for (i in data) {if (data[i].lastPoint) {var arr = data[i].lastPoint.split(",");if (allDriverMarker[data[i].id]) {//var lnglat = new AMap.LngLat(arr[0], arr[1]);allDriverMarker[data[i].id].moveTo(arr, 500);} else {var temp = new AMap.Marker({content: '<div onclick="fenpei(' + data[i].id + ')" ass="marker-route marker-marker-bus-from"><img style="width: 50px;height: 50px" src="' + data[i].avatar + '"/><img src="/images/car.png"/><span >' + data[i].user_name + '</span></div>',position: arr,//icon: "/images/car.png", //轨迹地图上出现车的图标(运行时有车在上面移动)offset: new AMap.Pixel(-26, -13),autoRotation: true,//angle: -90,});map.add(temp);allDriverMarker[data[i].id] = temp;}} else {if (allDriverMarker[data[i].id]) {map.remove(allDriverMarker[data[i].id]);}}}for (i in allDriverMarker) {var flag = true;for (j in data) {if (data[j].id == i) {flag = false;break;}}if (flag) {map.remove(allDriverMarker[i]);allDriverMarker[i] = null;}}}const createPolyline = (data) => {// 绘制轨迹return new AMap.Polyline({map: map,path: data,showDir: true,strokeColor: "#28F", //线颜色// strokeOpacity: 1,//线透明度strokeWeight: 6,//线宽// strokeStyle: "solid" //线样式});}var passedPolyline = new AMap.Polyline({map: map,// path: lineArr,strokeColor: "#AF5", //线颜色// strokeOpacity: 1,//线透明度strokeWeight: 6,//线宽// strokeStyle: "solid" //线样式});function fenpei(userId) {alert("弹出给" + userId + "分配任务页面");}//模拟请求function getDriverInfo(data) {//数据请求var rand1 = Math.ceil(Math.random() * 10)var rand2 = Math.ceil(Math.random() * 10)var rand3 = Math.ceil(Math.random() * 10)setTimeout(function () {var data = [{user_name: '张三',avatar: '/timg?image&quality=80&size=b9999_10000&sec=1607142575067&di=623d1ba5e9245069deca79af57dd36a8&imgtype=0&src=http%3A%2F%%2Fuploads%2Fitem%2F10%2F20%2F102058_UrMNe.jpeg',id: '1',lastPoint: '115.11' + rand1 + '739,36.71' + rand3 + '773'},{user_name: '李四',avatar: '/timg?image&quality=80&size=b9999_10000&sec=1607142575067&di=623d1ba5e9245069deca79af57dd36a8&imgtype=0&src=http%3A%2F%%2Fuploads%2Fitem%2F10%2F20%2F102058_UrMNe.jpeg',id: '2',lastPoint: '115.12' + rand1 + '739,36.71' + rand2 + '773'},{user_name: '王五',avatar: '/timg?image&quality=80&size=b9999_10000&sec=1607142575067&di=623d1ba5e9245069deca79af57dd36a8&imgtype=0&src=http%3A%2F%%2Fuploads%2Fitem%2F10%2F20%2F102058_UrMNe.jpeg',id: '3',lastPoint: '115.13' + rand2 + '739,36.71' + rand3 + '773'},]for (i in data) {//data[i].move=data[i].line;if (data[i].lastPoint != null) {//position = data[0].line[data[0].line.length-1];center = data[i].lastPoint.split(",");break;}}// 设置缩放级别和中心点if (allDriverMarker == {}) {map.setZoomAndCenter(14, center);}//marker.setMap(map);driverInfo = data;//之前轨迹的版本//createMarker(data);createMarker2(data);}, 1000)}</script></body></html>
