👈 编写高德地图组件

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

@@ -1,5 +1,8 @@
 <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>
 <script lang="ts" setup>
   import AMapLoader from '@amap/amap-jsapi-loader';
@@ -265,10 +268,12 @@
       // 构造路线导航类
       const driving = new AMap.Driving({
         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') {
           console.log('绘制驾车路线完成');
         } else {
@@ -311,4 +316,25 @@
   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>

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

@@ -28,7 +28,7 @@ export const smallHospitalMapList: 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.913864, lat: 28.295114}
+  {title: '收样员:小明', orientation: 0, lng: 112.913864, lat: 28.295114}
 ];