百度地图的使用

<template>
  <BasicModal
    v-bind="$attrs"
    @register="registerModal"
    width="1200px"
    :minHeight="600"
    title="仓库信息"
    @ok="handleSubmit"
  >
    <BasicForm @register="registerForm">
      <template #businessDepId="{ model, field, disabled }">
        <a-input-search
          v-model:value="model[field]"
          :disabled="disabled"
          placeholder="请选择"
          @search="openCustomerModal"
        />
      </template>
      <template #agentOrgCode="{ model, field, disabled }">
        <a-input-search
          v-model:value="model[field]"
          :disabled="disabled"
          placeholder="请选择"
          @search="openAgentModal"
        /> </template
    ></BasicForm>
    <!-- 事业部弹框 -->
    <businessDepPicker @register="businessDepModal" @success="getDepData" />
    <!-- 代理商弹框 -->
    <DlrComponents @register="agentModal" @success="getDlrData" />
    <div class="ml-10 mb-5">
      <label>地名:<input style="width: 800px" v-model="keyword" /></label>
      <Button @click="changeWay">搜搜</Button>
    </div>
    <baidu-map class="bm-view" :zoom="12" :center="{ lng: dataCenter.lng, lat: dataCenter.lat }">
      <bm-marker
        :position="{ lng: dataCenter.lng, lat: dataCenter.lat }"
        :dragging="true"
        animation="BMAP_ANIMATION_BOUNCE"
      />
      <bm-circle
        :center="{ lng: dataCenter.lng, lat: dataCenter.lat }"
        :radius="10000"
        stroke-color="blue"
        :stroke-opacity="0.5"
        :stroke-weight="2"
        :editing="true"
      />
    </baidu-map>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, unref, reactive } from 'vue'
  import { useModal, BasicModal, useModalInner } from '@/components/Modal'
  import { BasicForm, useForm } from '@/components/Form'
  import { houseForm } from './house.data'
  import { getDeptList } from '@/api/demo/system'
  import businessDepPicker from '@/components/WorkComponents/businessDepPicker/index.vue'
  import DlrComponents from '@/components/WorkComponents/dlrComponents/index.vue'
  import { warehouseInfoSave } from '@/api/basic-data/index'
  import { useMessage } from '@/hooks/web/useMessage'
  const { createMessage } = useMessage()
  import { useGeocoder, usePoint } from 'vue-baidu-map-3x'
  const [agentModal, { openModal: openAgentModal }] = useModal()

  defineOptions({ name: 'DeptModal' })

  const emit = defineEmits(['success', 'register'])
  const [businessDepModal, { openModal: openCustomerModal }] = useModal()

  const isUpdate = ref(true)
  const rowId = ref('')
  const dataCenter = reactive({
    lng: '',
    lat: '',
  })

  //北京
  // const location = ref('长沙')
  const keyword = ref('')
  const changeWay = () => {
    console.log('提交代码-0999')
    useGeocoder().then(async (geocoder) => {
      await geocoder.getPoint(keyword.value, (res) => {
        console.log('地址---------')
        console.log(res)
        dataCenter.lng = res.lng
        dataCenter.lat = res.lat
        usePoint(res.lng, res.lat).then((point) => {
          geocoder.getLocation(point, (result) => {
            console.log('result')
            console.log(result)
          })
        })
      })
    })
  }
  // getData()

  const [registerForm, { resetFields, setFieldsValue, updateSchema, validate }] = useForm({
    labelWidth: 100,
    baseColProps: { span: 6 },
    schemas: houseForm,
    showActionButtonGroup: false,
  })

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    resetFields()
    setModalProps({ confirmLoading: false })
    isUpdate.value = !!data?.isUpdate
    rowId.value = data?.id

    if (unref(isUpdate)) {
      setFieldsValue({
        ...data.record,
      })
    }
    const treeData = await getDeptList()
    updateSchema({
      field: 'parentDept',
      componentProps: { treeData },
    })
  })
  // 获取事业部数据
  function getDepData(data) {
    setFieldsValue({
      businessDepId: data.name,
    })
  }

  // 获取代理商数据
  function getDlrData(data) {
    setFieldsValue({
      agentCode: data.code,
    })
  }

  // const getTitle = computed(() => (!unref(isUpdate) ? '新增部门' : '编辑部门'))

  async function handleSubmit() {
    try {
      const values = await validate()
      setModalProps({ confirmLoading: true })
      console.log(values)
      const params = {
        ...values,
      }
      isUpdate.value ? (params.id = rowId.value) : ''
      warehouseInfoSave(params)
        .then(() => {
          createMessage.success('操作成功')
          emit('success')
          closeModal()
        })
        .catch(() => {})
    } finally {
      setModalProps({ confirmLoading: false })
    }
  }
</script>

<style>
  .bm-view {
    width: 100%;
    height: 400px;
  }
</style>