From 462dd54ce16461efffd161cf1ae551aac0672335 Mon Sep 17 00:00:00 2001
From: zk <k12019@aliyun.com>
Date: Mon, 27 Nov 2023 14:17:57 +0800
Subject: [PATCH] =?UTF-8?q?update=EF=BC=9A1.=E8=87=AA=E5=AE=9A=E4=B9=89?=
 =?UTF-8?q?=E4=BA=8B=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 index.html                              |   2 +
 src/assets/ts/directive/clickOutside.ts |  21 ++++
 src/assets/ts/directive/index.ts        |   5 +
 src/components/chinaMap/chinaMap.vue    | 135 ++++++++++++++++++------
 src/main.ts                             |  15 ++-
 5 files changed, 143 insertions(+), 35 deletions(-)
 create mode 100644 src/assets/ts/directive/clickOutside.ts
 create mode 100644 src/assets/ts/directive/index.ts

diff --git a/index.html b/index.html
index 8896a50..2dfba4c 100644
--- a/index.html
+++ b/index.html
@@ -12,6 +12,8 @@
             securityJsCode: "1b3b86585c863d22db1e7f7636a9e495",
         }
     </script>
+    <script type="text/javascript"
+            src="https://webapi.amap.com/maps?v=2.0&key=4bbcb216b889f2d612cbed05ae6979c8&plugin=AMap.Driving"></script>
 </head>
 <style>
     html, body, #app {
diff --git a/src/assets/ts/directive/clickOutside.ts b/src/assets/ts/directive/clickOutside.ts
new file mode 100644
index 0000000..fc17151
--- /dev/null
+++ b/src/assets/ts/directive/clickOutside.ts
@@ -0,0 +1,21 @@
+// 点击元素范围外
+export function clickOutside(app) {
+    app.directive('click-outside', {
+        mounted(el, binding) {
+            el.handler = function (e) {
+                // 点击范围在绑定的元素范围内，不执行指令操作
+                if (el.contains(e.target)) return;
+                if (typeof binding.value === 'function') {
+                    // 绑定给指令的如果是一个函数，那么将回调并指定this
+                    binding.value.apply(this, arguments);
+                }
+            };
+            // 监听全局的点击事件
+            document.addEventListener('click', el.handler);
+        },
+        // 解除事件绑定
+        beforeUnmount(el) {
+            document.removeEventListener('click', el.handler);
+        },
+    });
+}
\ No newline at end of file
diff --git a/src/assets/ts/directive/index.ts b/src/assets/ts/directive/index.ts
new file mode 100644
index 0000000..ee92ba0
--- /dev/null
+++ b/src/assets/ts/directive/index.ts
@@ -0,0 +1,5 @@
+import { clickOutside } from './clickOutside.ts';
+
+export default function directiveMethods(app) {
+    clickOutside(app);
+}
\ No newline at end of file
diff --git a/src/components/chinaMap/chinaMap.vue b/src/components/chinaMap/chinaMap.vue
index e6aead1..f2802fd 100644
--- a/src/components/chinaMap/chinaMap.vue
+++ b/src/components/chinaMap/chinaMap.vue
@@ -9,44 +9,25 @@
             <div v-show="currentIndex == list.length - 1" class="route-navigation">
                 <a-form :model="formState" layout="inline">
                     <a-form-item class="form-item-self" label="起点">
-                        <a-input v-model:value="formState.user"></a-input>
+                        <a-input v-model:value="formState.start"></a-input>
                     </a-form-item>
                     <a-form-item class="form-item-self" label="终点">
-                        <a-input v-model:value="formState.password"></a-input>
+                        <a-input v-model:value="formState.end"></a-input>
                     </a-form-item>
                     <a-form-item>
                         <a-button class="reset-btn">清空</a-button>
-                        <a-button class="search-btn">路线规划</a-button>
+                        <a-button class="search-btn" @click="searchRoute">路线规划</a-button>
                     </a-form-item>
                 </a-form>
-                <div class="line-container">
+                <div class="line-container" v-show="showRoutePanel" v-click-outside="outClick">
                     <div class="has-data">
-                        <div class="line-title"> 全程2小时37分钟(172.15公里)</div>
+                        <div class="line-title"> {{ panelTitle }}</div>
                         <div class="line-content">
                             <div class="start">起点</div>
                             <div class="line-body">
                                 <div class="line"></div>
                                 <div class="line-desc">
-                                    <p>向东行驶124米左转</p>
-                                    <p>向西北行驶92米左转</p>
-                                    <p>向西南行驶45米右转</p>
-                                    <p>向西北行驶50米右转</p>
-                                    <p>沿燕庆街向东北行驶157米左转</p>
-                                    <p>向西北行驶47米左转</p>
-                                    <p>向西行驶97米右转进入主路</p>
-                                    <p>沿新华东路向西行驶1.1千米右转进入主路</p>
-                                    <p>沿友爱街向北行驶5.9千米右转</p>
-                                    <p>沿417乡道向东北行驶49米右转</p>
-                                    <p>沿417乡道向东行驶1.1千米左转</p>
-                                    <p>沿417乡道向北行驶8.3千米左转</p>
-                                    <p>向西北行驶47米左转</p>
-                                    <p>向西行驶97米右转进入主路</p>
-                                    <p>沿新华东路向西行驶1.1千米右转进入主路</p>
-                                    <p>沿友爱街向北行驶5.9千米右转</p>
-                                    <p>沿417乡道向东北行驶49米右转</p>
-                                    <p>沿417乡道向东行驶1.1千米左转</p>
-                                    <p>沿417乡道向北行驶8.3千米左转</p>
-                                    <p>向西北行驶4.9千米到达目的地</p>
+                                    <p v-for="(item, i) in routeList" :key="i">{{ item }}</p>
                                 </div>
                             </div>
                             <div class="end">终点</div>
@@ -56,7 +37,8 @@
                 </div>
             </div>
             <div class="china-map-container"></div>
-
+            <div v-show="false" id="container"></div>
+            <div v-show="false" id="panel"></div>
             <div class="map-legend">
                 <div v-for="(item, i) in legendList" :key="i" class="legend-item">
                     <div><img :src="item.img" alt="" class="legend-img" /> {{ item.text }}</div>
@@ -80,12 +62,13 @@
     import * as echarts from 'echarts';
     import mapJson from '/@/components/chinaMap/json/c';
     import { tabList, mapIcons, legendList } from './chinaHooks.ts';
+    import { message } from 'ant-design-vue';
 
     const bgImg = new URL('/@/assets/images/china-textur.jpg', import.meta.url).href;
 
     const formState = ref({
-        user: '',
-        password: '',
+        start: '西安北站',
+        end: '',
     });
     const list = ref(tabList);
     const currentIndex = ref(0);
@@ -220,7 +203,6 @@
                 ...icons.value,
             ],
         };
-        // myChart.value.clear()
         myChart.setOption(option);
         myChart.on('click', function (res) {
             if ('scatter' === res.componentSubType) {
@@ -234,6 +216,99 @@
             myChart.resize();
         });
     }
+
+    const routeList = ref([]);
+    const showRoutePanel = ref(false);
+    const panelTitle = ref();
+
+    function outClick() {
+        console.log('点击外面');
+        showRoutePanel.value = false;
+    }
+
+    function searchRoute() {
+        showRoutePanel.value = false;
+        panelTitle.value = '';
+        if (!formState.value.start) {
+            return message.warn('请输入起点');
+        }
+        if (!formState.value.end) {
+            return message.warn('请输入终点');
+        }
+        //基本地图加载
+        let map = new AMap.Map('container', {
+            resizeEnable: true,
+            center: [116.397428, 39.90923], //地图中心点
+            zoom: 13, //地图显示的缩放级别
+        });
+        //构造路线导航类
+        let driving = new AMap.Driving({
+            map: map,
+            panel: 'panel',
+        });
+        // 根据起终点名称规划驾车导航路线
+        driving.search([{ keyword: formState.value.start }, { keyword: formState.value.end }], function (status, result) {
+            // result 即是对应的驾车导航信息，相关数据结构文档请参考  https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult
+            if (status === 'complete') {
+                console.log('绘制驾车路线完成');
+            } else {
+                console.log('获取驾车数据失败：' + result);
+            }
+        });
+        AMap.Event.addListener(driving, 'complete', (res) => {
+            // console.log(JSON.stringify(res));
+            const data = JSON.parse(JSON.stringify(res));
+            console.log('data', data);
+            if (data.info == 'OK') {
+                const { routes } = data;
+                const { distance, time } = routes[0];
+
+                function convertSeconds(seconds) {
+                    let hours = Math.floor(seconds / 3600);
+                    let minutes = Math.floor((seconds % 3600) / 60);
+                    let remainingSeconds = seconds % 60;
+
+                    return {
+                        hours: hours,
+                        minutes: minutes,
+                        seconds: remainingSeconds,
+                    };
+                }
+
+                function convertMetersToKilometers(meters) {
+                    var kilometers = meters / 1000;
+                    return Math.round(kilometers * 100) / 100;
+                }
+
+                let str = '全程';
+                const { hours, minutes } = convertSeconds(time);
+
+                if (hours) {
+                    str += hours + '小时';
+                }
+                if (minutes) {
+                    str += minutes + '分钟';
+                }
+                let d = convertMetersToKilometers(distance);
+                let dr = d >= 1 ? d + '公里' : d * 100 + '米';
+                str += `(${dr})`;
+                console.log('str', str);
+                panelTitle.value = str;
+                let arr = [];
+                console.log('routes', routes);
+                arr.push(data.originName);
+                routes[0].steps.map((item) => {
+                    arr.push(item.instruction);
+                });
+                arr.push(data.destinationName);
+                showRoutePanel.value = true;
+                routeList.value = arr;
+                console.log(arr);
+            }
+        });
+    }
+
+    console.log();
 </script>
 <style lang="less" scoped>
     .center-map {
@@ -266,7 +341,7 @@
                 background-size: 100%;
                 cursor: pointer;
                 transition: all 0.3s;
-                //background-position: -5px -10px;
+
                 &.active {
                     color: #fff;
                     background: url('/@/assets/img/tab-active.png') no-repeat;
diff --git a/src/main.ts b/src/main.ts
index 625f7b3..4b2f617 100644
--- a/src/main.ts
+++ b/src/main.ts
@@ -1,9 +1,14 @@
-import {createApp} from 'vue'
+import { createApp } from 'vue';
 import App from './App.vue';
 import './assets/less/index.less';
-import('ant-design-vue/dist/antd.less');
-import registerGlobComp from './assets/ts/antd.ts'
 
-const app = createApp(App)
+import('ant-design-vue/dist/antd.less');
+import registerGlobComp from './assets/ts/antd.ts';
+import directiveMethods from './assets/ts/directive';
+
+const app = createApp(App);
+// 注册自定义事件
+directiveMethods(app);
+// 注册组件
 registerGlobComp(app);
-app.mount('#app')
+app.mount('#app');