fs-admin/src/components/FsMapPicker/index.vue

<script setup lang="ts">
import type { MapPickerProps } from './props'
import { mapPickerEmits } from './props'
import Amap from './components/amap.vue'
import BaiDu from './components/baidu.vue'

const emits = defineEmits(mapPickerEmits)

const props = withDefaults(defineProps<MapPickerProps>(), {
  type: 'amap',
  height: '460px',
  markerSrc: 'https://3gimg.qq.com/lightmap/components/locationPicker2/image/marker.png',
  mapStyle: 'amap://styles/normal',
  suggestionCity: '太原市',
  search: true,
  poi: true,
  poiRadius: 1000,
  center: [112.569129, 37.863392],
  zoom: 11,
  selectedZoom: 17,
  message: '请选择位置',
  okText: '确定',
  poiKeywords: ''
})

/* 处理选择完成事件 */
const handleDone = (data: any) => {
  emits('done', data)
  updateModalValue(false)
}

const updateModalValue = (modelValue: boolean) => {
  emits('update:modelValue', modelValue)
}
</script>

<template>
  <el-dialog
    :model-value="modelValue"
    width="800px"
    title="位置选择"
    class="map-picker-dialog"
    @update:modelValue="updateModalValue"
  >
    <template v-if="modelValue">
      <!-- 高德地图 -->
      <Amap v-if="type === 'amap'" v-bind="props" :style="{ height }" @done="handleDone" />
      <!-- 百度地图 -->
      <BaiDu v-else v-bind="props" :style="{ height }" @done="handleDone" />
    </template>
  </el-dialog>
</template>

<style lang="scss">
.map-picker-dialog {
  padding: 0px;
  .el-dialog__header {
    padding: var(--el-dialog-padding-primary);
  }
  .el-dialog__body {
    padding: 0px !important;
    .map-container {
      width: 100%;
      display: flex;
      .map-main {
        position: relative;
        flex: 1;
      }
      .map-keywrod-input {
        position: absolute;
        left: 8px;
        top: 8px;
        width: 200px;
      }
      .map-poi-side {
        width: 260px;
        height: 100%;
        display: flex;
        flex-direction: column;
        .map-poi-list {
          flex: 1;
          overflow-y: auto;
          box-sizing: border-box;
          .map-poi-item {
            display: flex;
            align-items: center;
            border-bottom: 1px solid var(--el-border-color);
            padding: 5px 0px;
            cursor: pointer;
            .map-poi-desc {
              flex: 1;
            }
            .map-poi-icon {
              padding: 0px 5px;
            }
            .map-poi-icon-checked {
              width: 30px;
              padding-left: 2px;
            }
            .map-poi-title {
              color: #333;
              font-size: 14px;
            }
            .map-poi-address {
              font-size: 13px;
            }
          }
        }
        .map-poi-button {
          height: 40px;
          padding: 5px;
          box-sizing: border-box;
        }
      }
      .map-icon-plus,
      .map-main-marker {
        position: absolute;
        top: 50%;
        left: 50%;
        z-index: 9;
      }
      .map-icon-plus {
        transform: translate(-50%, -50%);
      }
      .map-main-marker {
        width: 26px;
        margin-top: -35px;
        margin-left: -13px;
      }
      /* 地图图标跳动动画 */
      .map-main-marker-bounce {
        animation: mapAnim 0.6s;
      }
      @keyframes mapAnim {
        from,
        to {
          transform: translateY(0);
        }

        50% {
          transform: translateY(-20px);
        }
      }
    }
  }
}
</style>