共计 4989 个字符，预计需要花费 13 分钟才能阅读完成。
踩坑记录：最近项目中用到了 @vuemap/vue-amap 高德地图组件，正常配置完成后，引入官方示例，地图正常出现，可以正常编译不出错，但是代码提示给我整了个这。
于是，开始查资料，为什么会出现这个情况，然后是因为在 main.js 导入的名字 VueMap 和高德自己全局暴露 AMap 不是一码事
这是官方给的解决方案
再查资料，然后发现有这么几种方法可以解决
第一种，在 eslint 的配置文件添加 globals 进行全局忽略，针对我的情况，我试了不管用
第二种，如果不是 eslint 语法检测的问题，那就是 TS 的语法检测了，可以设置 declare let Amap :any 或者使用 TS 的单行忽略“// @ts-ignore”就跟写注释一样，我试了结果可行，但是因为我要使用很多次 new Amap，所以暂时作为备选方案
第三种，既然 Amap 没有找不到，那我们就自己对外暴露一个 Amap，里面包含常用的地图 API 不就行了，创建该文件 srctypesAmap.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): 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
/** 地图显示的缩放级别, 若 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
/** 地图语言类型可选值: 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
/** 设置地图显示 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 开始支持)**/
原文地址: VUE3 Ts 使用高德地图组件 @vuemap/vue-amap 语法检测 Amap is not defind
正文完
