<script setup lang="ts">
// 是否显示地图位置选择
const showMapPicker = ref<boolean>(false)

const mapData = ref({
  lat: '',
  lng: '',
  name: '',
  address: ''
})

/* 打开位置选择 */
const openPicker = () => {
  showMapPicker.value = true
}

/* 地图选择完毕 */
const mapPickerDone = (data: any) => {
  mapData.value = data
}
</script>

<template>
  <div>
    <div>
      <p>经度：{{ mapData.lng }}</p>
      <p>纬度：{{ mapData.lat }}</p>
      <p>地址：{{ mapData.name }}</p>
      <p>详细信息：{{ mapData.address }}</p>
    </div>
    <el-button type="primary" @click="openPicker">打开地图选择</el-button>
    <fs-map-picker
      v-model="showMapPicker"
      type="baidu"
      poiKeywords="美食$银行$酒店$公园$学校$超市$医院"
      map-key=""
      @done="mapPickerDone"
    ></fs-map-picker>
  </div>
</template>

<style scoped lang="scss"></style>
