更新

src/api/index.js

@@ -44,3 +44,8 @@ export const dateCangeCrderCount = (data) => {
 export const logisticsMapCount = (data) => {
     return axios.get('dataview/logistics_map_count', { params: data });
 }
+
+// 首页地图镇级统计信息
+export const townMapCoun = (data) => {
+    return axios.get('dataview/town_map_count', { params: data });
+}

src/view/delivery/components/AMap.vue

@@ -6,11 +6,22 @@ let map = null;
 
 const loading = ref(true);
 
-onMounted(() => {
+const props = defineProps({
+  list: {
+    type: Object,
+    default: () => []
+  },
+  open: {
+    type: String,
+    default: ''
+  }
+})
+
+const initMap = () => {
   AMapLoader.load({
     key: "4f8f55618010007147aab96fc72bb408", // 申请好的Web端开发者Key，首次调用 load 时必填
     version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
-    plugins: [], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
+    plugins: ['AMap.Geocoder'], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
     Loca: {
       version: '2.0.0'
     }
@@ -32,6 +43,17 @@ onMounted(() => {
       });
       map.setPitch(30);
 
+      let geocoder = new AMap.Geocoder();
+
+
+      geocoder.getLocation(props.open, function (status, result) {
+        if (status === 'complete' && result.info === 'OK') {
+          // 获取成功，result.geocodes包含了返回的经纬度信息
+          let latlong = result.geocodes[0].location;
+          let start = [latlong.lng, latlong.lat];
+          let line = [];
+          map.setCenter(start);
+
           // 创建 AMap.Icon 实例：
           const icon = new AMap.Icon({
             size: new AMap.Size(50, 60),    // 图标尺寸
@@ -42,7 +64,7 @@ onMounted(() => {
           });
           // 创建一个 Marker 实例：
           const marker = new AMap.Marker({
-        position: new AMap.LngLat(105.441866, 28.87098),   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
+            position: start,   // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
             icon: icon,
             offset: new AMap.Pixel(-25, -60), // 图标相对于标记点的位置偏移量
           });
@@ -50,67 +72,66 @@ onMounted(() => {
           // 将创建的点标记添加到已有的地图实例：
           map.add(marker);
 
+          props.list.forEach(item => {
+            geocoder.getLocation(item, function (status, result) {
+              if (status === 'complete' && result.info === 'OK') {
+                // 获取成功，result.geocodes包含了返回的经纬度信息
+                let geocodes = result.geocodes[0].location;
+                line.push([geocodes.lng, geocodes.lat]);
+                if (line.length == props.list.length) {
+                  initLine(start, line);
+                }
+              } else {
+                // 获取失败，可根据具体需求进行错误处理
+                console.log('获取经纬度失败');
+              }
+            })
+          })
+        } else {
+          // 获取失败，可根据具体需求进行错误处理
+          console.log('获取经纬度失败');
+        }
+      });
+
+    })
+    .catch((e) => {
+      console.log(e);
+    });
+}
+
+const initLine = (start = [], line = []) => {
+
+  let features = [];
+  line.forEach((item => {
+    features.push({
+      "type": "Feature",
+      "properties": {},
+      "geometry": {
+        "type": "LineString",
+        "coordinates": [
+          start,
+          item
+        ]
+      }
+    },)
+  }))
+
   // 创建 Loca 实例
-      var loca = new Loca.Container({
+  let loca = new Loca.Container({
     map: map
   });
 
   // 创建数据源
-      var dataSource = new Loca.GeoJSONSource({
+  let dataSource = new Loca.GeoJSONSource({
     // url: 'xxx.geojson', 或者使用 data 字段
     data: {
       "type": "FeatureCollection",
-          "features": [
+      "features": features
-            {
-              "type": "Feature",
-              "properties": {},
-              "geometry": {
-                "type": "LineString",
-                "coordinates": [
-                  [105.441866, 28.87098],
-                  [105.449866, 28.87998]
-                ]
-              }
-            },
-            {
-              "type": "Feature",
-              "properties": {},
-              "geometry": {
-                "type": "LineString",
-                "coordinates": [
-                  [105.441866, 28.87098],
-                  [105.440866, 28.87658]
-                ]
-              }
-            },
-            {
-              "type": "Feature",
-              "properties": {},
-              "geometry": {
-                "type": "LineString",
-                "coordinates": [
-                  [105.441866, 28.87098],
-                  [105.435866, 28.87658]
-                ]
-              }
-            },
-            {
-              "type": "Feature",
-              "properties": {},
-              "geometry": {
-                "type": "LineString",
-                "coordinates": [
-                  [105.441866, 28.87098],
-                  [105.43, 28.87]
-                ]
-              }
-            }
-          ]
     },
   });
 
   // 弧线
-      var pulseLink = new Loca.PulseLinkLayer({
+  let pulseLink = new Loca.PulseLinkLayer({
     // loca,
     zIndex: 30,
     opacity: 1,
@@ -143,13 +164,14 @@ onMounted(() => {
     headColor: 'rgba(91, 219, 246, 1)',
     trailColor: 'rgba(255, 255,0,0)',
   });
+
+  // 添加到地图上
   loca.add(pulseLink);
   loca.animate.start();
-      // 添加到地图上
+}
-    })
+
-    .catch((e) => {
+onMounted(() => {
-      console.log(e);
+  initMap();
-    });
 });
 
 onUnmounted(() => {

src/view/delivery/components/AMapLeft.vue

@@ -48,7 +48,7 @@ const initMap = () => {
 
 
       let str = props.info.user_address;
-      str = str.replace(/[1-10]队/, '');
+      str = str.replace(/\d+队/, '');
 
       if (props.info.mer_lat && props.info.mer_long) {
         let geocoder = new AMap.Geocoder({

src/view/delivery/components/center.vue

@@ -7,13 +7,22 @@ import { logisticsMapCount } from "@/api/index.js";
 
 const appStore = useAppStore();
 
+const list = ref([]);
+const open = ref({});
 const initInfo = () => {
   logisticsMapCount({
     areaCode: appStore.delivery_address.areaCode,
     streetCode: appStore.delivery_address.streetCode,
     courier_id: appStore.delivery_address.courier_id
   }).then(res => {
-    console.log(res);
+    res.data.latestTenOrder.forEach(item => {
+      list.value.push(item.receiver_address.replace(/\d+队/, ''))
+    })
+    // 测试数据使用, 可删除, 测试前需正则匹配\d+队5353
+    // list.value[0] += '和瑞世纪城';
+    // list.value[1] += '县政府';
+    // list.value[2] += '阳光国际城 ';
+    open.value = res.data.latestOrder.mer_address;
   })
 }
 
@@ -30,7 +39,7 @@ onMounted(() => {
 <template>
   <div class="box">
     <div class="map">
-      <AMap></AMap>
+      <AMap :list="list" :open="open"></AMap>
     </div>
     <div class="border"></div>
     <div class="btn">

src/view/index/components/centerItem1.vue

@@ -1,6 +1,26 @@
 <script setup>
 import ball from "./ball.vue";
 import centerMap from "./centerMap.vue";
+import { townMapCoun } from "@/api/index.js";
+import { useAppStore } from "@/store/app.js"
+import { onMounted, ref } from "vue";
+
+const appStore = useAppStore();
+
+const list = ref(null)
+
+const initData = () => {
+  townMapCoun({
+    areaCode: appStore.address.areaCode,
+    streetCode: appStore.address.streetCode,
+  }).then((res) => {
+    list.value = res.data.townList;
+  })
+}
+
+onMounted(() => {
+  initData()
+})
 
 </script>
 
@@ -9,7 +29,7 @@ import centerMap from "./centerMap.vue";
     <div class="ball">
       <ball class="ball1"></ball>
     </div>
-    <centerMap class="c-map"></centerMap>
+    <centerMap class="c-map" :list="list"></centerMap>
   </div>
 </template>
 

src/view/index/components/centerMap.vue

@@ -11,9 +11,15 @@ import longma from "@/assets/json/longma.json";
 import naxi from "@/assets/json/naxi.json";
 import { useAppStore } from "@/store/app.js";
 
-
 const appStore = useAppStore();
 
+const props = defineProps({
+  list: {
+    type: Object,
+    default: () => []
+  }
+})
+
 const mapType = reactive({
   name: '',
   json: ''
@@ -30,36 +36,14 @@ const changeType = (name = 'luxian') => {
   if (name == 'naxi') mapType.json = naxi;
 }
 
-let dataValue = [
+let dataValue = []
-  {
-    name: '测试一', value: [105.38, 29.15],
-    store: 2065, team: 33,
-  },
-  {
-    name: '测试二', value: [105.62, 29.05],
-    store: 665, team: 895,
-  },
-  {
-    name: '测试三', value: [105.55, 29.10],
-    store: 66, team: 5422,
-  },
-  {
-    name: '测试四', value: [105.70, 29.23],
-    store: 9887, team: 1562,
-  },
-  {
-    name: '泸县', value: [105.372029, 29.141426],
-    store: 9999, team: 1000,
-  },
-
-]
 
 const customFormatter = (params) => {
   // console.log(params.data);
-  return `{img|${params.data.name}}\n{t|店铺${params.data.store}个, 团队${params.data.team}个}`
+  return `{img|${params.data.street_name}}\n{t|店铺${params.data.mer_count}个, 团队${params.data.service_group_count}个}`
 }
 
-const initDateValue = () => {
+const initDataValue = () => {
   dataValue.forEach(item => {
     item.label = {
       show: true, // 显示标签
@@ -279,13 +263,14 @@ const initMap = () => {
 }
 
 onMounted(() => {
-  changeType(appStore.map_info);
+  dataValue = props.list;
-  initDateValue();
+  changeType('xuyong');
+  initDataValue();
   initMap();
   nextTick(() => {
     mitt.on('map_info', e => {
       changeType(e.pinyin);
-      initDateValue();
+      initDataValue();
       initMap();
     })
   })