Browse Source

👈 编写高德地图组件

master
wangxiang 3 years ago
parent
commit
dccbac08d6
  1. 32
      kicc-ui/src/components/AMap/src/Amap.vue
  2. 4
      kicc-ui/src/components/AMap/src/data.ts

32
kicc-ui/src/components/AMap/src/Amap.vue

@ -1,5 +1,8 @@
<template> <template>
<div id="mapview" ref="mapview" v-loading="mapState.loading"/> <div v-loading="mapState.loading">
<div id="mapview" ref="mapview"/>
<div id="mapPanel" ref="mapPanel"/>
</div>
</template> </template>
<script lang="ts" setup> <script lang="ts" setup>
import AMapLoader from '@amap/amap-jsapi-loader'; import AMapLoader from '@amap/amap-jsapi-loader';
@ -265,10 +268,12 @@
// 线 // 线
const driving = new AMap.Driving({ const driving = new AMap.Driving({
map: map, map: map,
panel: 'panel' panel: instance.refs.mapPanel
}); });
// 线 // 线
driving.search(new AMap.LngLat(116.379028, 39.865042), new AMap.LngLat(116.427281, 39.903719), function(status, result) { driving.search(new AMap.LngLat(112.913864, 28.295114), new AMap.LngLat(112.918119, 28.282891), {
waypoints:[new AMap.LngLat(112.919165, 28.289924)]
}, function(status, result) {
if (status === 'complete') { if (status === 'complete') {
console.log('绘制驾车路线完成'); console.log('绘制驾车路线完成');
} else { } else {
@ -311,4 +316,25 @@
display: none!important; display: none!important;
} }
#mapPanel {
position: fixed;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 210px;
right: 18px;
width: 280px;
}
#mapPanel :deep(.amap-call) {
background-color: #009cf9;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
#mapPanel :deep(.amap-lib-driving) {
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
overflow: hidden;
}
</style> </style>

4
kicc-ui/src/components/AMap/src/data.ts

@ -28,7 +28,7 @@ export const smallHospitalMapList: mapType[] = [
]; ];
export const specimenMapList: mapType[] = [ export const specimenMapList: mapType[] = [
{title: '收样员:小', orientation: 0, lng: 112.915897, lat: 28.295506}, {title: '收样员:小', orientation: 0, lng: 112.915897, lat: 28.295506},
{title: '收样员:小红', orientation: 0, lng: 112.914481, lat: 28.294977}, {title: '收样员:小红', orientation: 0, lng: 112.914481, lat: 28.294977},
{title: '收样员:小', orientation: 0, lng: 112.913864, lat: 28.295114} {title: '收样员:小', orientation: 0, lng: 112.913864, lat: 28.295114}
]; ];

Loading…
Cancel
Save