|
|
|
|
@ -4,25 +4,17 @@
@@ -4,25 +4,17 @@
|
|
|
|
|
<script setup lang="ts"> |
|
|
|
|
import AMapLoader from '@amap/amap-jsapi-loader'; |
|
|
|
|
import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue'; |
|
|
|
|
import { mapList } from './data'; |
|
|
|
|
import { mapList, mapList1 } from './data'; |
|
|
|
|
import hospital from '/@/assets/images/hospital.svg'; |
|
|
|
|
|
|
|
|
|
export interface MapConfigureInter { |
|
|
|
|
on: Fn; |
|
|
|
|
destroy: Fn; |
|
|
|
|
clearEvents: Fn; |
|
|
|
|
addControl: Fn; |
|
|
|
|
setCenter: Fn; |
|
|
|
|
setZoom: Fn; |
|
|
|
|
plugin: Fn; |
|
|
|
|
} |
|
|
|
|
import medicalKit from '/@/assets/images/medical-kit.svg'; |
|
|
|
|
import redFlag from '/@/assets/images/redFlag.svg'; |
|
|
|
|
|
|
|
|
|
type resultType = { |
|
|
|
|
info: Array<undefined>; |
|
|
|
|
}; |
|
|
|
|
|
|
|
|
|
let MarkerCluster; |
|
|
|
|
let map: MapConfigureInter; |
|
|
|
|
let map; |
|
|
|
|
|
|
|
|
|
const instance = getCurrentInstance(); |
|
|
|
|
|
|
|
|
|
@ -42,10 +34,10 @@ const complete = (): void => {
@@ -42,10 +34,10 @@ const complete = (): void => {
|
|
|
|
|
onBeforeMount(() => { |
|
|
|
|
if (!instance) return; |
|
|
|
|
const MapConfigure = { |
|
|
|
|
amapKey: '97b3248d1553172e81f168cf94ea667e', |
|
|
|
|
amapKey: 'f278d021a80dcf81f071aee5bff08804', |
|
|
|
|
options: { |
|
|
|
|
resizeEnable: true, |
|
|
|
|
center: [113.6401, 34.72468], |
|
|
|
|
center: [116.39,40.1], |
|
|
|
|
zoom: 12 |
|
|
|
|
} |
|
|
|
|
}; |
|
|
|
|
@ -54,7 +46,7 @@ onBeforeMount(() => {
@@ -54,7 +46,7 @@ onBeforeMount(() => {
|
|
|
|
|
AMapLoader.load({ |
|
|
|
|
key: MapConfigure.amapKey, |
|
|
|
|
version: '2.0', |
|
|
|
|
plugins: ['AMap.MarkerCluster'] |
|
|
|
|
plugins: ['AMap.MarkerCluster','AMap.Driving'] |
|
|
|
|
}).then(AMap => { |
|
|
|
|
// 创建地图实例 |
|
|
|
|
map = new AMap.Map(instance.refs.mapview, options); |
|
|
|
|
@ -70,6 +62,47 @@ onBeforeMount(() => {
@@ -70,6 +62,47 @@ onBeforeMount(() => {
|
|
|
|
|
); |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const marker1 = new AMap.Marker({ |
|
|
|
|
position: new AMap.LngLat(116.39,39.9), |
|
|
|
|
offset: new AMap.Pixel(-10, -10), |
|
|
|
|
content: `<img width="30px" height="30px" src="${hospital}">`, |
|
|
|
|
label: { |
|
|
|
|
direction: 'bottom', |
|
|
|
|
//设置文本标注偏移量 |
|
|
|
|
offset: new AMap.Pixel(0, 0), |
|
|
|
|
//设置文本标注内容 |
|
|
|
|
content: '<div>发单点</div>' |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const marker2 = new AMap.Marker({ |
|
|
|
|
position: new AMap.LngLat(116.39,40), |
|
|
|
|
offset: new AMap.Pixel(-10, -10), |
|
|
|
|
content: `<img width="30px" height="30px" src="${medicalKit}">`, |
|
|
|
|
label: { |
|
|
|
|
direction: 'bottom', |
|
|
|
|
//设置文本标注偏移量 |
|
|
|
|
offset: new AMap.Pixel(0, 0), |
|
|
|
|
//设置文本标注内容 |
|
|
|
|
content: '<div>收样员</div>' |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
const marker3 = new AMap.Marker({ |
|
|
|
|
position: new AMap.LngLat(116.39,40.1), |
|
|
|
|
offset: new AMap.Pixel(-10, -10), |
|
|
|
|
content: `<img width="30px" height="30px" src="${redFlag}">`, |
|
|
|
|
label: { |
|
|
|
|
direction: 'bottom', |
|
|
|
|
//设置文本标注偏移量 |
|
|
|
|
offset: new AMap.Pixel(0, 0), |
|
|
|
|
//设置文本标注内容 |
|
|
|
|
content: '<div>医检机构</div>' |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
map.add([marker1, marker2, marker3]); |
|
|
|
|
|
|
|
|
|
MarkerCluster = new AMap.MarkerCluster(map, [], { |
|
|
|
|
// 聚合网格像素大小 |
|
|
|
|
gridSize: 80, |
|
|
|
|
@ -95,12 +128,63 @@ onBeforeMount(() => {
@@ -95,12 +128,63 @@ onBeforeMount(() => {
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
// 获取模拟车辆信息 |
|
|
|
|
|
|
|
|
|
const MarkerCluster1 = new AMap.MarkerCluster(map, [], { |
|
|
|
|
// 聚合网格像素大小 |
|
|
|
|
gridSize: 80, |
|
|
|
|
maxZoom: 14, |
|
|
|
|
renderMarker(ctx) { |
|
|
|
|
let { marker, data } = ctx; |
|
|
|
|
if (Array.isArray(data) && data[0]) { |
|
|
|
|
const { driver, plateNumber, orientation } = data[0]; |
|
|
|
|
const content = `<img width="60px" height="60px" style="transform: scale(1) rotate(${360 - Number(orientation)}deg);" src='${medicalKit}'/>`; |
|
|
|
|
marker.setContent(content); |
|
|
|
|
marker.setLabel({ |
|
|
|
|
direction: 'bottom', |
|
|
|
|
//设置文本标注偏移量 |
|
|
|
|
offset: new AMap.Pixel(-4, 0), |
|
|
|
|
//设置文本标注内容 |
|
|
|
|
content: `<div> ${plateNumber}(${driver})</div>` |
|
|
|
|
}); |
|
|
|
|
marker.setOffset(new AMap.Pixel(-18, -10)); |
|
|
|
|
marker.on('click', ({ lnglat }) => { |
|
|
|
|
map.setZoom(13); //设置地图层级 |
|
|
|
|
map.setCenter(lnglat); |
|
|
|
|
}); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
const points = mapList.map((v: any) => ({ |
|
|
|
|
lnglat: [v.lng, v.lat], |
|
|
|
|
...v |
|
|
|
|
})); |
|
|
|
|
|
|
|
|
|
const points1 = mapList1.map((v: any) => ({ |
|
|
|
|
lnglat: [v.lng, v.lat], |
|
|
|
|
...v |
|
|
|
|
})); |
|
|
|
|
if (MarkerCluster) MarkerCluster.setData(points); |
|
|
|
|
MarkerCluster1.setData(points1); |
|
|
|
|
|
|
|
|
|
var driving = new AMap.Driving({ |
|
|
|
|
// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式 |
|
|
|
|
policy: AMap.DrivingPolicy.LEAST_TIME, |
|
|
|
|
// map 指定将路线规划方案绘制到对应的AMap.Map对象上 |
|
|
|
|
map: map, |
|
|
|
|
// panel 指定将结构化的路线详情数据显示的对应的DOM上，传入值需是DOM的ID |
|
|
|
|
panel: 'panel' |
|
|
|
|
}); |
|
|
|
|
|
|
|
|
|
var points3 = [ |
|
|
|
|
{ keyword: '北京市地震局（公交站）',city:'北京' }, |
|
|
|
|
{ keyword: '亦庄文化园（地铁站）',city:'北京' } |
|
|
|
|
]; |
|
|
|
|
|
|
|
|
|
// 搜索完成后，将自动绘制路线到地图上 |
|
|
|
|
driving.search(points3); |
|
|
|
|
|
|
|
|
|
complete(); |
|
|
|
|
}).catch(() => { |
|
|
|
|
mapSet.loading = false; |
|
|
|
|
@ -116,6 +200,27 @@ onUnmounted(() => {
@@ -116,6 +200,27 @@ onUnmounted(() => {
|
|
|
|
|
}); |
|
|
|
|
</script> |
|
|
|
|
<style lang="less" scoped> |
|
|
|
|
|
|
|
|
|
.custom-content-marker { |
|
|
|
|
position: relative; |
|
|
|
|
width: 25px; |
|
|
|
|
height: 34px; |
|
|
|
|
.close-btn { |
|
|
|
|
position: absolute; |
|
|
|
|
top: -6px; |
|
|
|
|
right: -8px; |
|
|
|
|
width: 15px; |
|
|
|
|
height: 15px; |
|
|
|
|
font-size: 12px; |
|
|
|
|
background: #ccc; |
|
|
|
|
border-radius: 50%; |
|
|
|
|
color: #fff; |
|
|
|
|
text-align: center; |
|
|
|
|
line-height: 15px; |
|
|
|
|
box-shadow: -1px 1px 1px rgba(10, 10, 10, .2); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
#mapview { |
|
|
|
|
height: calc(100vh - 86px); |
|
|
|
|
} |
|
|
|
|
|
wangxiang
3 years ago
