Location Picker 地图选点

用于表单选取地图点位。

全局配置

在全局配置组件属性。

LocationPicker组件属性配置

app.provide(LOCATION_PICKER_KEY, {
  type: 'wgs84',
  layersControl: true,
  loadOptions: {
    // 必填，如果已经在高德地图组件中配置了key，则无需重复配置
    key: '替换为你申请的 key',
  },
  mapOptions: {
    center: [115.857972, 28.682976],
  },
  // others props...
});

基础用法

v-model参数

v-model支持单独绑定经度、纬度或地址。

指定坐标系

通过type属性可以指定坐标系，默认为gcj02，推荐在全局配置中统一指定项目所使用的坐标系。

属性透传

Location Picker基于LivAMap封装，所以你可以传入LivAMap的所有属性。

属性

属性名	说明	类型	默认值
model-value / v-model	选中位置的经纬度数组	number[]	—
longitude / v-model:longitude	选中位置的经度	number	—
latitude / v-model:latitude	选中位置的纬度	number	—
address / v-model:address2.1.0	选中位置的地址	string	—
type	经纬度坐标系	enum 'gcj02' | 'wgs84'	gcj02

事件

事件名	说明	类型	默认值
change	点击地图位置改变后的回调	Function (location) => void	—
confirm	点击确认按钮后的回调	Function (location) => void	—

类型声明

import type { AMapProps } from '../../a-map';
import LocationPicker from './location-picker.vue';

/**
 * 位置选择器组件属性
 */
export interface LocationPickerProps extends AMapProps {
  /**
   * 坐标系类型
   * @defaultValue 'gcj02'
   */
  type?: 'gcj02' | 'wgs84';
}

/**
 * 位置选择器组件事件
 */
export type LocationPickerEmits = {
  change: [location: [number | null, number | null]];
  confirm: [location: [number, number]];
};

/**
 * 位置选择器组件实例
 */
export type LocationPickerInstance = InstanceType<typeof LocationPicker>;