A Map 高德地图

该组件对高德地图的创建、初始化、销毁以及各项配置进行了封装，并提供了图层切换等内置控件。

全局配置

在全局配置组件属性。

AMap组件属性配置

app.provide(A_MAP_KEY, {
  loadOptions: {
    key: '替换为你申请的 key', // 必填
    version: '2.0',
  },
  mapOptions: {
    zoom: 14,
    center: [116.397428, 39.90923],
  },
  // others props...
});

提示

使用前请在项目中设置高德地图安全密钥。

基础用法

初始化配置

你可以通过传入load-options属性来配置地图的加载参数，该属性与高德地图JS API的加载参数（即AMapLoader.load方法的参数）完全一致。你还可以通过传入map-options属性来配置地图的初始化参数，该属性与高德地图初始化参数（即AMap.Map方法的参数）一一对应，唯一不同点在于对layers属性进行了改造，由于组件内部对AMap的加载和map的初始化进行了封装，只有在loaded事件中才能拿到AMap与map实例。而初始化地图时传入的layers属性往往需要使用AMap实例去创建图层，这时你可以通过一个回调函数拿到AMap实例，然后在该回调函数中创建图层并返回图层数组。同时，组件内置了default、satellite、roadNet和traffic四种图层，直接传入字符串即可快速生成对应图层。

图层控制

你可以通过layers属性来控制图层的切换，可以传入组件内置的default、satellite、roadNet和traffic四种图层，并且支持传入高德地图提供的任意图层对象。

注意

请不要使用ref将地图或图层等对象设置为响应式数据，由于这些对象中可能存在成千上万个属性，使用ref将会深层递归将所有属性转为响应式数据，可能会造成严重的性能问题。如果业务需要将这些对象设置成响应式数据，请使用shallowRef将他们设置为浅层响应式数据。

图层控件

组件内部封装了图层切换控件，可以通过layers-control属性控制是否展示。默认展示在左下角，你可以通过deep深度选择器修改控件展示的位置。

图层控件按钮

通过传入layers-buttons属性可以生成对应的图层切换按钮，内部会根据传入的图层内容匹配对应的按钮图片，你也可以通过image属性设置按钮图片。

属性

属性名	说明	类型	默认值
load-options	高德地图JS API的加载参数，对应AMapLoader.load方法的参数	`AMap.LoadOptions`	—
map-options	高德地图初始化参数，对应AMap.Map方法的参数	`AMap.MapOptions`	—
layers	地图展示的图层	`AMapLayer`	['default']
layers-control	是否展示图层切换控件	`boolean`	false
layers-buttons	自定义图层切换按钮	`AMapLayerButton[]`	—
layers-index / v-model:layers-index	当前选中的图层切换按钮下标	`number`	0

事件

事件名	说明	类型
loaded	地图加载完成后的回调	`Function`

类型声明

import AMap from './a-map.vue';
import { load } from '@amap/amap-jsapi-loader';

/**
 * 高德地图组件属性
 */
export interface AMapProps {
  /**
   * 加载配置
   */
  loadOptions?: Partial<Parameters<typeof load>[0]>;
  /**
   * 地图配置
   */
  mapOptions?: AMap.MapOptions | { layers: AMapLayer[] | AMapLayersCreate };
  /**
   * 地图图层
   */
  layers?: AMapLayer[];
  /**
   * 是否显示图层控制按钮
   */
  layersControl?: boolean;
  /**
   * 图层控制按钮
   */
  layersButtons?: AMapLayerButton[];
}

/**
 * 图层类型
 */
export type AMapLayerType = 'default' | 'satellite' | 'roadNet' | 'traffic';

/**
 * 图层
 */
export type AMapLayer =
  | AMapLayerType
  | (Required<AMap.MapOptions>['layers'][number] & { map: AMap.Map });

/**
 * 图层按钮
 */
export interface AMapLayerButton {
  name: string;
  image?: string;
  layers: AMapLayer[];
}

/**
 * 图层创建方法
 */
export type AMapLayersCreate = (AMap: AMap.NameSpace) => AMapLayer[];

/**
 * 组件事件
 */
export interface AMapEmits {
  (e: 'loaded', map: AMap.Map, AMap: AMap.NameSpace, Loca: any): void;
}

/**
 * 组件实例
 */
export type AMapInstance = InstanceType<typeof AMap>;

A Map 高德地图 ​

全局配置 ​

基础用法 ​

初始化配置 ​

图层控制 ​

图层控件 ​

图层控件按钮 ​

属性 ​

事件 ​