renkang/xj-screen
7
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update：1.自定义事件

Browse Source
This commit is contained in:
zk
2023-11-27 14:17:57 +08:00
parent 6a2d442c79
commit 462dd54ce1
5 changed files with 143 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+2
View File
@@ -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 {
src/assets/ts/directive/clickOutside.ts
+21
View File
@@ -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);
},
});
}
src/assets/ts/directive/index.ts
+5
View File
@@ -0,0 +1,5 @@
import { clickOutside } from './clickOutside.ts';
export default function directiveMethods(app) {
clickOutside(app);
}
src/components/chinaMap/chinaMap.vue
+105 -30
View File
@@ -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;
src/main.ts
+10 -5
View File
@@ -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');