EleFormMap 地图组件

组件介绍

EleFormMap 包含两个地图组件：EleFormBmap（百度地图）和 EleFormtmap（腾讯地图），用于在表单中快速实现地图选择功能。它们支持地址搜索、坐标选择、地图标记等功能，适用于位置信息采集、地址选择等场景。

安装与引入

安装依赖

# 安装百度地图组件
npm install diandi-ele-form-bmap

# 安装腾讯地图组件
npm install diandi-ele-form-tmap

全局引入

在 src/projects/scrm/utils/el-form.js 中全局引入和配置：

import Vue from 'vue'
import EleFormBmap from 'diandi-ele-form-bmap'
import EleFormtmap from 'diandi-ele-form-tmap'

// 注册 bmap 组件
Vue.component('bmap', EleFormBmap)

// 注册 tmap 组件
Vue.component('tmap', EleFormtmap)

// 全局配置
Vue.use(EleForm, {
  'bmap': {
    // 比如设置 ak 后, 所有的 bmap 编辑器上传图片都会采用这个属性值
    ak: store.getters.elForm.bmapAk
  },
  'tmap': {
    // 比如设置 ak 后, 所有的 bmap 编辑器上传图片都会采用这个属性值
    ak: 'DLCBZ-GKYKJ-WWIFZ-XP57R-ZDNDV-GABN5'
  }
})

全局配置

百度地图配置

// 全局 bmap 配置
'bmap': {
  ak: String // 百度地图 AK
}

腾讯地图配置

// 全局 tmap 配置
'tmap': {
  ak: String // 腾讯地图 AK
}

基本使用

百度地图

<template>
  <ele-form
    :form-data="formData"
    :form-config="formConfig"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        location: ''
      },
      formConfig: [
        {
          label: '位置',
          prop: 'location',
          type: 'bmap',
          props: {
            ak: 'your-baidu-map-ak'
          }
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
    }
  }
}
</script>

腾讯地图

<template>
  <ele-form
    :form-data="formData"
    :form-config="formConfig"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        location: ''
      },
      formConfig: [
        {
          label: '位置',
          prop: 'location',
          type: 'tmap',
          props: {
            ak: 'your-tencent-map-ak'
          }
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
    }
  }
}
</script>

属性配置

基础属性

属性类型描述默认值
akString地图 AK-
centerArray地图中心点[39.9042, 116.4074]
zoomNumber地图缩放级别13
markerBoolean是否显示标记true
searchBoolean是否显示搜索true
resizeEnableBoolean是否允许调整大小true
enableMapClickBoolean是否允许地图点击true
pluginArray地图插件[]
widthString地图宽度'100%'
heightString地图高度'400px'
disabledBoolean是否禁用false
placeholderString占位符'请选择位置'
valueString绑定值-
nameString原生name属性-
labelString标签文本-
requiredBoolean是否必填false
rulesArray验证规则[]
errorString错误信息-
validateEventBoolean是否在输入时触发表单验证true

百度地图特有属性

属性类型描述默认值
mapTypeNumber地图类型BMAP_NORMAL_MAP
enableScrollWheelZoomBoolean是否启用滚轮缩放true
enableDraggingBoolean是否启用拖拽true
enableDoubleClickZoomBoolean是否启用双击缩放true
enableKeyboardBoolean是否启用键盘操作true
mapStyleObject地图样式{}
controlsArray地图控件[]
eventsObject地图事件{}

腾讯地图特有属性

属性类型描述默认值
mapTypeIdString地图类型'roadmap'
gestureHandlingString手势操作'auto'
zoomControlBoolean是否显示缩放控件true
scaleControlBoolean是否显示比例尺控件false
rotateControlBoolean是否显示旋转控件false
infoWindowBoolean是否显示信息窗口false
eventsObject地图事件{}

事件

事件名称回调参数描述
changevalue值变化时触发
selectlocation选择位置时触发
searchkeyword搜索时触发
clickpoint地图点击时触发
loadmap地图加载完成时触发
errorerror地图加载失败时触发

常见问题

1. 地图加载失败

原因：AK 配置错误或网络问题

解决方案：

  • 检查 ak 配置是否正确
  • 确认 AK 是否已经激活并启用了相应的 API
  • 检查网络连接和跨域配置

2. 搜索功能不生效

原因：搜索服务配置错误或 AK 权限不足

解决方案：

  • 检查 search 属性是否设置为 true
  • 确认 AK 是否启用了搜索服务
  • 检查网络连接和跨域配置

3. 地图显示异常

原因：容器大小配置错误或地图库加载失败

解决方案：

  • 检查 width 和 height 属性是否正确设置
  • 确认地图容器是否有正确的 CSS 样式
  • 检查网络连接和地图库加载状态

示例代码

百度地图示例

<template>
  <ele-form
    :form-data="formData"
    :form-config="formConfig"
    :label-width="'120px'"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        location: ''
      },
      formConfig: [
        {
          label: '位置',
          prop: 'location',
          type: 'bmap',
          required: true,
          props: {
            ak: 'your-baidu-map-ak',
            center: [39.9042, 116.4074],
            zoom: 15,
            width: '100%',
            height: '400px',
            search: true,
            marker: true
          }
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
      // 这里可以进行API调用等操作
      this.$message.success('提交成功')
    }
  }
}
</script>

<style scoped>
/* 自定义样式 */
</style>

腾讯地图示例

<template>
  <ele-form
    :form-data="formData"
    :form-config="formConfig"
    :label-width="'120px'"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        location: ''
      },
      formConfig: [
        {
          label: '位置',
          prop: 'location',
          type: 'tmap',
          required: true,
          props: {
            ak: 'your-tencent-map-ak',
            center: [39.9042, 116.4074],
            zoom: 15,
            width: '100%',
            height: '400px',
            search: true,
            marker: true
          }
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
      // 这里可以进行API调用等操作
      this.$message.success('提交成功')
    }
  }
}
</script>

<style scoped>
/* 自定义样式 */
</style>

双地图示例

<template>
  <ele-form
    :form-data="formData"
    :form-config="formConfig"
    :label-width="'120px'"
    @submit="handleSubmit"
  />
</template>

<script>
export default {
  data() {
    return {
      formData: {
        baiduLocation: '',
        tencentLocation: ''
      },
      formConfig: [
        {
          label: '百度地图位置',
          prop: 'baiduLocation',
          type: 'bmap',
          required: true,
          props: {
            ak: 'your-baidu-map-ak',
            width: '100%',
            height: '300px'
          }
        },
        {
          label: '腾讯地图位置',
          prop: 'tencentLocation',
          type: 'tmap',
          required: true,
          props: {
            ak: 'your-tencent-map-ak',
            width: '100%',
            height: '300px'
          }
        }
      ]
    }
  },
  methods: {
    handleSubmit(data) {
      console.log('表单数据:', data)
    }
  }
}
</script>

总结

EleFormMap 提供了百度地图和腾讯地图两个地图组件，通过简单的配置即可快速实现在表单中的地图选择功能。它们支持多种配置选项，可以满足不同场景下的地图选择需求。

通过全局配置和组件级配置的结合，可以灵活应对各种地图选择场景，大大提高了开发效率。

版本信息