👈 编写高德地图组件

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

@@ -1,226 +1,121 @@
 <template>
-  <div id="mapview" ref="mapview" v-loading="mapSet.loading"/>
+  <div id="mapview" ref="mapview" v-loading="mapState.loading"/>
 </template>
-<script setup lang="ts">
-import AMapLoader from '@amap/amap-jsapi-loader';
-import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue';
-import { mapList, mapList1 } from './data';
-import hospital from '/@/assets/images/hospital.svg';
-import medicalKit from '/@/assets/images/medical-kit.svg';
-import redFlag from '/@/assets/images/redFlag.svg';
-
-type resultType = {
-  info: Array<undefined>;
-};
-
-let MarkerCluster;
-let map;
-
-const instance = getCurrentInstance();
-
-const mapSet = reactive({
+<script lang="ts" setup>
+  import AMapLoader from '@amap/amap-jsapi-loader';
+  import { reactive, getCurrentInstance, onBeforeMount, onUnmounted } from 'vue';
+  import { largeHospitalMapList } from './data';
+  import hospital from '/@/assets/images/hospital.svg';
+  import medicalKit from '/@/assets/images/medical-kit.svg';
+  import redFlag from '/@/assets/images/redFlag.svg';
+
+  let map;
+  let largeHospitalMarkerCluster;
+  let smallHospitalMarkerCluster;
+  let specimenMarkerCluster;
+
+  const instance = getCurrentInstance();
+  const mapState = reactive({
     loading: true
-});
-
-// 地图创建完成(动画关闭)
-const complete = (): void => {
-  if (map) {
-    map.on('complete', () => {
-      mapSet.loading = false;
   });
-  }
-};
+  /** 地图创建完成(动画关闭) */
+  const complete = (): void => {
+    map && map.on('complete', () => {
+      mapState.loading = false;
+    });
+  };
 
-onBeforeMount(() => {
+  onBeforeMount(() => {
     if (!instance) return;
-  const MapConfigure = {
+    const mapConfig = {
       amapKey: 'f278d021a80dcf81f071aee5bff08804',
       options: {
+        pitch:60,
+        viewMode:'3D',
         resizeEnable: true,
-      center: [116.39,40.1],
-      zoom: 12
+        center: [112.919043,28.288623],
+        zoom: 16,
+        keyboardEnable: true
       }
     };
-  let { options } = MapConfigure;
 
     AMapLoader.load({
-    key: MapConfigure.amapKey,
+      key: mapConfig.amapKey,
       version: '2.0',
-    plugins: ['AMap.MarkerCluster','AMap.Driving']
+      plugins: ['AMap.MarkerCluster']
     }).then(AMap => {
       // 创建地图实例
-      map = new AMap.Map(instance.refs.mapview, options);
-
+      map = new AMap.Map(instance.refs.mapview, mapConfig.options);
       //地图中添加地图操作ToolBar插件
-      map.plugin(['AMap.ToolBar', 'AMap.MapType'], () => {
+      map.plugin(['AMap.ToolBar', 'AMap.MapType', 'AMap.ControlBar', 'AMap.Scale'], () => {
+        // 地图操作工具条插件
         map.addControl(new AMap.ToolBar());
-        //地图类型切换
+        // 组合了旋转,倾斜,复位,缩放插件
+        map.addControl(new AMap.ControlBar());
+        // 比例尺插件
+        const scale = new AMap.Scale();
+        scale.show();
+        map.addControl(scale);
+        // 地图类型切换插件
         map.addControl(
           new AMap.MapType({
-            defaultType: 0
+            defaultType: 1,
+            showRoad: true
           })
         );
       });
 
-    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,
-        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='${hospital}'/>`;
-            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 MarkerCluster1 = new AMap.MarkerCluster(map, [], {
+      largeHospitalMarkerCluster = 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}'/>`;
+            const { title, orientation } = data[0];
+            const content = `<img width="30px" height="30px" style="transform: scale(1) rotate(${360 - Number(orientation)}deg);" src='${redFlag}'/>`;
             marker.setContent(content);
             marker.setLabel({
               direction: 'bottom',
               //设置文本标注偏移量
               offset: new AMap.Pixel(-4, 0),
               //设置文本标注内容
-            content: `<div> ${plateNumber}(${driver})</div>`
+              content: `<div>${title}</div>`
             });
             marker.setOffset(new AMap.Pixel(-18, -10));
             marker.on('click', ({ lnglat }) => {
-            map.setZoom(13); //设置地图层级
+              //设置地图层级
+              map.setZoom(16);
               map.setCenter(lnglat);
             });
           }
         }
       });
 
-
-      const points = mapList.map((v: any) => ({
-        lnglat: [v.lng, v.lat],
-        ...v
-      }));
-
-    const points1 = mapList1.map((v: any) => ({
+      const largeHospitalPoints = largeHospitalMapList.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);
+      if (largeHospitalMarkerCluster) largeHospitalMarkerCluster.setData(largeHospitalPoints);
 
       complete();
     }).catch(() => {
-      mapSet.loading = false;
+      mapState.loading = false;
       throw '地图加载失败，请重新加载';
     });
-});
 
-onUnmounted(() => {
+  });
+
+  onUnmounted(() => {
     if (map) {
       // 销毁地图实例
       map.destroy() && map.clearEvents('click');
     }
-});
+  });
+
 </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);
 }

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

@@ -1,25 +1,19 @@
+/**
+ * @program: kicc-ui
+ * @description: 地图静态数据
+ * @author: entfrm开发团队-王翔
+ * @create: 2022/5/22
+ */
 
 type mapType = {
-  plateNumber: string;
-  driver: string;
+  title: string;
   orientation: number;
   lng: number;
   lat: number;
-  'orientation|1-360'?: number;
-  'lng|113-114.1-10'?: number;
-  'lat|34-35.1-10'?: number;
 };
 
-export const mapList: mapType[] = [
-  {plateNumber: '豫A36523R', driver: '郑霞', orientation: 0, lng: 114.893657, lat: 35.289},
-  {plateNumber: '豫A76788W', driver: '苏娜', orientation: 0, lng: 114.71, lat: 34.5394614},
-  {plateNumber: '豫A90026H', driver: '马洋', orientation: 0, lng: 114.72888, lat: 35.4585},
-  {plateNumber: '豫A20644R', driver: '孙洋', orientation: 0, lng: 114.1722778, lat: 35.340310104},
-  {plateNumber: '豫A97973Y', driver: '朱丽', orientation: 0, lng: 113.72223, lat: 35.68455},
-  {plateNumber: '豫A76379B', driver: '蒋强', orientation: 0, lng: 114.379, lat: 34.36825}
+export const largeHospitalMapList: mapType[] = [
+  {title: '上级医院:测试1', orientation: 0, lng: 112.919043, lat: 28.288623},
+  {title: '上级医院:测试2', orientation: 0, lng: 114.71, lat: 34.5394614}
 ];
 
-export const mapList1: mapType[] = [
-  {plateNumber: '豫A36523R', driver: '郑霞', orientation: 0, lng: 119.893657, lat: 35.289},
-  {plateNumber: '豫A76788W', driver: '苏娜', orientation: 0, lng: 111.71, lat: 34.5394614}
-];