|
|
@ -5,7 +5,7 @@ |
|
|
|
import AMapLoader from '@amap/amap-jsapi-loader'; |
|
|
|
import AMapLoader from '@amap/amap-jsapi-loader'; |
|
|
|
import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue'; |
|
|
|
import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue'; |
|
|
|
import { mapList } from './data'; |
|
|
|
import { mapList } from './data'; |
|
|
|
import car from '/@/assets/car.png'; |
|
|
|
import hospital from '/@/assets/images/hospital.svg'; |
|
|
|
|
|
|
|
|
|
|
|
export interface MapConfigureInter { |
|
|
|
export interface MapConfigureInter { |
|
|
|
on: Fn; |
|
|
|
on: Fn; |
|
|
@ -41,7 +41,14 @@ const complete = (): void => { |
|
|
|
|
|
|
|
|
|
|
|
onBeforeMount(() => { |
|
|
|
onBeforeMount(() => { |
|
|
|
if (!instance) return; |
|
|
|
if (!instance) return; |
|
|
|
let { MapConfigure } = instance.appContext.config.globalProperties.$config; |
|
|
|
const MapConfigure = { |
|
|
|
|
|
|
|
amapKey: '97b3248d1553172e81f168cf94ea667e', |
|
|
|
|
|
|
|
options: { |
|
|
|
|
|
|
|
resizeEnable: true, |
|
|
|
|
|
|
|
center: [113.6401, 34.72468], |
|
|
|
|
|
|
|
zoom: 12 |
|
|
|
|
|
|
|
} |
|
|
|
|
|
|
|
}; |
|
|
|
let { options } = MapConfigure; |
|
|
|
let { options } = MapConfigure; |
|
|
|
|
|
|
|
|
|
|
|
AMapLoader.load({ |
|
|
|
AMapLoader.load({ |
|
|
@ -70,10 +77,8 @@ onBeforeMount(() => { |
|
|
|
renderMarker(ctx) { |
|
|
|
renderMarker(ctx) { |
|
|
|
let { marker, data } = ctx; |
|
|
|
let { marker, data } = ctx; |
|
|
|
if (Array.isArray(data) && data[0]) { |
|
|
|
if (Array.isArray(data) && data[0]) { |
|
|
|
var { driver, plateNumber, orientation } = data[0]; |
|
|
|
const { driver, plateNumber, orientation } = data[0]; |
|
|
|
var content = `<img style="transform: scale(1) rotate(${ |
|
|
|
const content = `<img width="60px" height="60px" style="transform: scale(1) rotate(${360 - Number(orientation)}deg);" src='${hospital}' />`; |
|
|
|
360 - Number(orientation) |
|
|
|
|
|
|
|
}deg);" src='${car}' />`; |
|
|
|
|
|
|
|
marker.setContent(content); |
|
|
|
marker.setContent(content); |
|
|
|
marker.setLabel({ |
|
|
|
marker.setLabel({ |
|
|
|
direction: 'bottom', |
|
|
|
direction: 'bottom', |
|
|
@ -90,9 +95,8 @@ onBeforeMount(() => { |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
} |
|
|
|
}); |
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
// 获取模拟车辆信息 |
|
|
|
// 获取模拟车辆信息 |
|
|
|
const points = mapList().map((v: any) => ({ |
|
|
|
const points = mapList.map((v: any) => ({ |
|
|
|
lnglat: [v.lng, v.lat], |
|
|
|
lnglat: [v.lng, v.lat], |
|
|
|
...v |
|
|
|
...v |
|
|
|
})); |
|
|
|
})); |
|
|
|