64 lines
1.9 KiB
Vue
64 lines
1.9 KiB
Vue
<template>
|
|
<a-card title="地图位置选择器" :bordered="false">
|
|
<a-space>
|
|
<div style="width: 140px">
|
|
<a-select v-model:value="searchType" class="ele-fluid">
|
|
<a-select-option :value="0">POI检索模式</a-select-option>
|
|
<a-select-option :value="1">关键字检索模式</a-select-option>
|
|
</a-select>
|
|
</div>
|
|
<a-button class="ele-btn-icon" @click="openMapPicker">
|
|
打开地图位置选择器
|
|
</a-button>
|
|
</a-space>
|
|
<div style="margin-top: 12px">选择位置: {{ result.location }}</div>
|
|
<div style="margin-top: 12px">详细地址: {{ result.address }}</div>
|
|
<div style="margin-top: 12px">经 纬 度 : {{ result.lngAndLat }}</div>
|
|
</a-card>
|
|
<!-- 地图位置选择弹窗 -->
|
|
<ele-map-picker
|
|
:need-city="true"
|
|
:dark-mode="darkMode"
|
|
v-model:visible="visible"
|
|
:search-type="searchType"
|
|
@done="onChoose"
|
|
/>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, reactive } from 'vue';
|
|
import type { CenterPoint } from 'ele-admin-pro/es/ele-map-picker/types';
|
|
import { useThemeStore } from '@/store/modules/theme';
|
|
import { storeToRefs } from 'pinia';
|
|
|
|
const themeStore = useThemeStore();
|
|
const { darkMode } = storeToRefs(themeStore);
|
|
|
|
// 是否显示地图选择弹窗
|
|
const visible = ref(false);
|
|
|
|
// 地点检索类型
|
|
const searchType = ref(0);
|
|
|
|
// 选择结果
|
|
const result = reactive({
|
|
location: '',
|
|
address: '',
|
|
lngAndLat: ''
|
|
});
|
|
|
|
/* 打开位置选择 */
|
|
const openMapPicker = () => {
|
|
visible.value = true;
|
|
};
|
|
|
|
/* 地图选择后回调 */
|
|
const onChoose = (location: CenterPoint) => {
|
|
console.log(location);
|
|
result.location = `${location.city?.province}/${location.city?.city}/${location.city?.district}`;
|
|
result.address = `${location.name} ${location.address}`;
|
|
result.lngAndLat = `${location.lng},${location.lat}`;
|
|
visible.value = false;
|
|
};
|
|
</script>
|