choose start end point
This commit is contained in:
@ -3,12 +3,13 @@
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<link rel="icon" type="image/svg+xml" href="/vite.svg" />
|
||||
<!-- <link rel="icon" type="image/svg+xml" href="/vite.svg" /> -->
|
||||
<link rel="shortcut icon" href="/favicon.ico" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Vite + Vue</title>
|
||||
<script type="text/javascript">
|
||||
window._AMapSecurityConfig = {
|
||||
securityJsCode: 'd9ded0c99c2545c9feb200da26b29fbf',
|
||||
securityJsCode: '2b65e7751cb17e4605f4c4cdccf885f6',
|
||||
}
|
||||
</script>
|
||||
<!--
|
||||
|
||||
BIN
public/favicon.ico
Normal file
BIN
public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 17 KiB |
@ -5,75 +5,205 @@
|
||||
direction="ltr"
|
||||
:close-on-click-modal="false"
|
||||
modal-class="control-drawer-modal"
|
||||
size="25%"
|
||||
:modal="false"
|
||||
:show-close="false"
|
||||
:with-header="false"
|
||||
>
|
||||
<ElForm :model="formData">
|
||||
<ElFormItem label="起点" prop="startName">
|
||||
<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 justify="center">
|
||||
<el-radio-group v-model="carType" size="small">
|
||||
<el-radio-button label="car">小车</el-radio-button>
|
||||
<el-radio-button label="truck">货车</el-radio-button>
|
||||
</el-radio-group>
|
||||
</el-row>
|
||||
<!-- :direction="direction"
|
||||
:before-close="handleClose" -->
|
||||
<!-- <span>Hi, there!</span> -->
|
||||
<el-row :gutter="10" justify="space-between">
|
||||
<el-col :span="2">
|
||||
<div
|
||||
:style="{
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}"
|
||||
>
|
||||
<el-icon color="#30a1f0"><Sort /></el-icon>
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="20">
|
||||
<el-form ref="routeFormRef" id="route-form" :model="formData">
|
||||
<el-form-item prop="startName">
|
||||
<el-popover
|
||||
:width="300"
|
||||
:visible="showStartSuggestion && !!formData.startName"
|
||||
title="搜索建议"
|
||||
>
|
||||
<div
|
||||
v-for="item in searchTips"
|
||||
:key="item.id"
|
||||
class="suggestion-item"
|
||||
@click="searchPoint(item.name)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<template #reference>
|
||||
<el-input
|
||||
v-model="formData.startName"
|
||||
size="small"
|
||||
@keydown.enter="searchPoint(formData.startName)"
|
||||
@input="getAutoComplete"
|
||||
@focus="
|
||||
nowSearch = 'start';
|
||||
// map.clearMap();
|
||||
showStartSuggestion = true;
|
||||
"
|
||||
@blur="
|
||||
showStartSuggestion = false;
|
||||
nowSearch = '';
|
||||
"
|
||||
:suffix-icon="
|
||||
formData.startLngLat.length ? `circle-check-filled` : null
|
||||
"
|
||||
>
|
||||
<template #prepend>起</template>
|
||||
</el-input>
|
||||
</template>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
<el-form-item prop="endName">
|
||||
<el-popover
|
||||
:width="300"
|
||||
:visible="showEndSuggestion && !!formData.endName"
|
||||
title="搜索建议"
|
||||
>
|
||||
<div
|
||||
v-for="item in searchTips"
|
||||
:key="item.id"
|
||||
class="suggestion-item"
|
||||
@click="searchPoint(item.name)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
<template #reference>
|
||||
<el-input
|
||||
v-model="formData.endName"
|
||||
size="small"
|
||||
@input="map.clearMap(), getAutoComplete"
|
||||
@keydown.enter="searchPoint(formData.endName)"
|
||||
@focus="
|
||||
nowSearch = 'end';
|
||||
// map.clearMap();
|
||||
showEndSuggestion = true;
|
||||
"
|
||||
@blur="
|
||||
showEndSuggestion = false;
|
||||
nowSearch = '';
|
||||
// searchTips = [];
|
||||
"
|
||||
:suffix-icon="
|
||||
formData.endLngLat.length ? `circle-check-filled` : null
|
||||
"
|
||||
>
|
||||
<template #prepend>终</template>
|
||||
</el-input>
|
||||
</template>
|
||||
</el-popover>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</el-col>
|
||||
<el-col :span="2">
|
||||
<div
|
||||
:style="{
|
||||
height: '100%',
|
||||
display: 'flex',
|
||||
alignItems: 'center',
|
||||
}"
|
||||
>
|
||||
<el-icon color="#30a1f0"><CirclePlusFilled /></el-icon>
|
||||
</div>
|
||||
</el-col>
|
||||
</el-row>
|
||||
|
||||
<el-row justify="space-between">
|
||||
<el-button link @click="clearRoute" size="small">清除路线</el-button>
|
||||
<el-button type="primary" @click="searchRoute" size="small"
|
||||
>查询</el-button
|
||||
>
|
||||
<!-- <ElButton type="success" @click="searchStartPoint">搜索</ElButton> -->
|
||||
</el-row>
|
||||
<el-tabs v-model="activeTabName" @tab-click="handleTabClick">
|
||||
<el-tab-pane label="费用最低" name="LEAST_FEE">
|
||||
<div v-for="item in routeList" :key="item.start_location.lng">
|
||||
{{ item.instruction }}
|
||||
</div>
|
||||
</el-tab-pane>
|
||||
<el-tab-pane label="时间最短" name="LEAST_TIME"
|
||||
><div v-for="item in routeList" :key="item.start_location.lng">
|
||||
{{ item.instruction }}
|
||||
</div></el-tab-pane
|
||||
>
|
||||
<el-tab-pane label="距离最短" name="LEAST_DISTANCE"
|
||||
><div v-for="item in routeList" :key="item.start_location.lng">
|
||||
{{ item.instruction }}
|
||||
</div></el-tab-pane
|
||||
>
|
||||
</el-tabs>
|
||||
</el-drawer>
|
||||
<!-- <el-button id="drawer-switch" type="primary" circle></el-button> -->
|
||||
<el-button
|
||||
id="drawer-switch"
|
||||
type="primary"
|
||||
circle
|
||||
:icon="drawer ? ArrowLeftBold : ArrowRightBold"
|
||||
@click="switchDrawer"
|
||||
></el-button>
|
||||
</template>
|
||||
<script setup>
|
||||
import AMapLoader from "@amap/amap-jsapi-loader";
|
||||
import { ArrowLeftBold, ArrowRightBold } from "@element-plus/icons-vue";
|
||||
import { ElMessage } from "element-plus";
|
||||
|
||||
import { onMounted, reactive, ref, shallowRef, toRefs } from "vue";
|
||||
const carType = ref("car"); // car: 小车, truck: 卡车
|
||||
const map = shallowRef(null);
|
||||
const driving = shallowRef(null);
|
||||
const truckDriving = shallowRef(null);
|
||||
const startMarker = shallowRef(null);
|
||||
const endMarker = shallowRef(null);
|
||||
const geocoder = shallowRef(null);
|
||||
const routeList = ref([]);
|
||||
const routePlugins = {
|
||||
car: driving,
|
||||
truck: truckDriving,
|
||||
};
|
||||
const placeSearch = shallowRef(null);
|
||||
const autoComplete = shallowRef(null);
|
||||
const drawer = ref(true);
|
||||
const searchStartTips = ref([]);
|
||||
const amapPlugins = reactive({
|
||||
driving: undefined,
|
||||
placeSearch: undefined,
|
||||
autoComplete: undefined,
|
||||
});
|
||||
|
||||
const { driving, placeSearch, autoComplete } = toRefs(amapPlugins);
|
||||
const routeFormRef = ref(null);
|
||||
const searchTips = ref([]);
|
||||
const nowSearch = ref("");
|
||||
const showStartSuggestion = ref(false);
|
||||
const showEndSuggestion = ref(false);
|
||||
const activeTabName = ref("LEAST_FEE");
|
||||
const routePolicy = ref("LEAST_FEE");
|
||||
const data = reactive({
|
||||
formData: {
|
||||
startLngLat: "",
|
||||
startLngLat: [],
|
||||
startName: "",
|
||||
endName: "",
|
||||
endLngLat: [],
|
||||
},
|
||||
});
|
||||
|
||||
const { formData } = toRefs(data);
|
||||
const initMap = () => {
|
||||
// map.value=
|
||||
};
|
||||
onMounted(() => {
|
||||
AMapLoader.load({
|
||||
key: "7891f1238368a895ff1967c79643102d", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
key: "377d7c36dd385e2a722f29d4c6e1ffbf", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
// key: "7891f1238368a895ff1967c79643102d", // 申请好的Web端开发者Key，首次调用 load 时必填
|
||||
version: "2.0", // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
|
||||
plugins: [
|
||||
"AMap.Driving",
|
||||
"AMap.Scale",
|
||||
"AMap.PlaceSearch",
|
||||
"AMap.AutoComplete",
|
||||
"AMap.Geocoder",
|
||||
], // 需要使用的的插件列表，如比例尺'AMap.Scale'等
|
||||
AMapUI: {
|
||||
// 是否加载 AMapUI，缺省不加载
|
||||
@ -86,66 +216,176 @@ onMounted(() => {
|
||||
},
|
||||
})
|
||||
.then((AMap) => {
|
||||
var map = new AMap.Map("map-container");
|
||||
console.log(AMap.DrivingPolicy);
|
||||
|
||||
// AMap.plugin("AMap.Driving", () => {
|
||||
map.value = new AMap.Map("map-container", {
|
||||
zoom: 16, //级别
|
||||
center: [117.290345, 31.797813],
|
||||
});
|
||||
|
||||
// 加载插件
|
||||
driving.value = new AMap.Driving({
|
||||
// 驾车路线规划策略，AMap.DrivingPolicy.LEAST_TIME是最快捷模式
|
||||
policy: AMap.DrivingPolicy.LEAST_TIME,
|
||||
map: map,
|
||||
map: map.value,
|
||||
});
|
||||
placeSearch.value = new AMap.PlaceSearch({
|
||||
map: map,
|
||||
});
|
||||
console.log(AMap);
|
||||
AMap.Event.addListener(placeSearch.value, "markerClick", function (e) {
|
||||
//添加事件
|
||||
console.log(e); //获取点标注位置
|
||||
formData.value.startName = e.data.name;
|
||||
formData.value.startLngLat = [e.data.location.lng, e.data.location.lat];
|
||||
map: map.value,
|
||||
});
|
||||
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());
|
||||
startMarker.value = new AMap.Marker();
|
||||
endMarker.value = new AMap.Marker();
|
||||
geocoder.value = new AMap.Geocoder();
|
||||
// city: "010", //城市设为北京，默认：“全国”
|
||||
// radius: 1000, //范围，默认：500
|
||||
AMap.Event.addListener(placeSearch.value, "markerClick", (e) => {
|
||||
//添加事件
|
||||
console.log(e); //获取点标注位置
|
||||
if (nowSearch.value === "start") {
|
||||
formData.value.startName = e.data.name;
|
||||
formData.value.startLngLat = [
|
||||
e.data.location.lng,
|
||||
e.data.location.lat,
|
||||
];
|
||||
} else if (nowSearch.value === "end") {
|
||||
formData.value.endName = e.data.name;
|
||||
formData.value.endLngLat = [e.data.location.lng, e.data.location.lat];
|
||||
}
|
||||
});
|
||||
map.value.on("click", (ev) => {
|
||||
if (nowSearch.value === "start") {
|
||||
startMarker.value.setPosition(
|
||||
new AMap.LngLat(ev.lnglat.lng, ev.lnglat.lat)
|
||||
);
|
||||
map.value.add(startMarker.value);
|
||||
regeoCode([ev.lnglat.lng, ev.lnglat.lat])
|
||||
.then((address) => {
|
||||
formData.value.startName = address;
|
||||
})
|
||||
.catch(() => {
|
||||
formData.value.startName = `${ev.lnglat.lng}, ${ev.lnglat.lat}`;
|
||||
});
|
||||
formData.value.startLngLat = [ev.lnglat.lng, ev.lnglat.lat];
|
||||
} else if (nowSearch.value === "end") {
|
||||
endMarker.value.setPosition(
|
||||
new AMap.LngLat(ev.lnglat.lng, ev.lnglat.lat)
|
||||
);
|
||||
map.value.add(endMarker.value);
|
||||
regeoCode([ev.lnglat.lng, ev.lnglat.lat])
|
||||
.then((address) => {
|
||||
formData.value.endName = address;
|
||||
})
|
||||
.catch(() => {
|
||||
// formData.value.startName = `${ev.lnglat.lng}, ${ev.lnglat.lat}`;
|
||||
formData.value.endName = `${ev.lnglat.lng}, ${ev.lnglat.lat}`;
|
||||
});
|
||||
formData.value.endLngLat = [ev.lnglat.lng, ev.lnglat.lat];
|
||||
}
|
||||
});
|
||||
map.value.addControl(new AMap.Scale());
|
||||
console.log(map.value.getAllOverlays());
|
||||
})
|
||||
.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 regeoCode = (lnglat) => {
|
||||
return new Promise((resolve, reject) => {
|
||||
geocoder.value.getAddress(lnglat, (status, result) => {
|
||||
if (status === "complete" && result.regeocode) {
|
||||
const address = result.regeocode.formattedAddress;
|
||||
resolve(address);
|
||||
} else {
|
||||
reject("根据经纬度查询地址失败");
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
const searchPoint = () => {
|
||||
placeSearch.value.search("大蜀山");
|
||||
const addMark = (data) => {
|
||||
const marker = new AMap.Marker({
|
||||
position: new AMap.LngLat(data.lng, data.lat), // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
|
||||
// title: "北京",
|
||||
// content: "<b>起</b>",
|
||||
});
|
||||
map.value.add(marker);
|
||||
};
|
||||
|
||||
const handleTabClick = (tab, ev) => {
|
||||
activeTabName.value = tab.paneName;
|
||||
if (formData.value.startLngLat.length && formData.value.endLngLat.length) {
|
||||
searchRoute();
|
||||
} else {
|
||||
ElMessage.error("err");
|
||||
}
|
||||
};
|
||||
|
||||
// 清除路线，reset form
|
||||
const clearRoute = () => {
|
||||
if (routeFormRef.value) {
|
||||
routeFormRef.value.resetFields();
|
||||
}
|
||||
};
|
||||
|
||||
// 搜索路线
|
||||
const searchRoute = () => {
|
||||
if (!driving.value) return;
|
||||
return new Promise((resolve, reject) => {
|
||||
map.value.clearMap();
|
||||
driving.value.opt.policy = AMap.DrivingPolicy[activeTabName.value];
|
||||
const startLngLat = formData.value.startLngLat;
|
||||
const endLngLat = formData.value.endLngLat;
|
||||
driving.value.search(startLngLat, endLngLat, (status, result) => {
|
||||
// 未出错时，result即是对应的路线规划方案
|
||||
if (status === "complete") {
|
||||
routeList.value = result.routes[0].steps;
|
||||
console.log(result.routes);
|
||||
resolve(result);
|
||||
} else {
|
||||
reject("获取路线失败");
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
const switchDrawer = () => {
|
||||
drawer.value = !drawer.value;
|
||||
if (drawer.value) {
|
||||
document.querySelector("#drawer-switch").style.left = "25%";
|
||||
document.querySelector("#drawer-switch").style.transform =
|
||||
"translate(-50%, -50%)";
|
||||
} else {
|
||||
document.querySelector("#drawer-switch").style.left = "0";
|
||||
document.querySelector("#drawer-switch").style.transform =
|
||||
"translate(0, -50%)";
|
||||
}
|
||||
};
|
||||
const searchPoint = (val /** 搜索建议选项 */) => {
|
||||
if (val) {
|
||||
if (nowSearch.value === "start") {
|
||||
formData.value.startName = val;
|
||||
} else if (nowSearch.value === "end") {
|
||||
formData.value.endName = val;
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
} else {
|
||||
return;
|
||||
}
|
||||
placeSearch.value.search(val, (status, result) => {
|
||||
console.log(status, result);
|
||||
});
|
||||
};
|
||||
|
||||
// 获取搜索建议
|
||||
const getAutoComplete = (val) => {
|
||||
console.log("changed");
|
||||
if (!autoComplete.value) return;
|
||||
autoComplete.value.search(val, (status, result) => {
|
||||
console.log(status, result);
|
||||
if (status === "complete") {
|
||||
searchStartTips.value = result.tips;
|
||||
searchTips.value = result.tips;
|
||||
}
|
||||
});
|
||||
};
|
||||
@ -155,18 +395,41 @@ const setCenter = (val) => {
|
||||
console.log(status, result);
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
initMap();
|
||||
});
|
||||
</script>
|
||||
<style scoped lang="scss">
|
||||
#map-container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
#route-form {
|
||||
margin-top: 20px;
|
||||
}
|
||||
#drawer-switch {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 100px;
|
||||
left: 25%;
|
||||
z-index: 99999;
|
||||
transform: translateY(-50%);
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
.suggestion-item {
|
||||
user-select: none;
|
||||
cursor: pointer;
|
||||
padding: 0 32px 0 20px;
|
||||
font-size: 14px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
color: #606266;
|
||||
height: 34px;
|
||||
line-height: 34px;
|
||||
box-sizing: border-box;
|
||||
text-overflow: ellipsis;
|
||||
&:hover {
|
||||
background-color: #f5f7fa;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -175,6 +438,9 @@ const setCenter = (val) => {
|
||||
pointer-events: none;
|
||||
.el-drawer {
|
||||
pointer-events: initial;
|
||||
.el-input__suffix {
|
||||
color: #67c23a;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
File diff suppressed because it is too large
Load Diff
Reference in New Issue
Block a user