vue-ele-form-bmap | vue-ele-form 的百度地图组件

介绍

vue-ele-form-bmap 做为 vue-ele-form 的第三方扩展, 通过对 vue-baidu-map 的二次封装, 实现了地理位置的获取和定位

安装

npm install vue-ele-form-bmap --save

使用

import EleForm from 'vue-ele-form'
import EleFormBmap from 'vue-ele-form-bmap'
// 注册 vue-ele-form
Vue.use(EleForm, {
  // 可以为编辑器配置全局属性, 每个实例都共享这个属性
  bmap: {
    // 比如设置 ak 后, 所有的 bmap 编辑器上传图片都会采用这个属性值
    ak: 'YOUR_APP_KEY'
  }
})

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

formData: {
  // 这里注意, 请参考值的设置
  location: {
    address: '深圳市宝安区'
    lat: 22.54605355,
    lng: 114.02597366
  }
},
formDesc: {
  location: {
    label: 'xxx',
    type: 'bmap', // 只需要在这里指定为 bmap 即可
    // 组件属性, 具体参考下面 Props 部分
    attrs: {
      ak: 'YOUR_APP_KEY',
      zoom: 15
    }
  }
}

bmap 类型字段的值

// bmap类型的字段的四种情况

// 1.字符串
formData: {
  location: '深圳市'
}

// 2.经纬度
formData: {
  location: {
    lat: 22.54605355, // 这里key必须是 lat
    lng: 114.02597366  // 这里key必须是 lng
  }
}

// 3.混合
formData: {
  location: {
    address: '深圳市', // key必须是address
    lat: 22.54605355, // key必须是lat
    lng: 114.02597366 // key必须是lnt
  }
}

// 4.从服务器获取的key不符合的情况
// 可以利用valueFormatter 和 displayFormatter
// 假如从服务器获取的数据如下:
formData: { longitude: 114.02597366, latitude: 22.54605355, address: '深圳市' },

formDesc: {
  latitude: {
    type: 'hide', // 隐藏
    valueFormatter (val, data) {
      // 最终提交时, 获取值
      return data.address ? data.address.lat : null
    }
  },
  longitude: {
    type: 'hide', // 隐藏
    valueFormatter (val, data) {
      // 最终提交时, 获取值
      return data.address ? data.address.lng : null
    }
  },
  address: {
    label: '位置',
    type: 'bmap', // 设置为 bmap 类型
    displayFormatter: (address) => {
      // 设置显示的值
      if (typeof address === 'string') {
        return {
          address: address,
          lat: this.formData.latitude,
          lng: this.formData.longitude
        }
      } else {
        return address
      }
    },
    valueFormatter (val) {
      // 最终提交时
      return val && val.address ? val.address : null
    },
    attrs: {
      ak: 'LDeyoWgKV2mO1b3MRkTlyzGcNjFUycLL'
    }
  }
}

Props

属性具体含义可以参考 vue-baidu-map https://github.com/Dafrok/vue-baidu-map

props: {
  // 密钥(必填)
  ak: {
    type: String,
    required: true
  },
  // 缩放比
  zoom: {
    type: Number,
    default: 12
  },
  // 滚轮缩放大小
  isScrollWheelZoom: {
    type: Boolean,
    default: false
  },
  // 地图高度
  mapHeight: {
    type: Number,
    default: 400
  },
  // 是否显示缩略控件
  isShowNavigation: {
    type: Boolean,
    default: true
  },
  // 是否显示自动定位控件
  isShowGeolocation: {
    type: Boolean,
    default: true
  },
  // 搜索占位
  placeholder: {
    type: String,
    default: '请搜索位置'
  }
}

相关链接

• vue-baidu-map
• vue-ele-form
• element-ui