Initial commit

src/api/apps/map/components/demo-picker.vue

@@ -0,0 +1,63 @@
+<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>