首页 前端知识 VUE3 Ts使用高德地图组件@vuemap/vue-amap语法检测Amap is not defind

VUE3 Ts使用高德地图组件@vuemap/vue-amap语法检测Amap is not defind

2024-10-26 09:10:41 前端知识 前端哥 1001 385 我要收藏

踩坑记录:最近项目中用到了@vuemap/vue-amap高德地图组件,正常配置完成后,引入官方示例,地图正常出现,可以正常编译不出错,但是代码提示给我整了个这。

于是,开始查资料,为什么会出现这个情况,然后是因为在main.js导入的名字VueMap和高德自己全局暴露AMap不是一码事

这是官方给的解决方案

 

再查资料,然后发现有这么几种方法可以解决

第一种,在eslint的配置文件添加globals进行全局忽略,针对我的情况,我试了不管用

第二种,如果不是eslint语法检测的问题,那就是TS的语法检测了,可以设置declare let Amap :any 或者使用TS的单行忽略 “// @ts-ignore” 就跟写注释一样,我试了结果可行,但是因为我要使用很多次new Amap ,所以暂时作为备选方案

 

 第三种,既然Amap没有找不到,那我们就自己对外暴露一个Amap,里面包含常用的地图API不就行了,创建该文件src\types\Amap.d.ts,在tsconfig.json配置文件添加

下面是Amap.d.ts的内容,可以直接复制

declare namespace AaMap {
  /**此对象用于表示地图、覆盖物、叠加层上的各种鼠标事件返回,包含以下字段:
  高德的事件说明文档有问题; 不是 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开始支持)**/
  
转载请注明出处或者链接地址:https://www.qianduange.cn//article/19175.html
标签
评论
发布的文章

在C#中使用JSON

2024-11-04 10:11:05

JSON串

2024-11-04 10:11:57

JSON教程(非常详细)

2024-05-08 10:05:36

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!