👈 编写高德地图组件

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

@@ -18,15 +18,25 @@
                :wrapperCol="{ style: { width: '100%', 'margin-right': '10px' } }"
                :model="mapState.modelRef"
         >
+          <AFormItem label="发单点">
+            <ASelect v-model:value="mapState.modelRef.smallHospitalTakeId"
+                     :options="[
+                       { value: '001', label: '下级医院:湘雅医院'},
+                       { value: '002', label: '下级医院:神经病医院'},
+                       { value: '003', label: '下级医院:第三医院'}
+                     ]"
+                     @select="handleTakeSpecimenSearch"
+            />
+          </AFormItem>
           <AFormItem label="起点">
-            <ASelect v-model:value="mapState.modelRef.specimenMarkerId" :options="[]"/>
+            <ASelect v-model:value="mapState.modelRef.takeSpecimenId" :options="[]"/>
           </AFormItem>
           <AFormItem label="途径点">
             <ASelect v-model:value="mapState.modelRef.smallHospitalId"
                      :options="[
-                       { value: '001', label: '下级医院:第三医院'},
+                       { value: '001', label: '下级医院:湘雅医院'},
                        { value: '002', label: '下级医院:神经病医院'},
-                       { value: '003', label: '下级医院:湘雅医院'}
+                       { value: '003', label: '下级医院:第三医院'}
                      ]"
             />
           </AFormItem>
@@ -56,7 +66,7 @@
   let map;
   let largeHospitalMarkerCluster;
   let smallHospitalMarkerCluster;
-  let specimenMarkerCluster;
+  let takeSpecimenCluster;
   const instance = getCurrentInstance();
   const mapState = reactive({
     loading: false,
@@ -67,9 +77,10 @@
     },
     toggleStatus: true,
     modelRef: {
+      smallHospitalTakeId: '',
       largeHospitalId: '',
       smallHospitalId: '',
-      specimenMarkerId: ''
+      takeSpecimenId: ''
     }
   });
   const AForm = Form;
@@ -79,12 +90,10 @@
     title: '地图任务列表',
     rowKey: 'id',
     dataSource: [{
+      id: '001',
       taskName: '测试任务1'
     },{
-      taskName: '测试任务2'
-    },{
-      taskName: '测试任务2'
-    },{
+      id: '002',
       taskName: '测试任务2'
     }],
     columns,
@@ -234,7 +243,7 @@
       smallHospitalMarkerCluster?.setData(smallHospitalPoints);
 
       // 收样员标记点
-      specimenMarkerCluster = new AMap.MarkerCluster(map, [], {
+      takeSpecimenCluster = new AMap.MarkerCluster(map, [], {
         gridSize: 80,
         maxZoom: 14,
         renderMarker(ctx) {
@@ -268,7 +277,7 @@
           marker.setOffset(new AMap.Pixel(-18, -10));
         }
       });
-      specimenMarkerCluster.on('click', ctx => {
+      takeSpecimenCluster.on('click', ctx => {
         const { lnglat } = ctx;
         map.setZoomAndCenter(18, lnglat);
       });
@@ -276,7 +285,7 @@
         lnglat: [v.lng, v.lat],
         ...v
       }));
-      specimenMarkerCluster?.setData(specimenPoints);
+      takeSpecimenCluster?.setData(specimenPoints);
 
       // 构造路线导航类
       const driving = new AMap.Driving({
@@ -333,6 +342,19 @@
     }
   }
 
+  /** 处理收取标本收养员搜索 */
+  function handleTakeSpecimenSearch (value) {
+    // 查找当前下级医院数据
+    const smallHospitalMap = smallHospitalMapList.find(item => item.id == value);
+    if (smallHospitalMap) {
+      // 定位当前发单点位置
+      map.setZoomAndCenter(18, [smallHospitalMap.lng, smallHospitalMap.lat]);
+
+    } else {
+      throw '查找不到发单点数据,请检查发单点!';
+    }
+  }
+
 </script>
 <style lang="less" scoped>
 

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

@@ -8,6 +8,7 @@ import {BasicColumn} from '/@/components/Table';
  */
 
 type mapType = {
+  id: string;
   title: string;
   orientation: number;
   lng: number;
@@ -16,21 +17,21 @@ type mapType = {
 };
 
 export const largeHospitalMapList: mapType[] = [
-  {title: '上级医检医院:金域', orientation: 0, lng: 112.919043, lat: 28.288623},
-  {title: '上级医检医院:康来', orientation: 0, lng: 112.919165, lat: 28.289924},
-  {title: '上级医检医院:附一', orientation: 0, lng: 112.919965, lat: 28.289924}
+  {id: '001', title: '上级医检医院:金域', orientation: 0, lng: 112.919043, lat: 28.288623},
+  {id: '002', title: '上级医检医院:康来', orientation: 0, lng: 112.919165, lat: 28.289924},
+  {id: '003', title: '上级医检医院:附一', orientation: 0, lng: 112.919965, lat: 28.289924}
 ];
 
 export const smallHospitalMapList: mapType[] = [
-  {title: '下级医院:湘雅医院', orientation: 0, lng: 112.918119, lat: 28.282891, notify: true},
-  {title: '下级医院:神经病医院', orientation: 0, lng: 112.918919, lat: 28.282991, notify: true},
-  {title: '下级医院:第三医院', orientation: 0, lng: 112.918019, lat: 28.283991, notify: true}
+  {id: '001', title: '下级医院:湘雅医院', orientation: 0, lng: 112.918119, lat: 28.282891, notify: true},
+  {id: '002', title: '下级医院:神经病医院', orientation: 0, lng: 112.918919, lat: 28.282991, notify: true},
+  {id: '003', title: '下级医院:第三医院', orientation: 0, lng: 112.918019, lat: 28.283991, notify: true}
 ];
 
 export const specimenMapList: mapType[] = [
-  {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}
+  {id: '001', title: '收样员:小狗', orientation: 0, lng: 112.915897, lat: 28.295506},
+  {id: '002', title: '收样员:小红', orientation: 0, lng: 112.914481, lat: 28.294977},
+  {id: '003', title: '收样员:小明', orientation: 0, lng: 112.913864, lat: 28.295114}
 ];
 
 export const columns: BasicColumn[] = [