uniapp内置腾讯地图实现地图大量markers点聚合，轨迹回放开始暂停，兼容H5及小程序
写在前面：uniapp内置地图点聚合无法在PC预览，只能手机上看，千万别被坑
效果图如下，直接粘贴代码即可，中间只有下拉是使用uview组件，不使用直接注释即可，其它都是手写样式
- 页面没有接口交互，代码复制粘贴直接可用，很多无用代码注释并没有删除，做的是模拟数据
- H5端没有注册key，注册key可以自行百度
- 复杂功能已经实现，其余就是调用接口赋值，大家都会
- 项目中应用图片我给你们打包好啦，我讲究不？
- 效果视频见我另一个文章
- 好用务必给我一个srart
监控页
{{item.name}} {{item.count>99?'99+':item.count}} {{carDatas.name}} {item.name}} --> 车辆轨迹 08-25 22:22:58 8KM/H 黑龙江省哈尔滨市南岗区西大直街92号 超速异常 W1213484798152144411 起 黑河 终 哈尔滨 查询 import { findByAllCarInfo, findByAllCarIdList } from '@/api/carManage/carDriving' export default { data() { return { showPicker: false, columnsMapIdList: [ [{ label: '雪月夜', id: 2021 }, { label: '冷夜雨', id: 804 }] ], // 默认请求全部地图数据 params: { "pageParamVO": { "curPage": 1, "pageSize": 9999, }, "type": 0, "vehicleIdList": [], "orgId": 0, "groupId": 0 }, // 运行车辆数组 goingCarsList: [], // 停止车辆数组 stopCarsList: [], // 报警车辆数组 warningCarsList: [], mapCenter: { longitude: "", latitude: "", }, carDatas: { name: '黑W12345', }, // carOptions: [{ // id: 123, // name: '选项1' // }, // { // id: 1233, // name: '选项2' // }, // { // id: 12351, // name: '选项333' // }, // { // id: 12352, // name: '选项345' // }, // { // id: 12353, // name: '选项23456' // }, // { // id: 12354, // name: '选项5' // }, // { // id: 12354555, // name: '选项123' // } // ], // showMenu: false, tabList: [{ name: '全部', count: 999 }, { name: '运行', count: 999 }, { name: '停止', count: 999 }, { name: '报警', count: 999 }], current: 0, title: 'map', markers: [], // controls: [{ // 控件 // id: 99, // position: { // 控件位置 // left: 160, // top: 120 // }, // iconPath: 'https://hellouniapp.dcloud.net.cn/static/location.png' // 控件图标 // }], address_info: "", address_info_recomd: "", address: "" } }, onReady() { // 1.页面准备好后，获取到map组件的执行上下文。注意：这里是取的map的id属性 this.mapContext = uni.createMapContext("mapCarMonitor", this); this.getMarkers(this.params) // this.getByAllCarIdList() }, onShow() { }, onLoad() { }, methods: { // 获取车辆id下拉数组 getByAllCarIdList() { findByAllCarIdList().then(res => { console.log(res) this.columnsMapIdList[0] = res.result }) }, // 获取地图点位 getMarkers(params) { // findByAllCarInfo(params).then(res => { // console.log(res) // 运行车辆数组 // this.goingCarsList = [] // 停止车辆数组 // this.stopCarsList = [] // 报警车辆数组 // this.warningCarsList = [] // 对返回数组进行处理,符合地图渲染要求 const markersList = [] // const result = res.result.monitArr const result = [{ "aInfo": "", "accStatus": 0, "alarmStatus": 0, "alarmStr": "", "area": "", "cameraChannel": 0, "commids": "", "dArr": [], "direction": 0, "driverInfo": "", "eInfo": "", "eqSourceID": 0, "exStatus": 0, "gpsTime": -2209017600000, "gpsTimeStr": "01-01 00:00:00", "h1": "", "h2": "", "h3": "", "h4": "", "isAdas": 0, "isCamera": 0, "isLcd": 0, "isStandardEquip": 0, "isStandardVideo": 0, "lat": 52.346668, "loadWeight": -1, "lon": 124.71941, "odo": 0, "oil": "", "oilIsException": 0, "oilUpLatestGpsTime": "", "oilUpLatestLat": "", "oilUpLatestLon": "", "onlineStatus": 0, "openDoorInfo": [], "placeName": "", "pointInfo": "", "regName": "京AAY327", "speed": "0", "status": 2, "stopInfo": "", "t1": "", "t2": "", "t3": "", "t4": "", "tArr": [{ "s": 0, "ta": "", "wayArr": [] }], "telPhone": "", "tempExp": 0, "vStatus": "", "vehicleId": 2630 }, { "aInfo": "", "accStatus": 0, "alarmStatus": 0, "alarmStr": "", "area": "", "cameraChannel": 0, "commids": "", "dArr": [], "direction": 0, "driverInfo": "", "eInfo": "", "eqSourceID": 0, "exStatus": 0, "gpsTime": -2209017600000, "gpsTimeStr": "01-01 00:00:00", "h1": "", "h2": "", "h3": "", "h4": "", "isAdas": 0, "isCamera": 0, "isLcd": 0, "isStandardEquip": 0, "isStandardVideo": 0, "lat": 52.346668, "loadWeight": -1, "lon": 124.71941, "odo": 0, "oil": "", "oilIsException": 0, "oilUpLatestGpsTime": "", "oilUpLatestLat": "", "oilUpLatestLon": "", "onlineStatus": 0, "openDoorInfo": [], "placeName": "", "pointInfo": "", "regName": "京AFQ177", "speed": "0", "status": 2, "stopInfo": "", "t1": "", "t2": "", "t3": "", "t4": "", "tArr": [{ "s": 0, "ta": "", "wayArr": [] }], "telPhone": "", "tempExp": 0, "vStatus": "", "vehicleId": 2437 }, { "aInfo": "", "accStatus": 0, "alarmStatus": 0, "alarmStr": "", "area": "", "cameraChannel": 0, "commids": "", "dArr": [], "direction": 0, "driverInfo": "", "eInfo": "", "eqSourceID": 0, "exStatus": 0, "gpsTime": -2209017600000, "gpsTimeStr": "01-01 00:00:00", "h1": "", "h2": "", "h3": "", "h4": "", "isAdas": 0, "isCamera": 0, "isLcd": 0, "isStandardEquip": 0, "isStandardVideo": 0, "lat": 52.346668, "loadWeight": -1, "lon": 124.71941, "odo": 0, "oil": "", "oilIsException": 0, "oilUpLatestGpsTime": "", "oilUpLatestLat": "", "oilUpLatestLon": "", "onlineStatus": 0, "openDoorInfo": [], "placeName": "", "pointInfo": "", "regName": "京AGU736", "speed": "0", "status": 2, "stopInfo": "", "t1": "", "t2": "", "t3": "", "t4": "", "tArr": [{ "s": 0, "ta": "", "wayArr": [] }], "telPhone": "", "tempExp": 0, "vStatus": "", "vehicleId": 2653 }, { "aInfo": "", "accStatus": 0, "alarmStatus": 0, "alarmStr": "", "area": "", "cameraChannel": 0, "commids": "", "dArr": [], "direction": 0, "driverInfo": "", "eInfo": "", "eqSourceID": 0, "exStatus": 0, "gpsTime": -2209017600000, "gpsTimeStr": "01-01 00:00:00", "h1": "", "h2": "", "h3": "", "h4": "", "isAdas": 0, "isCamera": 0, "isLcd": 0, "isStandardEquip": 0, "isStandardVideo": 0, "lat": 52.346668, "loadWeight": -1, "lon": 124.71941, "odo": 0, "oil": "", "oilIsException": 0, "oilUpLatestGpsTime": "", "oilUpLatestLat": "", "oilUpLatestLon": "", "onlineStatus": 0, "openDoorInfo": [], "placeName": "", "pointInfo": "", "regName": "京AUH706", "speed": "0", "status": 2, "stopInfo": "", "t1": "", "t2": "", "t3": "", "t4": "", "tArr": [{ "s": 0, "ta": "", "wayArr": [] }], "telPhone": "", "tempExp": 0, "vStatus": "", "vehicleId": 2436 }, { "aInfo": "", "accStatus": 0, "alarmStatus": 0, "alarmStr": "", "area": "", "cameraChannel": 0, "commids": "", "dArr": [], "direction": 0, "driverInfo": "", "eInfo": "", "eqSourceID": 0, "exStatus": 0, "gpsTime": -2209017600000, "gpsTimeStr": "01-01 00:00:00", "h1": "", "h2": "", "h3": "", "h4": "", "isAdas": 0, "isCamera": 0, "isLcd": 0, "isStandardEquip": 0, "isStandardVideo": 0, "lat": 52.346668, "loadWeight": -1, "lon": 124.71941, "odo": 0, "oil": "", "oilIsException": 0, "oilUpLatestGpsTime": "", "oilUpLatestLat": "", "oilUpLatestLon": "", "onlineStatus": 0, "openDoorInfo": [], "placeName": "", "pointInfo": "", "regName": "冀C65362", "speed": "0", "status": 2, "stopInfo": "", "t1": "", "t2": "", "t3": "", "t4": "", "tArr": [{ "s": 0, "ta": "", "wayArr": [] }], "telPhone": "", "tempExp": 0, "vStatus": "", "vehicleId": 2759 }, { "aInfo": "", "accStatus": 0, "alarmStatus": 0, "alarmStr": "", "area": "", "cameraChannel": 0, "commids": "", "dArr": [], "direction": 0, "driverInfo": "", "eInfo": "", "eqSourceID": 0, "exStatus": 0, "gpsTime": -2209017600000, "gpsTimeStr": "01-01 00:00:00", "h1": "", "h2": "", "h3": "", "h4": "", "isAdas": 0, "isCamera": 0, "isLcd": 0, "isStandardEquip": 0, "isStandardVideo": 0, "lat": 52.346668, "loadWeight": -1, "lon": 124.71941, "odo": 0, "oil": "", "oilIsException": 0, "oilUpLatestGpsTime": "", "oilUpLatestLat": "", "oilUpLatestLon": "", "onlineStatus": 0, "openDoorInfo": [], "placeName": "", "pointInfo": "", "regName": "吉AS8803", "speed": "0", "status": 2, "stopInfo": "", "t1": "", "t2": "", "t3": "", "t4": "", "tArr": [{ "s": 0, "ta": "", "wayArr": [] }], "telPhone": "", "tempExp": 0, "vStatus": "", "vehicleId": 2493 }, { "aInfo": "", "accStatus": 0, "alarmStatus": 0, "alarmStr": "", "area": "", "cameraChannel": 0, "commids": "", "dArr": [], "direction": 0, "driverInfo": "", "eInfo": "", "eqSourceID": 0, "exStatus": 0, "gpsTime": -2209017600000, "gpsTimeStr": "01-01 00:00:00", "h1": "", "h2": "", "h3": "", "h4": "", "isAdas": 0, "isCamera": 0, "isLcd": 0, "isStandardEquip": 0, "isStandardVideo": 0, "lat": 52.346668, "loadWeight": -1, "lon": 124.71941, "odo": 0, "oil": "", "oilIsException": 0, "oilUpLatestGpsTime": "", "oilUpLatestLat": "", "oilUpLatestLon": "", "onlineStatus": 0, "openDoorInfo": [], "placeName": "", "pointInfo": "", "regName": "吉AV2400", "speed": "0", "status": 2, "stopInfo": "", "t1": "", "t2": "", "t3": "", "t4": "", "tArr": [{ "s": 0, "ta": "", "wayArr": [] }], "telPhone": "", "tempExp": 0, "vStatus": "", "vehicleId": 2572 }, { "aInfo": "", "accStatus": 0, "alarmStatus": 0, "alarmStr": "", "area": "", "cameraChannel": 0, "commids": "", "dArr": [], "direction": 0, "driverInfo": "", "eInfo": "", "eqSourceID": 0, "exStatus": 0, "gpsTime": -2209017600000, "gpsTimeStr": "01-01 00:00:00", "h1": "", "h2": "", "h3": "", "h4": "", "isAdas": 0, "isCamera": 0, "isLcd": 0, "isStandardEquip": 0, "isStandardVideo": 0, "lat": 52.346668, "loadWeight": -1, "lon": 124.71941, "odo": 0, "oil": "", "oilIsException": 0, "oilUpLatestGpsTime": "", "oilUpLatestLat": "", "oilUpLatestLon": "", "onlineStatus": 0, "openDoorInfo": [], "placeName": "", "pointInfo": "", "regName": "吉AW8947", "speed": "0", "status": 2, "stopInfo": "", "t1": "", "t2": "", "t3": "", "t4": "", "tArr": [{ "s": 0, "ta": "", "wayArr": [] }], "telPhone": "", "tempExp": 0, "vStatus": "", "vehicleId": 2662 }, { "aInfo": "", "accStatus": 0, "alarmStatus": 0, "alarmStr": "", "area": "", "cameraChannel": 0, "commids": "", "dArr": [], "direction": 0, "driverInfo": "", "eInfo": "", "eqSourceID": 0, "exStatus": 0, "gpsTime": -2209017600000, "gpsTimeStr": "01-01 00:00:00", "h1": "", "h2": "", "h3": "", "h4": "", "isAdas": 0, "isCamera": 0, "isLcd": 0, "isStandardEquip": 0, "isStandardVideo": 0, "lat": 52.346668, "loadWeight": -1, "lon": 124.71941, "odo": 0, "oil": "", "oilIsException": 0, "oilUpLatestGpsTime": "", "oilUpLatestLat": "", "oilUpLatestLon": "", "onlineStatus": 0, "openDoorInfo": [], "placeName": "", "pointInfo": "", "regName": "吉AX6635", "speed": "0", "status": 2, "stopInfo": "", "t1": "", "t2": "", "t3": "", "t4": "", "tArr": [{ "s": 0, "ta": "", "wayArr": [] }], "telPhone": "", "tempExp": 0, "vStatus": "", "vehicleId": 2703 }, { "aInfo": "", "accStatus": 1, "alarmStatus": 0, "alarmStr": "", "area": "", "cameraChannel": 0, "commids": "107015191764171", "dArr": [], "direction": 91, "driverInfo": "", "eInfo": "", "eqSourceID": 0, "exStatus": 0, "gpsTime": 1694592391000, "gpsTimeStr": "09-13 16:06:31", "h1": "", "h2": "", "h3": "", "h4": "", "isAdas": 0, "isCamera": 0, "isLcd": 0, "isStandardEquip": 0, "isStandardVideo": 0, "lat": 45.307484, "loadWeight": -1, "lon": 126.916534, "odo": 1934.4, "oil": "", "oilIsException": 0, "oilUpLatestGpsTime": "", "oilUpLatestLat": "", "oilUpLatestLon": "", "onlineStatus": 0, "openDoorInfo": [], "placeName": "黑龙江省哈尔滨市五常市兴隆大街|X005(普通路)利群文化书店西", "pointInfo": "", "regName": "黑A9L8E2", "speed": "0", "status": 2, "stopInfo": "停车:3小时25分钟30秒", "t1": "", "t2": "", "t3": "", "t4": "", "tArr": [{ "s": 0, "ta": "", "wayArr": [] }], "telPhone": "", "tempExp": 0, "vStatus": "ACC关,3D定位,天线正常,CSQ:31,停车:3小时25分钟30秒", "vehicleId": 1842 }, { "aInfo": "", "accStatus": 0, "alarmStatus": 0, "alarmStr": "", "area": "", "cameraChannel": 0, "commids": "", "dArr": [], "direction": 0, "driverInfo": "", "eInfo": "", "eqSourceID": 0, "exStatus": 0, "gpsTime": -2209017600000, "gpsTimeStr": "01-01 00:00:00", "h1": "", "h2": "", "h3": "", "h4": "", "isAdas": 0, "isCamera": 0, "isLcd": 0, "isStandardEquip": 0, "isStandardVideo": 0, "lat": 52.346668, "loadWeight": -1, "lon": 124.71941, "odo": 0, "oil": "", "oilIsException": 0, "oilUpLatestGpsTime": "", "oilUpLatestLat": "", "oilUpLatestLon": "", "onlineStatus": 0, "openDoorInfo": [], "placeName": "", "pointInfo": "", "regName": "黑A9QG70", "speed": "0", "status": 2, "stopInfo": "", "t1": "", "t2": "", "t3": "", "t4": "", "tArr": [{ "s": 0, "ta": "", "wayArr": [] }], "telPhone": "", "tempExp": 0, "vStatus": "", "vehicleId": 2230 }, { "aInfo": "", "accStatus": 1, "alarmStatus": 0, "alarmStr": "", "area": "", "cameraChannel": 0, "commids": "107015191764168", "dArr": [], "direction": 111, "driverInfo": "", "eInfo": "", "eqSourceID": 0, "exStatus": 0, "gpsTime": 1694573375000, "gpsTimeStr": "09-13 10:49:35", "h1": "", "h2": "", "h3": "", "h4": "", "isAdas": 0, "isCamera": 0, "isLcd": 0, "isStandardEquip": 0, "isStandardVideo": 0, "lat": 44.676314, "loadWeight": -1, "lon": 127.742695, "odo": 4892.5, "oil": "", "oilIsException": 0, "oilUpLatestGpsTime": "", "oilUpLatestLat": "", "oilUpLatestLon": "", "onlineStatus": 0, "openDoorInfo": [], "placeName": "黑龙江省哈尔滨市五常市X163(普通路)温馨旅馆北", "pointInfo": "", "regName": "黑A9Y28U", "speed": "0", "status": 2, "stopInfo": "停车:16分钟53秒", "t1": "", "t2": "", "t3": "", "t4": "", "tArr": [{ "s": 0, "ta": "", "wayArr": [] }], "telPhone": "", "tempExp": 0, "vStatus": "ACC关,3D定位,天线正常,CSQ:23,停车:16分钟53秒", "vehicleId": 1854 }, { "aInfo": "", "accStatus": 1, "alarmStatus": 0, "alarmStr": "", "area": "", "cameraChannel": 0, "commids": "107015191763219", "dArr": [], "direction": 94, "driverInfo": "", "eInfo": "", "eqSourceID": 0, "exStatus": 0, "gpsTime": 1694592630000, "gpsTimeStr": "09-13 16:10:30", "h1": "", "h2": "", "h3": "", "h4": "", "isAdas": 0, "isCamera": 0, "isLcd": 0, "isStandardEquip": 0, "isStandardVideo": 0, "lat": 46.319483, "loadWeight": -1, "lon": 129.570655, "odo": 10527.4, "oil": "", "oilIsException": 0, "oilUpLatestGpsTime": "", "oilUpLatestLat": "", "oilUpLatestLon": "", "onlineStatus": 0, "openDoorInfo": [], "placeName": "黑龙江省哈尔滨市依兰县迎宾巷(普通路)金岛宾馆洗浴东", "pointInfo": "", "regName": "黑AA2C19", "speed": "0", "status": 2, "stopInfo": "停车:4分钟32秒", "t1": "", "t2": "", "t3": "", "t4": "", "tArr": [{ "s": 0, "ta": "", "wayArr": [] }], "telPhone": "", "tempExp": 0, "vStatus": "ACC关,3D定位,天线正常,CSQ:31,停车:4分钟32秒", "vehicleId": 1780 }, { "aInfo": "", "accStatus": 1, "alarmStatus": 0, "alarmStr": "", "area": "", "cameraChannel": 0, "commids": "107015191763893", "dArr": [], "direction": 245, "driverInfo": "", "eInfo": "", "eqSourceID": 0, "exStatus": 0, "gpsTime": 1694592381000, "gpsTimeStr": "09-13 16:06:21", "h1": "", "h2": "", "h3": "", "h4": "", "isAdas": 0, "isCamera": 0, "isLcd": 0, "isStandardEquip": 0, "isStandardVideo": 0, "lat": 45.825429, "loadWeight": -1, "lon": 126.654513, "odo": 1929.3, "oil": "", "oilIsException": 0, "oilUpLatestGpsTime": "", "oilUpLatestLat": "", "oilUpLatestLon": "", "onlineStatus": 0, "openDoorInfo": [], "placeName": "黑龙江省哈尔滨市松北区创业大道(普通路)糖厂小区11号楼北", "pointInfo": "", "regName": "黑AA2D27", "speed": "0", "status": 2, "stopInfo": "停车:7小时18分钟10秒", "t1": "", "t2": "", "t3": "", "t4": "", "tArr": [{ "s": 0, "ta": "", "wayArr": [] }], "telPhone": "", "tempExp": 0, "vStatus": "ACC关,3D定位,天线正常,CSQ:21,停车:7小时18分钟10秒", "vehicleId": 1005 }, { "aInfo": "", "accStatus": 0, "alarmStatus": 0, "alarmStr": "", "area": "", "cameraChannel": 0, "commids": "", "dArr": [], "direction": 0, "driverInfo": "", "eInfo": "", "eqSourceID": 0, "exStatus": 0, "gpsTime": -2209017600000, "gpsTimeStr": "01-01 00:00:00", "h1": "", "h2": "", "h3": "", "h4": "", "isAdas": 0, "isCamera": 0, "isLcd": 0, "isStandardEquip": 0, "isStandardVideo": 0, "lat": 52.346668, "loadWeight": -1, "lon": 124.71941, "odo": 0, "oil": "", "oilIsException": 0, "oilUpLatestGpsTime": "", "oilUpLatestLat": "", "oilUpLatestLon": "", "onlineStatus": 0, "openDoorInfo": [], "placeName": "", "pointInfo": "", "regName": "黑AA586挂", "speed": "0", "status": 2, "stopInfo": "", "t1": "", "t2": "", "t3": "", "t4": "", "tArr": [{ "s": 0, "ta": "", "wayArr": [] }], "telPhone": "", "tempExp": 0, "vStatus": "", "vehicleId": 2214 }, { "aInfo": "", "accStatus": 0, "alarmStatus": 0, "alarmStr": "", "area": "", "cameraChannel": 0, "commids": "", "dArr": [], "direction": 0, "driverInfo": "", "eInfo": "", "eqSourceID": 0, "exStatus": 0, "gpsTime": -2209017600000, "gpsTimeStr": "01-01 00:00:00", "h1": "", "h2": "", "h3": "", "h4": "", "isAdas": 0, "isCamera": 0, "isLcd": 0, "isStandardEquip": 0, "isStandardVideo": 0, "lat": 52.346668, "loadWeight": -1, "lon": 124.71941, "odo": 0, "oil": "", "oilIsException": 0, "oilUpLatestGpsTime": "", "oilUpLatestLat": "", "oilUpLatestLon": "", "onlineStatus": 0, "openDoorInfo": [], "placeName": "", "pointInfo": "", "regName": "黑AA600挂", "speed": "0", "status": 2, "stopInfo": "", "t1": "", "t2": "", "t3": "", "t4": "", "tArr": [{ "s": 0, "ta": "", "wayArr": [] }], "telPhone": "", "tempExp": 0, "vStatus": "", "vehicleId": 2213 }, { "aInfo": "", "accStatus": 1, "alarmStatus": 0, "alarmStr": "", "area": "", "cameraChannel": 0, "commids": "129018230141191", "dArr": [], "direction": 0, "driverInfo": "", "eInfo": "", "eqSourceID": 0, "exStatus": 0, "gpsTime": 1694592666000, "gpsTimeStr": "09-13 16:11:06", "h1": "", "h2": "", "h3": "", "h4": "", "isAdas": 0, "isCamera": 0, "isLcd": 0, "isStandardEquip": 0, "isStandardVideo": 0, "lat": 47.319379, "loadWeight": -1, "lon": 123.957714, "odo": 0, "oil": "", "oilIsException": 0, "oilUpLatestGpsTime": "", "oilUpLatestLat": "", "oilUpLatestLon": "", "onlineStatus": 0, "openDoorInfo": [], "placeName": "黑龙江省齐齐哈尔市龙沙区南萃街(普通路)南萃街53号西53米", "pointInfo": "", "regName": "黑AA663挂", "speed": "0", "status": 2, "stopInfo": "停车:5小时37分钟37秒", "t1": "", "t2": "", "t3": "", "t4": "", "tArr": [{ "s": 0, "ta": "", "wayArr": [] }], "telPhone": "", "tempExp": 0, "vStatus": "ACC关,3D定位,天线正常,停车:5小时37分钟37秒", "vehicleId": 2043 }, { "aInfo": "", "accStatus": 1, "alarmStatus": 0, "alarmStr": "", "area": "哈尔滨中心局", "cameraChannel": 0, "commids": "129018230141187", "dArr": [], "direction": 0, "driverInfo": "", "eInfo": "", "eqSourceID": 0, "exStatus": 0, "gpsTime": 1694592666000, "gpsTimeStr": "09-13 16:11:06", "h1": "", "h2": "", "h3": "", "h4": "", "isAdas": 0, "isCamera": 0, "isLcd": 0, "isStandardEquip": 0, "isStandardVideo": 0, "lat": 45.84856, "loadWeight": -1, "lon": 126.617517, "odo": 0, "oil": "", "oilIsException": 0, "oilUpLatestGpsTime": "", "oilUpLatestLat": "", "oilUpLatestLon": "", "onlineStatus": 0, "openDoorInfo": [], "placeName": "黑龙江省哈尔滨市松北区浦达路(普通路)黑龙江融拓北方机械有限责任公司-东南门西", "pointInfo": "哈尔滨中心局", "regName": "黑AA667挂", "speed": "0", "status": 2, "stopInfo": "停车:13小时36分钟22秒", "t1": "", "t2": "", "t3": "", "t4": "", "tArr": [{ "s": 0, "ta": "", "wayArr": [] }], "telPhone": "", "tempExp": 0, "vStatus": "ACC关,3D定位,天线正常,停车:13小时36分钟22秒", "vehicleId": 2037 }, { "aInfo": "", "accStatus": 2, "alarmStatus": 0, "alarmStr": "", "area": "", "cameraChannel": 0, "commids": "107015191762037", "dArr": [], "direction": 32, "driverInfo": "", "eInfo": "", "eqSourceID": 0, "exStatus": 0, "gpsTime": 1694592659000, "gpsTimeStr": "09-13 16:10:59", "h1": "", "h2": "", "h3": "", "h4": "", "isAdas": 0, "isCamera": 0, "isLcd": 0, "isStandardEquip": 0, "isStandardVideo": 0, "lat": 45.678599, "loadWeight": -1, "lon": 126.552804, "odo": 3106.1, "oil": "", "oilIsException": 0, "oilUpLatestGpsTime": "", "oilUpLatestLat": "", "oilUpLatestLon": "", "onlineStatus": 0, "openDoorInfo": [], "placeName": "黑龙江省哈尔滨市南岗区王岗头道街(普通路)新航路30号北", "pointInfo": "", "regName": "黑AA6K97", "speed": "8", "status": 1, "stopInfo": "", "t1": "", "t2": "", "t3": "", "t4": "", "tArr": [{ "s": 0, "ta": "", "wayArr": [] }], "telPhone": "", "tempExp": 0, "vStatus": "ACC开,3D定位,天线正常,CSQ:23", "vehicleId": 1986, } ] // const result = res.result.monitArr // 根据车辆不同状态,渲染不同图标 let carIcon1 = '../../../static/images/carDriving/car1.png' let carIcon2 = '../../../static/images/carDriving/car2.png' let carIcon3 = '../../../static/images/carDriving/car3.png' let carIcon = '' for (let i = 0; i { // console.log('错误') // console.log(1234) // }) // let markesData = [{ // id: 1, // longitude: 126.603150, // latitude: 45.817123, // iconPath: '../../../static/images/carDriving/car2.png', // width: 22, // height: 20, // callout: { // content: '首都机场', // display:'ALWAYS', // fontSize: 14, // borderRadius: 5, // color:'#000', // bgColor: '#ffffff', // padding: 4, // borderRadius:4, // textAlign: 'center' // } // }, // { // id: 2, // longitude: 126.692688, // latitude: 45.733888, // iconPath: '../../../static/images/carDriving/car1.png', // width: 22, // height: 20, // callout: { // content: '首都机场', // display:'ALWAYS', // fontSize: 14, // borderRadius: 5, // color:'#000', // bgColor: '#ffffff', // padding: 4, // borderRadius:4, // textAlign: 'center' // } // } // ] // this.markers = markesData // this.mapCenter = { // longitude: this.calculateCenter(markesData).longitude, // latitude: this.calculateCenter(markesData).latitude, // } // this.mapCenter={ // longitude: 126.661995, // latitude: 45.742227, // } }, // 聚合功能 setMarkersAndCluster(markerList) { // 1.组装数据之后，并赋值给地图上的marker this.markers = Array.from(markerList).map((item, i) => { return { ...item, width: 41, height: 41, iconPath: '../../../static/images/carDriving/car1.png', joinCluster: true, // 这个属性很重要，必须要 callout: { // 自定义标记点上方的气泡窗口 content: '***聚合1', display: 'ALWAYS', // 'BYCLICK':点击显示; 'ALWAYS':常显 padding: 5, textAlign: 'center', color: '#C2874D', borderRadius: 4 } // label: { // 为标记点旁边增加标签 // content: '你好，marker', // borderColor: '#ff0000', // bgColor: '#ffffff' // }, } }) // 2.初始化点聚合的配置，未调用时采用默认配置 this.mapContext.initMarkerCluster({ enableDefaultStyle: false, // 是否启用默认的聚合样式(是否用自定义图标) zoomOnClick: true, gridSize: 60, complete(res) { console.log('initMarkerCluster', res) } }) // 3.发生聚合时，给聚合点设置marker标签 this.mapContext.on('markerClusterCreate', res => { const clusters = res.clusters // 新产生的聚合簇 const zhou = clusters.map(item => { const { center, // 聚合点的经纬度数组 clusterId, // 聚合簇id markerIds // 已经聚合了的标记点id数组 } = item console.log(clusterId) return { ...center, width: 50, height: 50, clusterId, // 必须有 iconPath: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/marker_blue.png', borderRadius: 8, joinCluster: true, label: { // 定制聚合点样式 content: markerIds.length + '', fontSize: 14, width: 18, height: 18, color: '#ffffff', bgColor: '#C2874D', borderRadius: 6, textAlign: 'center', anchorX: 25, anchorY: -60, } } }) // 4. 添加聚合簇标签 this.mapContext.addMarkers({ markers: zhou, clear: false, //是否先清空地图上所有的marker }) console.log(3123123) }) }, // 计算地图的中心点 calculateCenter(markesData) { var sumLongitude = 0; var sumLatitude = 0; for (var i = 0; i跳转到轨迹页
2023-09-07 07:56:29 7:56:11 0.6km/125.3km 5km/h 车牌号码 黑M123H24 时间选择 {{item.name}} 1倍速 查询 黑M123H24 75KM 22.3KM/H 平均速度 0秒 行驶时常 0 停车次数 起点 2023-09-05 14:17:14 云南省测试数据云南省测试数据云南省云南省测试数据云南省测试数据云南省测试数据云南省测试数据云南省测试数据 终点 2023-09-05 14:17:14 数据云南省测试数据云南省测试数据云南省测试数据云南省测试数据云南省测试数据云南省测试数据 报警 0 该车辆暂无报警信息! 温度 该车辆暂无温度信息! 黑M123H24 22.3KM/H 最高时速 22.3KM/H 平均时速 22.3KM/H 最低时速 取消 查询 export default { data() { return { showpickerStart: false, showpickerEnd: false, pickerValue: Number(new Date()), mapContext: null, //地图对象 nextPointIndex: 1, //下一个坐标点的索引 durationTime: 1000, //相邻两点动画持续时长默认1秒 //路线信息 polyline: [{ width: 8, points: [], arrowLine: true, color: '#3591FC', }], //标记点(即移动标记物) markers: [{ id: 1, width: 40, height: 40, latitude: 0, longitude: 0, iconPath: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png', anchor: { x: 0.5, y: 1 } }], isDtail: false, //是否显示详情 isQuery: true, //未点击查询时展示框 isStart: false, //是否播放行车轨迹 timeData: [{ name: '今天' }, { name: '昨天' }, { name: '三天内' }, { name: '自定义' }], current: 0, title: 'map', latitude: 39.909, // 默认纬度 longitude: 116.39742, // 默认经度(北京天安门) covers: [{ id: 110, latitude: 39.909, longitude: 116.39742, iconPath: 'https://mapapi.qq.com/web/lbs/javascriptGL/demo/img/car.png', width: "20", height: "20" }], // controls: [{ // 控件 // id: 99, // position: { // 控件位置 // left: 160, // top: 120 // }, // iconPath: 'https://hellouniapp.dcloud.net.cn/static/location.png' // 控件图标 // }], // address_info: "", // address_info_recomd: "", // address: "" } }, onReady() { this.mapContext = uni.createMapContext('mapCarDriving', this) }, onLoad(option) { this.getTrack() //获取轨迹信息(只做演示，未进行远程请求) }, methods: { formatter(type, value) { if (type === 'year') { return `${value}年` } if (type === 'month') { return `${value}月` } if (type === 'day') { return `${value}日` } return value }, confirmPickerend(e) { this.endTime = e.value this.showpickerEnd = false }, confirmPickerstart(e) { this.startTime = e.value this.showpickerStart = false this.showpickerEnd = true }, // 展示详情数据 upDetail() { // 如果处于播放形成轨迹时,禁止打开详情 if (this.isStart) { uni.showToast({ icon: 'none', title: '请停止播放新城轨迹后查看详情' }) return } this.isDtail = !this.isDtail }, // 切换日期选择tab checkDate(index) { this.current = index if(index === 3){ this.showpickerStart = true } }, // 倍速切换 speedReturn() { console.log('倍速++') }, // 显示隐藏查询条件弹框 queryPop() { this.isQuery = !this.isQuery }, // 查询方法 queryData() { this.isQuery = !this.isQuery }, // 取消返回上一页 cancel() { uni.navigateBack({ delta: 1 //返回上个页面 }) }, //模拟获取远程数据 getTrack() { this.polyline[0].points = [{ latitude: 39.997761, longitude: 116.478935 }, { latitude: 39.997825, longitude: 116.478939 }, { latitude: 39.998549, longitude: 116.478912 }, { latitude: 39.998555, longitude: 116.478998 }, { latitude: 39.998566, longitude: 116.479282 }, { latitude: 39.998528, longitude: 116.479658 }, { latitude: 39.998453, longitude: 116.480151 }, { latitude: 39.998302, longitude: 116.480784 }, { latitude: 39.998184, longitude: 116.481149 }, { latitude: 39.997997, longitude: 116.481573 }, { latitude: 39.997846, longitude: 116.481863 }, { latitude: 39.997718, longitude: 116.482072 }, { latitude: 39.997718, longitude: 116.482362 }, { latitude: 39.998935, longitude: 116.483633 }, { latitude: 39.998968, longitude: 116.48367 }, { latitude: 39.999861, longitude: 116.484648 } ] // this.durationTime = Math.ceil(30000 / this.polyline[0].points.length) //默认播放全程使用30秒，计算相连两点动画时长 this.initMarkers() }, //设置地图 // initMapData() { // }, //设置位置（从起点开始） initMarkers() { this.markers[0].latitude = this.polyline[0].points[0].latitude this.markers[0].longitude = this.polyline[0].points[0].longitude }, //开始移动 handleStartMove() { this.isStart = true this.movePoint() }, //停止移动 handleStopMove() { this.isStart = false }, //移动坐标 movePoint() { /* //也可以用这个方法 this.mapContext.moveAlong({ duration: 30000, markerId: this.markers[0].id, path: this.polyline[0].points }) return */ this.mapContext.translateMarker({ duration: 800, markerId: this.markers[0].id, autoRotate: true, // 移动过程中自动旋转marker rotate:15, // marker旋转角度 moveWithRotate: false, // 小车平移与旋转同时进行 destination: { latitude: this.polyline[0].points[this.nextPointIndex].latitude, longitude: this.polyline[0].points[this.nextPointIndex].longitude }, animationEnd: res => { //播放结束，继续移动到下一个点，最后一个点时结束移动 if (this.nextPointIndex
免责声明：我们致力于保护作者版权，注重分享，被刊用文章因无法核实真实出处，未能及时与作者取得联系，或有版权异议的，请联系管理员，我们会立即处理! 部分文章是来自自研大数据AI进行生成,内容摘自(百度百科,百度知道,头条百科,中国民法典,刑法,牛津词典,新华词典,汉语词典,国家院校,科普平台)等数据,内容仅供学习参考,不准确地方联系删除处理! 图片声明：本站部分配图来自人工智能系统AI生成,觅知网授权图片,PxHere摄影无版权图库和百度，360，搜狗等多加搜索引擎自动关键词搜索配图，如有侵权的图片，请第一时间联系我们，邮箱：ciyunidc@ciyunshuju.com。本站只作为美观性配图使用,无任何非法侵犯第三方意图,一切解释权归图片著作权方,本站不承担任何责任。如有恶意碰瓷者,必当奉陪到底严惩不贷!
