@vuemap/vue-amap@vuemap/vue-amap
  • 1.x
  • vue2版本
更新日志
  • github
  • gitee
  • JSAPI文档
  • JSAPI示例地址
  • Loca API文档
  • Loca 示例地址
  • 掘金
  • CSDN
  • 1.x
  • vue2版本
更新日志
  • github
  • gitee
  • JSAPI文档
  • JSAPI示例地址
  • Loca API文档
  • Loca 示例地址
  • 掘金
  • CSDN
@vuemap/vue-amap
@vuemap/vue-amap-loca
@vuemap/vue-amap-extra
  • 基础

    • 简介
    • 安装
    • 脚本初始化
    • 兼容高德原生 SDK
    • Nuxt服务端渲染
    • 捐赠支持
    • 常见问题
    • 从1.x迁移
    • 离线JSAPI
    • 内置API
    • Typescript支持
  • 自定义

    • 自定义地图组件
    • 包装地图组件
  • 地图

    • 地图
    • 获取高德地图实例
    • 地图插件
  • hooks

    • IP定位获取当前城市信息
    • 天气查询服务
    • 定位
  • 控件

    • 比例尺
    • 地图操作工具
    • 地图控制
    • 地图类型切换
    • 鹰眼控件
    • POI搜索
    • 定位
  • 高德官方图层

    • 默认图层
    • 切片图层
    • 实时交通图层
    • 卫星图层
    • 路网图层
    • 建筑楼块3D图层
    • 简易行政区划图
    • 室内图层
  • 行业标准图层

    • WMS图层
    • WMTS图层
    • 矢量瓦片块图层
  • 自有数据图层

    • 矢量标记图层
    • 热力图
    • 标注层
    • 自定义图层
    • 灵活切片图层
    • 图片图层
    • Canvas图层
    • Video图层
    • 3d自定义图层
    • 3DTiles图层
    • 区划聚合图层
    • 自定义瓦片纠偏图层
  • 点标记

    • 点标记
    • 海量标注
    • 文本
    • 灵活点标记
    • 点聚合
    • 海量点
  • 窗体

    • 信息窗体
  • 矢量图形

    • 多边形
    • 折线
    • 贝塞尔曲线
    • 圆形
    • 椭圆
    • 矩形
    • GeoJSON
  • 工具

    • 鼠标工具插件
  • @vuemap/vue-amap-loca组件

    • Loca
    • 环境光
    • 平行光
    • 点光
    • 圆点图层
    • 图标图层
    • 棱柱图层
    • 线图层
    • 面图层
    • 链接线图层
    • 热力图
    • 蜂窝网格图
    • 网格图
    • 贴地点图层
    • 轨迹线图层
    • 连接飞线图层
    • 垂直于大地表面的Marker图层
    • 激光图层
  • @vuemap/vue-amap-extra组件

    • ThreeJS的图层
    • Gltf模型加载
    • 灯光

      • 环境光
      • 平行光
      • 半球光
      • 点光源
      • 聚光灯
    • ThreeJS播放视频
    • ThreeJS面图层
    • 开源3dtiles方案

常见问题


下面主要记录在使用@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%即可。

最后更新时间:
贡献者: gyy, gu, guyangyang, 苏格拉底
Prev
捐赠支持
Next
从1.x迁移