常见问题

---

下面主要记录在使用@vuemap/vue-amap时经常碰到的问题和解决方案。

地图不加载

在地图组件已经在main.js中引入并且初始化的前提下出现地图不加载情况，按下面步骤进行检查

• 检查el-amap父容器（div）是否有高度，可以使用浏览器的F12检查
• 项目中是否使用mockjs去拦截所有请求，mock功能有可能会拦截地图的加载请求
• 地图使用的key必须是Web端(JS API)

地图接口提示 INVALID_USER_SCODE

地图接口提示INVALID_USER_SCODE时代表初始化地图的时候没有配置安全密钥或者安全代理，可以在initAMapApiLoader时候传入相应参数， 配置安全密钥或者安全代理只需要配置一个即可，推荐配置安全代理。官方文档地址，示例：

initAMapApiLoader({
  key: 'YOUR_KEY',
  serviceHost: 'HOST',
  securityJsCode: 'CODE' // serviceHost与securityJsCode二选一
});

TS提示AMap找不到

在使用TS开发地图时，一旦使用了原生AMap会提示AMap找不到，可以在自己的全局的.d.ts文件中加上

declare let AMap: any;
declare let Loca: any;

自动导入失败

在使用unplugin-vue-components 、 unplugin-auto-import 、 @vuemap/unplugin-resolver做组件自动导入功能的时候出现报错或者自动导入不生效

当出现报错时：

/* unplugin-vue-components disabled */import { ElAmap as __unplugin_components_0 } from 'element-plus/es';import 'element-plus/es/components/amap/style/css'; ^
import { ref } from 'vue';
import { defineComponent as _defineComponent } from "vue";

出现该报错是因为使用了ElementPlusResolver，使用该resolver时需要添加过滤参数：

ElementPlusResolver({
        exclude: /^ElAmap[A-Z]*/
      })

当出现自动导入没有生效时，基本都是因为使用了tsx的原因，unplugin-vue-components默认不检查.tsx后缀的文件，需要在初始化的时候加上参数：

Components({
  resolvers: [VueAmapResolver()],
  include: [/\.vue$/, /\.vue\?vue/, /\.tsx$/, /\.tsx\?tsx/],
})

地图拖拽卡顿

当出现地图拖拽卡顿时可以从以下几个方向检查

• 地图的实例map对象是否被vue管理，比如赋值给ref或者reactive
• 地图上的marker组件是否过多，marker是基于dom实现，当点位太多时会导致拖拽卡顿，比如几百个点
• loca下的图层是否很多，当图层太多时，可以把不需要事件的图层组件的initEvents属性设置为false，默认情况下每个loca下的组件都会启动事件功能

地图标点误差很大

windows 11兼容性不好，导致系统缩放是自定义，地图缩放是100%。在设置->系统->屏幕，找到缩放，调整回100%即可。