关于在vue2.6+ts技术栈下高德地图API的使用方法

本文介绍了在vue2.6+typescript项目中如何引入和使用高德地图API,包括通过HTML标签引入API文件,避免webpack打包,创建声明文件以获取类型提示,以及在组件中直接调用高德地图实例的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

最近公司某个项目用上了vue2.6+typescript的技术栈,整个工程都是用vue-cli3直接生成的,自带了ts-loader来解析ts文件,非常方便。但是对于一些没有没有声明文件的第三方模块,用起来会比较麻烦,过程中,我们用到的高德地图就是其中之一,虽然官方推荐使用vue-amap,但是想追求粒度更细的操作,还是原生的api更为方便,下面来记录一下全程的配置过程。

一、引入api文件

这里推荐使用script标签引入,因为这种地图类型的资源普遍都是运行时才用到的,在生产环境中加载也不慢,没必要放进去一起打包,所以用script标签引入会是不错的选择:
在你工程的html模版中:

  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=你的key"></script>
    <title>xxx</title>
  </head>

然后,为了防止打包时把高德纳入,我们需要在webpack中配置,这里以vue.config文件为例(和webpack的配置是一样的,具体差别请看vue-cli文档):

module.exports = {
   
	    //额外的webpack配置使用一个回调函数来返回新的config
    configureWebpack: config => {
   
        config.externals = {
   'AMap': 'AMap'};
    },
}

二、声明文件

既然用了typescript,那么就是想运用到它的类型提醒功能,那么必不可少地需要引入高德地图的声明文件,由于官方也没有给出,我们只能根据api文档来自己书写自己需要用到的函数声明,下面是我们项目中大部分会用到的声明,可以在src目录下新建一个types文件夹专门用于存放声明文件:
src/types/Amap.d.ts:

declare namespace AMap {
   
    /**此对象用于表示地图、覆盖物、叠加层上的各种鼠标事件返回,包含以下字段:
    高德的事件说明文档有问题; 不是 LngLat 类,而是一个普通对象;
    **/
    export class MapsEvent {
   
        /** 发生事件时光标所在处的经纬度坐标 **/
        public lnglat: {
    lng: number, lat: number };

        /** 发生事件时光标所在处的像素坐标 **/
        public pixel: {
    x: number, y: number };

        /** 事件类型。 **/
        public type: string;

        /** 发生事件的目标对象。 **/
        public target: any;
    }
    /** 像素坐标, 确定地图上的一个像素点。 **/
    export class Pixel {
   
        /**构造一个像素坐标对象。**/
        constructor(x: number, y: number);
        /**获得X方向像素坐标**/
        public getX(): number;

        /**获得Y方向像素坐标**/
        public getY(): number;

        /**当前像素坐标与传入像素坐标是否相等**/
        public equals(point: Pixel): boolean;

        /**以字符串形式返回像素坐标对象**/
        public toString(): string;


    }
    /** 地物对象的像素尺寸 **/
    export class Size {
   
        /**构造尺寸对象。参数width: 宽度, height: 长度, 单位: 像素;**/
        constructor(width: number, height: number);
        /**获得宽度。**/
        public getWidth(): number;

        /**获得高度。**/
        public getHeight(): number;

        /**以字符串形式返回尺寸大小对象(自v1.2 新增)**/
        public toString(): string;


    }
    /** 经纬度坐标, 确定地图上的一个点。 **/
    export class LngLat {
   
        /**构造一个地理坐标对象, lng、lat分别代表经度、纬度值**/
        constructor(lng: number, lat: number);
        /**当前经纬度坐标值经度移动w, 纬度移动s, 得到新的坐标。经度向右移为正值, 纬度向上移为正值, 单位为米。(自v1.2 新增)**/
        public offset(w: number, s: number): LngLat;

        /**当前经纬度和传入经纬度或者经纬度数组连线之间的地面距离, 单位为米 相关示例**/
        public distance(lnglat: LngLat | Array<LngLat>): number;

        /**获取经度值。(自v1.2 新增)**/
        public getLng(): number;

        /**获取纬度值。(自v1.2 新增)**/
        public getLat(): number;

        /**判断当前坐标对象与传入坐标对象是否相等**/
        public equals(lnglat: LngLat): boolean;

        /**LngLat对象以字符串的形式返回。**/
        public toString(): string;


    }
    /** 地物对象的经纬度矩形范围。 **/
    export class Bounds {
   
        /**矩形范围的构造函数.参数southWest、northEast分别代表地物对象西南角经纬度和东北角经纬度值。**/
        constructor(southWest: LngLat, northEast: LngLat);
        /**指定点坐标是否在矩形范围内 相关示例**/
        public contains(point: LngLat): boolean;

        /**获取当前Bounds的中心点经纬度坐标。**/
        public getCenter(): LngLat;

        /**获取西南角坐标。**/
        public getSouthWest(): LngLat;

        /**获取东北角坐标**/
        public getNorthEast(): LngLat;

        /**以字符串形式返回地物对象的矩形范围**/
        public toString(): string;


    }
    /** MapOptions **/
    export interface MapOptions {
   
        /**地图视口, 用于控制影响地图静态显示的属性, 如: 地图中心点“center”推荐直接使用zoom、center属性为地图指定级别和中心点(自v1.3 新增)**/
        view?: View2D;

        /**地图图层数组, 数组可以是图层 中的一个或多个, 默认为普通二维地图。当叠加多个图层时, 普通二维地图需通过实例化一个TileLayer类实现(自v1.3 新增)**/
        layers?: Array<any>;

        /**地图显示的缩放级别, 若center与level未赋值, 地图初始化默认显示用户所在城市范围 3D地图下, zoom值, 可以设置为浮点数。(在V1.3.0版本level参数调整为zoom, 3D地图修改自V1.4.0开始生效)**/
        zoom?: number;

        /**地图中心点坐标值**/
        center?: LngLat | number[];

        /**3D模式下的地图旋转角度 */
        rotation?: number;

        /**地图标注显示顺序, 大于110即可将底图上的默认标注显示在覆盖物(圆、折线、面)之上。**/
        labelzIndex?: number;

        /**地图显示的缩放级别范围在PC上, 默认为[3, 18], 取值范围[3-18];在移动设备上, 默认为[3, 19], 取值范围[3-19]**/
        zooms?: Array<any>;

        /**地图语言类型可选值: zh_cn: 中文简体, en: 英文, zh_en: 中英文对照默认为: zh_cn: 中文简体注: 由于图面内容限制, 中文、英文 、中英文地图POI可能存在不一致的情况(自v1.3 新增)**/
        lang?: string;

        /**地图默认鼠标样式。参数defaultCursor应符合CSS的cursor属性规范**/
        defaultCursor?: string;

        /**地图显示的参考坐标系, 取值: 'EPSG3857''EPSG3395''EPSG4326'自V1.3.0移入view对象中**/
        crs?: string;

        /**地图平移过程中是否使用动画(如调用panBy、panTo、setCenter、setZoomAndCenter等函数, 将对地图产生平移操作, 是否使用动画平移的效果), 默认为true, 即使用动画**/
        animateEnable?: boolean;

        /**是否开启地图热点, 默认false 不打开(自v1.3 新增)**/
        isHotspot?: boolean;

        /**当前地图中默认显示的图层。默认图层可以是TileLayer.Satellite等切片地图, 也可以是通过TileLayer自定义的切片图层(自v1.3 废弃)**/
        // defaultLayer?: TileLayer;

        /**地图是否可旋转, 默认false。3D视图默认为true, 2D视图默认false。(V1.3版本新增, 3D视图自V1.4.0开始支持)**/
        rotateEnable?: boolean;

        /**是否监控地图容器尺寸变化, 默认值为false**/
        resizeEnable?: boolean;

        /**是否在有矢量底图的时候自动展示室内地图, PC端默认是true, 移动端默认是false**/
        showIndoorMap?: boolean;

        /**在展示矢量图的时候自动展示室内地图图层, 当地图complete之后可以获取到该对象**/
        // indoorMap?: IndoorMap;

        /**是否支持可以扩展最大缩放级别, 和zooms属性配合使用设置为true的时候, zooms的最大级别在PC上可以扩大到20级, 移动端还是高清19/非高清20**/
        expandZoomRange?: boolean;

        /**地图是否可通过鼠标拖拽平移, 默认为true。此属性可被setStatus/getStatus 方法控制**/
        dragEnable?: boolean;

        /**地图是否可缩放, 默认值为true。此属性可被setStatus/getStatus 方法控制**/
        zoomEnable?: boolean;

        /**地图是否可通过双击鼠标放大地图, 默认为true。此属性可被setStatus/getStatus 方法控制**/
        doubleClickZoom?: boolean;

        /**地图是否可通过键盘控制, 默认为true方向键控制地图平移, "+"和"-"可以控制地图的缩放, Ctrl+“→”顺时针旋转, Ctrl+“←”逆时针旋转。此属性可被setStatus/getStatus 方法控制**/
        keyboardEnable?: boolean;

        /**地图是否使用缓动效果, 默认值为true。此属性可被setStatus/getStatus 方法控制**/
        jogEnable?: boolean;

        /**地图是否可通过鼠标滚轮缩放浏览, 默认为true。此属性可被setStatus/getStatus 方法控制**/
        scrollWheel?: boolean;

        /**地图在移动终端上是否可通过多点触控缩放浏览地图, 默认为true。关闭手势缩放地图, 请设置为false。**/
        touchZoom?: boolean;

        /**可缺省, 当touchZoomCenter=1的时候, 手机端双指缩放的以地图中心为中心, 否则默认以双指中间点为中心**/
        touchZoomCenter?: number;

        /**设置地图的显示样式, 目前支持两种地图样式: 第一种: 自定义地图样式, 如"amap: //styles/d6bf8c1d69cea9f5c696185ad4ac4c86"可前往地图自定义平台定制自己的个性地图样式;第二种: 官方样式模版, 如"amap: //styles/grey"。其他模版样式及自定义地图的使用说明见开发指南**/
        mapStyle?: string;

        /**设置地图上显示的元素种类支持'bg'(地图背景)、'point'(POI点)、'road'(道路)、'building'(建筑物)**/
        features?: Array<any>;

        /**设置地图显示3D楼块效果, 移动端也可使用。推荐使用。**/
        showBuildingBlock?: boolean;

        /**默认为‘2D’, 可选’3D’, 选择‘3D’会显示 3D 地图效果。(自V1.4.0开始支持)**/
        viewMode?: string;

        /**俯仰角度, 默认0, [0, 83], 2D地图下无效 。(自V1.4.0开始支持)**/
        pitch?: number;

        /**是否允许设置俯仰角度, 3D视图下为true, 2D视图下无效。(自V1.4.0开始支持)**/
        pitchEnable?: boolean;

        /**楼块出现和消失的时候是否显示动画过程, 3D视图有效, PC端默认true, 手机端默认false。(自V1.4.0开始支持)**/
        buildingAnimation?: boolean;

        /**调整天空颜色, 配合自定义地图, 3D视图有效, 如‘#ff0000’。(自V1.4.0开始支持)**/
        skyColor?: string;

        /**设置地图的预加载模式, 开启预加载的地图会在适当时刻提前加载周边和上一级的地图数据, 优化使用体验。该参数默认值true。 (自v1.4.4开始支持)**/
        preloadMode?: boolean;

    }

    /** 地图对象类, 封装了地图的属性设置、图层变更、事件交互等接口的类。相关示例 **/
    export class Map {
   
        /**构造一个地图对象, 参数container中传入地图容器DIV的ID值或者DIV对象, opts地图初始化参数对象, 参数详情参看MapOptions列表。**/
        constructor(container: string | HTMLDivElement, opts: MapOptions);
        /**唤起高德地图客户端marker页其中Object里面包含有{ id: "B000A7BD6C", POIIDname: String, 必要参数location: LngLat|position属性 必须参数}**/
        public poiOnAMAP(obj: any): void;

        /**唤起高德地图客户端marker详情页其中Object里面包含有{ id: "B000A7BD6C", POIIDname: String, 必要参数location: LngLat|position属性 必须参数}**/
        public detailOnAMAP(obj: any): void;

        /**获取当前地图缩放级别, 在PC上, 默认取值范围为[3, 18];在移动设备上, 默认取值范围为[3-19]3D地图会返回浮点数, 2D视图为整数。(3D地图自V1.4.0开始支持)**/
        public getZoom(): number;

        /**获取地图图层数组, 数组为一个或多个图层(自v1.3 新增)**/
        public getLayers(): Array
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值