init
This commit is contained in:
10
src/App.vue
Normal file
10
src/App.vue
Normal file
@ -0,0 +1,10 @@
|
||||
<script setup>
|
||||
// import HelloWorld from "./components/HelloWorld.vue";
|
||||
import Map from "./components/Map.vue";
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Map />
|
||||
</template>
|
||||
|
||||
<style scoped></style>
|
||||
1
src/assets/vue.svg
Normal file
1
src/assets/vue.svg
Normal file
@ -0,0 +1 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="iconify iconify--logos" width="37.07" height="36" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 198"><path fill="#41B883" d="M204.8 0H256L128 220.8L0 0h97.92L128 51.2L157.44 0h47.36Z"></path><path fill="#41B883" d="m0 0l128 220.8L256 0h-51.2L128 132.48L50.56 0H0Z"></path><path fill="#35495E" d="M50.56 0L128 133.12L204.8 0h-47.36L128 51.2L97.92 0H50.56Z"></path></svg>
|
||||
|
After Width: | Height: | Size: 496 B |
40
src/components/HelloWorld.vue
Normal file
40
src/components/HelloWorld.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
|
||||
defineProps({
|
||||
msg: String,
|
||||
})
|
||||
|
||||
const count = ref(0)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<h1>{{ msg }}</h1>
|
||||
|
||||
<div class="card">
|
||||
<button type="button" @click="count++">count is {{ count }}</button>
|
||||
<p>
|
||||
Edit
|
||||
<code>components/HelloWorld.vue</code> to test HMR
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<p>
|
||||
Check out
|
||||
<a href="https://vuejs.org/guide/quick-start.html#local" target="_blank"
|
||||
>create-vue</a
|
||||
>, the official Vue + Vite starter
|
||||
</p>
|
||||
<p>
|
||||
Install
|
||||
<a href="https://github.com/johnsoncodehk/volar" target="_blank">Volar</a>
|
||||
in your IDE for a better DX
|
||||
</p>
|
||||
<p class="read-the-docs">Click on the Vite and Vue logos to learn more</p>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.read-the-docs {
|
||||
color: #888;
|
||||
}
|
||||
</style>
|
||||
170
src/components/Map.vue
Normal file
170
src/components/Map.vue
Normal file
@ -0,0 +1,170 @@
|
||||
<template>
|
||||
<div id="map-container"></div>
|
||||
<el-drawer
|
||||
v-model="drawer"
|
||||
direction="ltr"
|
||||
:close-on-click-modal="false"
|
||||
modal-class="control-drawer-modal"
|
||||
:modal="false"
|
||||
>
|
||||
<ElForm :model="formData">
|
||||
<ElFormItem label="起点" prop="startName">
|
||||
<!-- <ElInput /> -->
|
||||
<ElSelect
|
||||
v-model="formData.startName"
|
||||
clearable
|
||||
filterable
|
||||
remote
|
||||
placeholder="请选择起点"
|
||||
remote-show-suffix
|
||||
:remote-method="getAutoComplete"
|
||||
@change="setCenter"
|
||||
>
|
||||
<ElOption
|
||||
v-for="item in searchStartTips"
|
||||
:key="item.id"
|
||||
:label="item.name"
|
||||
:value="item.name"
|
||||
/>
|
||||
</ElSelect>
|
||||
</ElFormItem>
|
||||
<ElFormItem label="终点">
|
||||
<ElInput />
|
||||
</ElFormItem>
|
||||
</ElForm>
|
||||
<el-row>
|
||||
<ElButton type="primary" @click="searchRoute">查询</ElButton>
|
||||
<ElButton type="success" @click="searchPoint">搜索</ElButton>
|
||||
</el-row>
|
||||
<!-- :direction="direction"
|
||||
:before-close="handleClose" -->
|
||||
<!-- <span>Hi, there!</span> -->
|
||||
</el-drawer>
|
||||
<!-- <el-button id="drawer-switch" type="primary" circle></el-button> -->
|
||||
</template>
|
||||
<script setup>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import { onMounted, reactive, ref, toRefs } from "vue";
|
||||
|
||||
const drawer = ref(true);
|
||||
const searchStartTips = ref([]);
|
||||
const amapPlugins = reactive({
|
||||
driving: undefined,
|
||||
placeSearch: undefined,
|
||||
autoComplete: undefined,
|
||||
});
|
||||
|
||||
const { driving, placeSearch, autoComplete } = toRefs(amapPlugins);
|
||||
const data = reactive({
|
||||
formData: {
|
||||
startLngLat: "",
|
||||
startName: "",
|
||||
},
|
||||
});
|
||||
const { formData } = toRefs(data);
|
||||
onMounted(() => {
|
||||
AMapLoader.load({
|
||||
key: "7891f1238368a895ff1967c79643102d", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: [
|
||||
"AMap.Driving",
|
||||
"AMap.Scale",
|
||||
"AMap.PlaceSearch",
|
||||
"AMap.AutoComplete",
|
||||
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
AMapUI: {
|
||||
// 是否加载 AMapUI，缺省不加载
|
||||
version: "1.1", // AMapUI 版本
|
||||
plugins: ["overlay/SimpleMarker"], // 需要加载的 AMapUI ui插件
|
||||
},
|
||||
Loca: {
|
||||
// 是否加载 Loca， 缺省不加载
|
||||
version: "2.0", // Loca 版本
|
||||
},
|
||||
})
|
||||
.then((AMap) => {
|
||||
var map = new AMap.Map("map-container");
|
||||
|
||||
// AMap.plugin("AMap.Driving", () => {
|
||||
driving.value = new AMap.Driving({
|
||||
// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
|
||||
policy: AMap.DrivingPolicy.LEAST_TIME,
|
||||
map: map,
|
||||
});
|
||||
placeSearch.value = new AMap.PlaceSearch({
|
||||
map: map,
|
||||
});
|
||||
autoComplete.value = new AMap.AutoComplete({});
|
||||
// autoComplete.value.
|
||||
var clickHandler = function (e) {
|
||||
console.log(
|
||||
"您在[ " +
|
||||
e.lnglat.getLng() +
|
||||
"," +
|
||||
e.lnglat.getLat() +
|
||||
" ]的位置点击了地图！"
|
||||
);
|
||||
};
|
||||
|
||||
// 绑定事件
|
||||
map.on("click", clickHandler);
|
||||
// 解绑事件
|
||||
// map.off("click", clickHandler);
|
||||
// });
|
||||
map.addControl(new AMap.Scale());
|
||||
})
|
||||
.catch((e) => {
|
||||
console.error(e); //加载错误提示
|
||||
});
|
||||
});
|
||||
const searchRoute = () => {
|
||||
if (!driving.value) return;
|
||||
const startLngLat = [117.122166, 31.821747];
|
||||
const endLngLat = [117.136588, 31.844244];
|
||||
|
||||
driving.value.search(startLngLat, endLngLat, (status, result) => {
|
||||
// 未出错时，result即是对应的路线规划方案
|
||||
console.log(JSON.stringify(result));
|
||||
});
|
||||
};
|
||||
const searchPoint = () => {
|
||||
placeSearch.value.search("大蜀山");
|
||||
};
|
||||
const getAutoComplete = (val) => {
|
||||
if (!autoComplete.value) return;
|
||||
autoComplete.value.search(val, (status, result) => {
|
||||
console.log(status, result);
|
||||
if (status === "complete") {
|
||||
searchStartTips.value = result.tips;
|
||||
}
|
||||
});
|
||||
};
|
||||
const setCenter = (val) => {
|
||||
if (!val) return;
|
||||
placeSearch.value.search(val, (status, result) => {
|
||||
console.log(status, result);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
#map-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
#drawer-switch {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 100px;
|
||||
z-index: 99999;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
</style>
|
||||
|
||||
<style lang="scss">
|
||||
.control-drawer-modal {
|
||||
pointer-events: none;
|
||||
.el-drawer {
|
||||
pointer-events: initial;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
1260
src/components/route_cep_wanshui.json
Normal file
1260
src/components/route_cep_wanshui.json
Normal file
File diff suppressed because it is too large
Load Diff
13
src/main.js
Normal file
13
src/main.js
Normal file
@ -0,0 +1,13 @@
|
||||
import { createApp } from "vue";
|
||||
import "./style.css";
|
||||
import "modern-normalize";
|
||||
import ElementPlus from "element-plus";
|
||||
import * as ElementPlusIconsVue from "@element-plus/icons-vue";
|
||||
import "element-plus/dist/index.css";
|
||||
import App from "./App.vue";
|
||||
const app = createApp(App);
|
||||
app.use(ElementPlus);
|
||||
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
|
||||
app.component(key, component);
|
||||
}
|
||||
app.mount("#app");
|
||||
90
src/style.css
Normal file
90
src/style.css
Normal file
@ -0,0 +1,90 @@
|
||||
/* :root {
|
||||
font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
|
||||
font-size: 16px;
|
||||
line-height: 24px;
|
||||
font-weight: 400;
|
||||
|
||||
color-scheme: light dark;
|
||||
color: rgba(255, 255, 255, 0.87);
|
||||
background-color: #242424;
|
||||
|
||||
font-synthesis: none;
|
||||
text-rendering: optimizeLegibility;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-text-size-adjust: 100%;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
color: #646cff;
|
||||
text-decoration: inherit;
|
||||
}
|
||||
a:hover {
|
||||
color: #535bf2;
|
||||
}
|
||||
|
||||
body {
|
||||
margin: 0;
|
||||
display: flex;
|
||||
place-items: center;
|
||||
min-width: 320px;
|
||||
min-height: 100vh;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 3.2em;
|
||||
line-height: 1.1;
|
||||
}
|
||||
|
||||
button {
|
||||
border-radius: 8px;
|
||||
border: 1px solid transparent;
|
||||
padding: 0.6em 1.2em;
|
||||
font-size: 1em;
|
||||
font-weight: 500;
|
||||
font-family: inherit;
|
||||
background-color: #1a1a1a;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.25s;
|
||||
}
|
||||
button:hover {
|
||||
border-color: #646cff;
|
||||
}
|
||||
button:focus,
|
||||
button:focus-visible {
|
||||
outline: 4px auto -webkit-focus-ring-color;
|
||||
}
|
||||
|
||||
.card {
|
||||
padding: 2em;
|
||||
}
|
||||
|
||||
#app {
|
||||
max-width: 1280px;
|
||||
margin: 0 auto;
|
||||
padding: 2rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
color: #213547;
|
||||
background-color: #ffffff;
|
||||
}
|
||||
a:hover {
|
||||
color: #747bff;
|
||||
}
|
||||
button {
|
||||
background-color: #f9f9f9;
|
||||
}
|
||||
} */
|
||||
Reference in New Issue
Block a user