高德地图 用户位置动态移动
-
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="https://a.amap.com/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="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript" src="https://webapi.amap.com/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="https://webapi.amap.com/images/car.png"/><span style="'+color+'">'+data[i].user_name+'</span></div>',
position:data[i].move[data[i].move.length-1],
//icon: "https://webapi.amap.com/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="https://webapi.amap.com/images/car.png"/><span >' + data[i].user_name + '</span></div>',
position: arr,
//icon: "https://webapi.amap.com/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: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607142575067&di=623d1ba5e9245069deca79af57dd36a8&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201410%2F20%2F20141020162058_UrMNe.jpeg',
id: '1',
lastPoint: '115.11' + rand1 + '739,36.71' + rand3 + '773'
},
{
user_name: '李四',
avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607142575067&di=623d1ba5e9245069deca79af57dd36a8&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201410%2F20%2F20141020162058_UrMNe.jpeg',
id: '2',
lastPoint: '115.12' + rand1 + '739,36.71' + rand2 + '773'
},
{
user_name: '王五',
avatar: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1607142575067&di=623d1ba5e9245069deca79af57dd36a8&imgtype=0&src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fitem%2F201410%2F20%2F20141020162058_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>
6750
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
