新增地图选择器

[dream2023]

新增地图选择器

[dream2023]

参考

1、vue-ele-form

交互

采用了下拉列表和地图同时展示的方式

数据

对象，包含经度、维度和地址。

location: {
    address: '深圳市宝安区'
    lat: 22.54605355,
    lng: 114.02597366
  }

属性

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: '请搜索位置'
  }
}

2、amis

交互

采用了选择框 + 地图弹窗的形式。

数据

数据是一个对象，包含经度、维度、地址、城市

{
  "location": {
    "address": "北京市西城区大宴乐胡同12号",
    "lat": 39.91588560105594,
    "lng": 116.39742440366962,
    "city": "北京市",
    "vendor": "baidu"
  }
}

属性

属性名	类型	默认值	说明
vendor	'baidu'	'baidu'	地图厂商，目前只实现了百度地图
ak	string	无	百度地图的 ak
clearable	boolean	false	输入框是否可清空
placeholder	string	'请选择位置'	默认提示
coordinatesType	string	'bd09'	默为百度坐标，可设置为'gcj02'

3、avue

展示效果：

点击后整体弹窗，并且可以搜索同 vue-ele-form

数据结果：

是一个数组，数组里有三个值，分别为经度、维度和地址。

方案

交互

有一个 input 框，点击后弹窗，弹窗内可以选择，可以搜索。

数据

依然是一个对象，返回信息里面有省、市、区、地址以及经纬度，输入信息信息里仅采用经纬度。

基础组件使用 uiwjs 百度和高德组件进行二次封装。

属性

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: '请选择位置'
  },
  // 坐标系
  // 默为百度坐标，可设置为'gcj02'
  coordinatesType: {
    type: String,
    default: 'bd09' 
  }
}