```csharp
<script>
var map = null;
//所有师傅的最新位置信息
var work_List = []
//定时器
var setIntervalTime
var that = this
window.onload = function () {
//调用初始化函数地图
init()
setIntervalTime = setInterval(() => {
that.init();
}, 3600000)
//3600000
}
//初始化地图函数 自定义函数名init
function init() {
$.ajax({
type: "GET",
url: "/api/sms/worker/GetWorkOrderLocation", //获取人员的地理坐标信息
data: {},
dataType: "json",
success: function (data) {
var mapCenter;
console.log(data)
console.log("that", that)
work_List = data
if (data.length > 0)
mapCenter = new TMap.LatLng(data[0].Lat, data[0].Lng);
else
mapCenter = new TMap.LatLng(30.2084, 120.21201)
//定义map变量 调用 qq.maps.Map() 构造函数 获取地图显示容器
that.initializeMap(mapCenter, 11)
that.mapSign(data, false)
}
});
}
var mapMarker = [];
var mapMarker_Label = []
var markerList = null;
var markerList_Label = null;
var InfoWindowList = [];//信息窗口
//初始化地图
function initializeMap(mapCenter, size) {
map = new TMap.Map("container", {
center: mapCenter, // 地图的中心地理坐标。
zoom: size
});
}
//渲染地图上的点
function mapSign(datas, flag) {
//清除上一波标记
for (i in mapMarker) {
mapMarker[i].setMap(null);
}
for (i in mapMarker_Label) {
mapMarker_Label[i].setMap(null);
}
//清除窗体
for (i in InfoWindowList) {
InfoWindowList[i].setMap(null);
}
var path = [[]]
var path_index = 0
for (var i = 0; i < datas.length; i++) {
//地图第一次打开的时候获取师傅的最新地理位置信息
if ((i == 0 || (datas[i].Lat != datas[i - 1].Lat && datas[i].Lng != datas[i - 1].Lng)) && !flag) {
mapMarker_Label.push(that.marker_Label(datas[i]))
}
if (flag) {
//师傅的轨迹信息
mapMarker.push(that.marker(datas[i]));
//连线的数组
path[path_index].push(new TMap.LatLng(datas[i].Lat, datas[i].Lng))
}
}
var path_List = {
"path": path
}
if (flag) {
return path_List
}
}
//腾讯地图图标覆盖物
function marker(data) {
if (data != undefined) {
markerList = new TMap.MultiMarker({
map: map,
geometries: [{
"id": 'marker1',
"styleId": 'car-down',
"position": new TMap.LatLng(data.Lat, data.Lng)
}],
styles: {
'car-down': new TMap.MarkerStyle({
'width': 25,
'height': 35,
'anchor': {
x: 30,
y: 30,
},
'faceTo': 'map',
// 'rotate': 180,
'src': 'https://service.fzxinhaixu.cn/Img/dang.png',
})
},
});
var info = new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(data.Lat, data.Lng),
offset: { x: 0, y: -32 }
});
info.close();//初始关闭信息窗体
//监听对标记的点击事件
markerList.on("click", function (evt) {
//设置监听到点击事件时信息窗体如何显示
info.open(); //点击时,打开信息窗体
info.setPosition(evt.geometry.position); //点击时,信息窗体的位置
info.setContent("<div style='line-height:20px;text-align:left;white-space:nowrap;margin:10px;'>工单:" + data.WorkOrderID + "<br>地址:" + data.AddressBid + "<br>打卡时间:" + data.Createdate + "<br>完工时间:" + data.finishdate + "</div>"); //点击时,信息窗体将显示坐标
InfoWindowList.push(info); //加入数据组 方便清理
})
return markerList
}
}
//腾讯地图图标下面的名字覆盖物
function marker_Label(data) {
if (data != undefined) {
markerList_Label = new TMap.MultiMarker({
map: map,
geometries: [{
"id": 'marker1',
"styleId": 'car-down',
"position": new TMap.LatLng(data.Lat, data.Lng),
"content": data.WorkerName,
}],
enableCollision: true,
styles: {
'car-down': new TMap.MarkerStyle({
'width': 25,
'height': 35,
'anchor': {
x: 30,
y: 30,
},
'faceTo': 'map',
// 'rotate': 180,
'src': 'https://service.fzxinhaixu.cn/Img/worker.png',
'color': '#1131df', // 标注点文本颜色
'size': 16, // 标注点文本文字大小
'direction': 'bottom', // 标注点文本文字相对于标注点图片的方位
'offset': { x: 0, y: 8 }, // 标注点文本文字基于direction方位的偏移属性
'strokeColor': '#fff', // 标注点文本描边颜色
'strokeWidth': 2, // 标注点文
})
},
});
var info = new TMap.InfoWindow({
map: map,
position: new TMap.LatLng(data.Lat, data.Lng),
offset: { x: 0, y: -32 }
});
info.close();//初始关闭信息窗体
//监听对标记的点击事件
markerList_Label.on("click", function (evt) {
//设置监听到点击事件时信息窗体如何显示
info.open(); //点击时,打开信息窗体
info.setPosition(evt.geometry.position); //点击时,信息窗体的位置
info.setContent("<div style='line-height:20px;text-align:left;white-space:nowrap;margin:10px;'>师傅:" + data.WorkerName + "</div>"); //点击时,信息窗体将显示坐标
InfoWindowList.push(info); //加入数据组 方便清理
})
return markerList_Label
}
}
</script>
以上代码是默认加载的时候,通过接口 自动获取最新人员的打卡位置信息,在地图上门进行展示。
$("#check").click(function () {
var work = $("#workList option:selected").val();
var work_two = $("#workClick_two option:selected").val();
var workerValue = workerClick()
var startDate = $("#startDate").val()
var endDate = $("#endDate").val()
var dateTime = $("#dateTime").val()
if (work == '请选择') {
alert("请选择一级部门")
return
}
if (work_two == '请选择') {
alert("请选择二级部门")
return
}
if (workerValue == '请选择') {
alert("请选择师傅")
return
}
if (!startDate || !endDate) {
alert("请选择时间")
return
}
var worker_list = []
clearInterval(setIntervalTime)
var _index;
layui.use('layer', function () {
var layer = layui.layer;
_index = layer.load();
});
$.ajax({
type: "GET",
url: "/api/sms/worker/GetWorkOrderLocationCondition",
data: {
"workerCode": workerValue,
"start": startDate,
"end": endDate
},
dataType: "json",
success: function (data) {
console.log("师傅位置", data)
layui.use('layer', function () {
var layer = layui.layer;
layer.close(_index)
});
if (data.length == 0) {
alert("该时间段师傅没有位置信息")
return
}
$("#Back").css({
"display": "block"
})
//map.(); //初始化地图中心
map.panTo(new TMap.LatLng(data[data.length - 1].Lat, data[data.length - 1].Lng)); //初始化地图中心
if (polylineLayer) {
polylineLayer.setMap(null);
}
if (markerStartEnd) {
markerStartEnd.setMap(null);
}
if (markerList_Label) {
markerList_Label.setMap(null);
}
//that.initializeMap(new TMap.LatLng(data[data.length - 1].Lat, data[data.length - 1].Lng), 12)
var pathList = that.mapSign(data, true)
console.log("path_List", pathList.path)
console.log("path_List.path[0].lat", pathList.path[0][0].lat)
polylineLayer = new TMap.MultiPolyline({
map, // 绘制到目标地图
// 折线样式定义
styles: {
'style_blue': new TMap.PolylineStyle({
'color': '#3777FF', //线填充色
'width': 8, //折线宽度
'borderWidth': 1, //边线宽度
'borderColor': '#FFF', //边线颜色
'showArrow': true,
'lineCap': 'butt' //线端头方式
})
},
geometries: [{
styleId: 'style_blue',
paths: pathList.path
}],
});
markerStartEnd = new TMap.MultiMarker({
map,
styles: {
'car-down': new TMap.MarkerStyle({
'width': 40,
'height': 40,
'anchor': {
x: 20,
y: 20,
},
'faceTo': 'map',
'rotate': 180,
'src': 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png',
}),
"start": new TMap.MarkerStyle({
"width": 25,
"height": 35,
"anchor": { x: 16, y: 32 },
"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/start.png'
}),
"end": new TMap.MarkerStyle({
"width": 25,
"height": 35,
"anchor": { x: 16, y: 32 },
"src": 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/end.png'
})
},
geometries: [{
"id": 'car',
"styleId": 'car-down',
"position": new TMap.LatLng(pathList.path[0][0].lat, pathList.path[0][0].lng)
},
{ "id": 'start',
"styleId": 'start',
"position": new TMap.LatLng(pathList.path[0][0].lat, pathList.path[0][0].lng)
}, {
"id": 'end',
"styleId": 'end',
"position": new TMap.LatLng(pathList.path[0][pathList.path[0].length - 1].lat, pathList.path[0][pathList.path[0].length - 1].lng)
}]
});
markerStartEnd.moveAlong({
'car': {
path: pathList.path[0],
speed: 2000
}
}, {
autoRotation: true
})
}
});
})
以上代码是点击查询,通过接口获取某个人员的轨迹信息,通过起点和终点进行描述,中间加了方向箭头进行显示。
最终效果图如下:
人员最新位置信息
具体人员轨迹信息