map
This commit is contained in:
parent
4d0e340fee
commit
95a14f596c
@ -2,17 +2,25 @@
|
||||
<!-- 带有搜索地点的地图 -->
|
||||
<div>
|
||||
<el-form-item :label="title">
|
||||
<el-input
|
||||
v-model="form.address"
|
||||
:placeholder="`请输入${title}`"
|
||||
class="input-with-select"
|
||||
<el-select
|
||||
v-model="searchLocation"
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
clearable
|
||||
placeholder="请输入地址信息"
|
||||
:remote-method="remoteMethod"
|
||||
@change="selectChnange"
|
||||
style="width: 300px"
|
||||
@keyup.enter="debouncedSearch(form.address)"
|
||||
>
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="debouncedSearch(form.address)" />
|
||||
</template>
|
||||
</el-input>
|
||||
<el-option
|
||||
v-for="item in locationOptions"
|
||||
:key="item.id"
|
||||
:label="item.title + '      ' + item.province + ' - ' + item.city"
|
||||
:value="item.province + item.city + item.title"
|
||||
/>
|
||||
<!-- :value="item.ad_info.province+item.ad_info.city+item.title" /> -->
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<tlbs-map
|
||||
ref="map"
|
||||
@ -26,6 +34,15 @@
|
||||
>
|
||||
<tlbs-multi-marker :geometries="geometries" :styles="styles" :options="options" />
|
||||
</tlbs-map>
|
||||
<el-form-item label="详细地址" prop="address" style="margin-top: 15px">
|
||||
<el-input v-model="form.address" placeholder="输入地理位置或点击度图上的地点" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="经度" prop="longitude">
|
||||
<el-input v-model="form.longitude" placeholder="输入地理位置或点击度图上的地点" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="纬度" prop="latitude">
|
||||
<el-input v-model="form.latitude" placeholder="输入地理位置或点击度图上的地点" disabled />
|
||||
</el-form-item>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -73,7 +90,39 @@ const form = ref(
|
||||
regionCode: ''
|
||||
}
|
||||
);
|
||||
const searchLocation = ref(props.datas.address||''); // 搜索地点
|
||||
|
||||
const locationOptions = ref([]); //腾讯地图返回的搜索地址列表
|
||||
watch(() => props.modelValue);
|
||||
// 地理位置 输入实时搜索
|
||||
const remoteMethod = (query: string) => {
|
||||
if (query !== '') {
|
||||
// 调用腾讯地图API进行搜索，并展示在地图上
|
||||
// geocoder(query).then((result) => {
|
||||
// console.log(result);
|
||||
// });
|
||||
console.log(query);
|
||||
// jsonp(`https://apis.map.qq.com/ws/place/v1/search?key=${'6XFBZ-SAVLT-JGIX2-VOLMK-6S2H3-XUBGO'}&keyword=${encodeURI(query)}&boundary=nearby(20.018883,110.348801,1000)&output=jsonp`, {}).then((res) => {
|
||||
jsonp(
|
||||
`https://apis.map.qq.com/ws/place/v1/suggestion?key=${'6XFBZ-SAVLT-JGIX2-VOLMK-6S2H3-XUBGO'}&keyword=${encodeURI(query)}®ion=三亚市®ion_fix=0&output=jsonp`,
|
||||
{}
|
||||
).then((res) => {
|
||||
// if (res.region.title!=='海南省') {
|
||||
// proxy?.$modal.msgError('仅支持海南省地理位置');
|
||||
// return
|
||||
// }
|
||||
if (res.status == 0) {
|
||||
locationOptions.value = res.data;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
// 选择地理位置 下拉框值变化
|
||||
const selectChnange = (val: string) => {
|
||||
if (val) {
|
||||
debouncedSearch(searchLocation.value);
|
||||
}
|
||||
};
|
||||
// 点击地点，获取经纬度及地址信息
|
||||
const onClick = (e: any) => {
|
||||
jsonp(
|
||||
@ -82,15 +131,15 @@ const onClick = (e: any) => {
|
||||
).then((data) => {
|
||||
if (data.status == 0) {
|
||||
if (form.value) {
|
||||
// form.value.address =
|
||||
// data.result.address_component.province +
|
||||
// data.result.address_component.city +
|
||||
// data.result.address_component.district +
|
||||
// data.result.address_component.street +
|
||||
// data.result.address_component.street_number;
|
||||
form.value.address =
|
||||
data.result.address_component.province +
|
||||
data.result.address_component.city +
|
||||
data.result.address_component.district +
|
||||
data.result.address_component.street +
|
||||
data.result.address_component.street_number +data.result.title;
|
||||
form.value.latitude = data.result.location.lat;
|
||||
form.value.longitude = data.result.location.lng;
|
||||
form.value.address = data.result.formatted_addresses.recommend;
|
||||
// form.value.address = data.result.formatted_addresses.recommend;
|
||||
// form.value.city = data.result.address_component.city;
|
||||
// form.value.region = data.result.ad_info.adcode; //行政区划编码
|
||||
form.value.regionCode = data.result.ad_info.adcode; //行政区划编码
|
||||
@ -119,18 +168,18 @@ const performSearch = async (text) => {
|
||||
jsonp(`https://apis.map.qq.com/ws/geocoder/v1/?address=${text}&key=${'6XFBZ-SAVLT-JGIX2-VOLMK-6S2H3-XUBGO'}&output=jsonp`, {}).then((data) => {
|
||||
console.log(data);
|
||||
if (data.status == 0) {
|
||||
// form.value.address =
|
||||
// data.result.address_components.province +
|
||||
// data.result.address_components.city +
|
||||
// data.result.address_components.district +
|
||||
// data.result.address_components.street +
|
||||
// data.result.address_components.street_number;
|
||||
form.value.address =
|
||||
data.result.address_components.province +
|
||||
data.result.address_components.city +
|
||||
data.result.address_components.district +
|
||||
data.result.address_components.street +
|
||||
data.result.address_components.street_number + data.result.title;
|
||||
form.value.latitude = data.result.location.lat;
|
||||
form.value.longitude = data.result.location.lng;
|
||||
// form.value.region = data.result.ad_info.adcode; //行政区划编码
|
||||
// form.value.regionCode = data.result.ad_info.adcode; //行政区划编码
|
||||
|
||||
form.value.address = text;
|
||||
// form.value.address = text;
|
||||
// form.value.city = data.result.address_components.city;
|
||||
center.value = { lat: data.result.location.lat, lng: data.result.location.lng };
|
||||
geometries.value = [{ styleId: 'marker', position: { lat: data.result.location.lat, lng: data.result.location.lng } }];
|
||||
@ -147,16 +196,15 @@ const performSearch = async (text) => {
|
||||
const debouncedSearch = debounce(performSearch, 300); // 创建防抖后的搜索函数，延迟设为300毫秒
|
||||
|
||||
const map = ref(null);
|
||||
const center = ref({ lat: form.value.latitude || 39.145902, lng: form.value.longitude || 117.17546 });
|
||||
const zoom = ref(20);
|
||||
const center = ref({ lat: form.value.latitude || 20.018883, lng: form.value.longitude || 110.348801 });
|
||||
const zoom = ref(147);
|
||||
const control = reactive({
|
||||
scale: {},
|
||||
zoom: {
|
||||
position: 'topLeft'
|
||||
}
|
||||
});
|
||||
const searchLocation = ref(''); // 搜索地点
|
||||
const geometries = ref([{ styleId: 'marker', position: { lat: form.value.latitude || 39.145902, lng: form.value.longitude || 117.17546 } }]);
|
||||
const geometries = ref([{ styleId: 'marker', position: { lat: form.value.latitude || 20.018883, lng: form.value.longitude || 110.348801 } }]);
|
||||
const styles = reactive({
|
||||
marker: {
|
||||
width: 20,
|
||||
|
||||
@ -24,7 +24,7 @@
|
||||
</transition>
|
||||
|
||||
<el-card shadow="never">
|
||||
<el-table v-loading="loading" :data="hotelList">
|
||||
<el-table v-loading="loading" :data="hotelList" border>
|
||||
<el-table-column fixed label="序号" align="center" width="80">
|
||||
<template #default="scope">
|
||||
<span>{{ (queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1 }}</span>
|
||||
@ -87,17 +87,24 @@
|
||||
<el-col :span="24">
|
||||
<el-form-item label="地理位置" prop="address">
|
||||
<!-- <el-input v-model="searchLocation" type="text" placeholder="请输入地址信息" clearable /> -->
|
||||
<el-input
|
||||
v-model="form.address"
|
||||
<el-select
|
||||
v-model="searchLocation"
|
||||
filterable
|
||||
remote
|
||||
reserve-keyword
|
||||
clearable
|
||||
placeholder="请输入地址信息"
|
||||
class="input-with-select"
|
||||
style="width: 300px"
|
||||
@keyup.enter="debouncedSearch(form.address)"
|
||||
:remote-method="remoteMethod"
|
||||
@change="selectChnange"
|
||||
>
|
||||
<template #append>
|
||||
<el-button :icon="Search" @click="debouncedSearch(form.address)" />
|
||||
</template>
|
||||
</el-input>
|
||||
<el-option
|
||||
v-for="item in locationOptions"
|
||||
:key="item.id"
|
||||
:label="item.title + '      ' + item.province + ' - ' + item.city + '-' + item.district"
|
||||
:value="item.province + item.city + item.title"
|
||||
/>
|
||||
<!-- :value="item.ad_info.province+item.ad_info.city+item.title" /> -->
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<tlbs-map
|
||||
v-if="dialog.visible"
|
||||
@ -112,6 +119,15 @@
|
||||
>
|
||||
<tlbs-multi-marker :geometries="geometries" :styles="styles" :options="options" />
|
||||
</tlbs-map>
|
||||
<el-form-item label="详细地址" prop="address" style="margin-top: 15px">
|
||||
<el-input v-model="form.address" placeholder="输入地理位置或点击度图上的地点" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="经度" prop="longitude">
|
||||
<el-input v-model="form.longitude" placeholder="输入地理位置或点击度图上的地点" disabled />
|
||||
</el-form-item>
|
||||
<el-form-item label="纬度" prop="latitude">
|
||||
<el-input v-model="form.latitude" placeholder="输入地理位置或点击度图上的地点" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
@ -143,6 +159,7 @@ const idsname = ref([]);
|
||||
const single = ref(true);
|
||||
const multiple = ref(true);
|
||||
const total = ref(0);
|
||||
const locationOptions = ref([]); //腾讯地图返回的搜索地址列表
|
||||
|
||||
const queryFormRef = ref<ElFormInstance>();
|
||||
const hotelFormRef = ref<ElFormInstance>();
|
||||
@ -251,8 +268,9 @@ const handleAdd = () => {
|
||||
reset();
|
||||
dialog.visible = true;
|
||||
dialog.title = '添加住宿';
|
||||
geometries.value = [{ styleId: 'marker', position: { lat: form.value.latitude || 39.145902, lng: form.value.longitude || 117.17546 } }];
|
||||
center.value = { lat: form.value.latitude || 39.145902, lng: form.value.longitude || 117.17546 };
|
||||
searchLocation.value = '';
|
||||
geometries.value = [{ styleId: 'marker', position: { lat: form.value.latitude || 20.018883, lng: form.value.longitude || 110.348801 } }];
|
||||
center.value = { lat: form.value.latitude || 20.018883, lng: form.value.longitude || 110.348801 };
|
||||
};
|
||||
|
||||
/** 修改按钮操作 */
|
||||
@ -316,7 +334,35 @@ const handleEdit = async (row?: HotelVO) => {
|
||||
proxy?.$modal.msgSuccess(messages);
|
||||
await getList();
|
||||
};
|
||||
|
||||
// 地理位置 输入实时搜索
|
||||
const remoteMethod = (query: string) => {
|
||||
if (query !== '') {
|
||||
// 调用腾讯地图API进行搜索，并展示在地图上
|
||||
// geocoder(query).then((result) => {
|
||||
// console.log(result);
|
||||
// });
|
||||
console.log(query);
|
||||
// jsonp(`https://apis.map.qq.com/ws/place/v1/search?key=${'6XFBZ-SAVLT-JGIX2-VOLMK-6S2H3-XUBGO'}&keyword=${encodeURI(query)}&boundary=nearby(20.018883,110.348801,1000)&output=jsonp`, {}).then((res) => {
|
||||
jsonp(
|
||||
`https://apis.map.qq.com/ws/place/v1/suggestion?key=${'6XFBZ-SAVLT-JGIX2-VOLMK-6S2H3-XUBGO'}&keyword=${encodeURI(query)}®ion=三亚市®ion_fix=0&output=jsonp`,
|
||||
{}
|
||||
).then((res) => {
|
||||
// if (res.region.title!=='海南省') {
|
||||
// proxy?.$modal.msgError('仅支持海南省地理位置');
|
||||
// return
|
||||
// }
|
||||
if (res.status == 0) {
|
||||
locationOptions.value = res.data;
|
||||
}
|
||||
});
|
||||
}
|
||||
};
|
||||
// 选择地理位置 下拉框值变化
|
||||
const selectChnange = (val: string) => {
|
||||
if (val) {
|
||||
debouncedSearch(searchLocation.value);
|
||||
}
|
||||
};
|
||||
//输入位置，搜索位置
|
||||
const performSearch = async (text) => {
|
||||
// 这里简单模拟延迟，模拟真实的异步请求耗时
|
||||
@ -338,7 +384,8 @@ const performSearch = async (text) => {
|
||||
data.result.address_components.city +
|
||||
data.result.address_components.district +
|
||||
data.result.address_components.street +
|
||||
data.result.address_components.street_number;
|
||||
data.result.address_components.street_number +
|
||||
data.result.title;
|
||||
form.value.latitude = data.result.location.lat;
|
||||
form.value.longitude = data.result.location.lng;
|
||||
// form.value.region = data.result.ad_info.adcode; //行政区划编码
|
||||
@ -368,7 +415,8 @@ const onClick = (e: any) => {
|
||||
data.result.address_component.city +
|
||||
data.result.address_component.district +
|
||||
data.result.address_component.street +
|
||||
data.result.address_component.street_number;
|
||||
data.result.address_component.street_number +
|
||||
data.result.title;
|
||||
form.value.latitude = data.result.location.lat;
|
||||
form.value.longitude = data.result.location.lng;
|
||||
// form.value.province = data.result.address_component.province;
|
||||
@ -385,8 +433,8 @@ const onClick = (e: any) => {
|
||||
const debouncedSearch = debounce(performSearch, 300); // 创建防抖后的搜索函数，延迟设为300毫秒
|
||||
|
||||
const map = ref(null);
|
||||
const center = ref({ lat: form.value.latitude || 39.145902, lng: form.value.longitude || 117.17546 });
|
||||
const zoom = ref(20);
|
||||
const center = ref({ lat: form.value.latitude || 20.018883, lng: form.value.longitude || 110.348801 });
|
||||
const zoom = ref(17);
|
||||
const control = reactive({
|
||||
scale: {},
|
||||
zoom: {
|
||||
@ -394,7 +442,7 @@ const control = reactive({
|
||||
}
|
||||
});
|
||||
const searchLocation = ref(''); // 搜索地点
|
||||
const geometries = ref([{ styleId: 'marker', position: { lat: form.value.latitude || 39.145902, lng: form.value.longitude || 117.17546 } }]);
|
||||
const geometries = ref([{ styleId: 'marker', position: { lat: form.value.latitude || 20.018883, lng: form.value.longitude || 110.348801 } }]);
|
||||
const styles = reactive({
|
||||
marker: {
|
||||
width: 20,
|
||||
|
||||
@ -365,6 +365,9 @@ const handleQuery = () => {
|
||||
/** 重置按钮操作 */
|
||||
const resetQuery = () => {
|
||||
queryParams.value.status = '';
|
||||
queryParams.value.title = '';
|
||||
queryParams.value.location = '';
|
||||
queryParams.value.updateByName = '';
|
||||
queryFormRef.value?.resetFields();
|
||||
handleQuery();
|
||||
};
|
||||
@ -419,8 +422,8 @@ const contenttext = async (row?: NotebookVO) => {
|
||||
};
|
||||
/** 提交按钮 */
|
||||
const submitForm = async (type) => {
|
||||
form.value.tagId = tagvalue.value.join(',');
|
||||
form.value.location = addressvalue.value.join(',');
|
||||
form.value.tagId = tagvalue.value == '' ? '' : tagvalue.value.join(',');
|
||||
form.value.location = addressvalue.value == '' ? '' : addressvalue.value.join(',');
|
||||
form.value.cover = '';
|
||||
form.value.status = Number(type);
|
||||
form.value.content = form.value.content == '<p><br></p>' ? '' : form.value.content;
|
||||
|
||||
@ -267,7 +267,7 @@
|
||||
<!-- :value="item.ad_info.province+item.ad_info.city+item.title" /> -->
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<tlbs-map style="margin-left: 80px" ref="map" api-key="
|
||||
<tlbs-map style="margin-left: 80px" ref="map" api-key="
|
||||
6XFBZ-SAVLT-JGIX2-VOLMK-6S2H3-XUBGO" :center="center" :zoom="zoom" :control="control" @click="onClick">
|
||||
<tlbs-multi-marker :geometries="geometries" :styles="styles" :options="options" />
|
||||
</tlbs-map>
|
||||
@ -679,7 +679,7 @@ const performSearch = async (text) => {
|
||||
form.value.longitude = data.result.location.lng;
|
||||
form.value.region = data.result.ad_info.adcode; //行政区划编码
|
||||
form.value.regionCode = data.result.ad_info.adcode; //行政区划编码
|
||||
|
||||
|
||||
// form.value.province = data.result.address_components.province;
|
||||
// form.value.city = data.result.address_components.city;
|
||||
center.value = { lat: data.result.location.lat, lng: data.result.location.lng };
|
||||
|
||||
@ -25,8 +25,8 @@ export default defineConfig(({ mode, command }: ConfigEnv): UserConfig => {
|
||||
open: true,
|
||||
proxy: {
|
||||
[env.VITE_APP_BASE_API]: {
|
||||
target: 'http://192.168.18.23:8080', //维嘉
|
||||
// target: 'http://192.168.18.113:8080',//华伟
|
||||
// target: 'http://192.168.18.23:8080', //维嘉
|
||||
target: 'http://192.168.18.113:8080',//华伟
|
||||
changeOrigin: true,
|
||||
ws: true,
|
||||
rewrite: (path) => path.replace(new RegExp('^' + env.VITE_APP_BASE_API), '')
|
||||
|
||||
Loading…
Reference in New Issue
Block a user