高德地图报错：禁止多种API加载方式混用（vue3）

最新推荐文章于 2024-08-08 23:04:45 发布
最新推荐文章于 2024-08-08 23:04:45 发布
阅读量2.5k 收藏 6
点赞数 12
文章标签： javascript 开发语言 ecmascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fantasywt/article/details/130519564
版权
文章描述了一个开发者遇到的问题，即高德地图报错提示禁止多种API加载方式混用，尽管开发者自认为只使用了一个API。通过使用`AMapLoader.reset()`函数在加载前重置，问题得到了解决，但具体原因未明。
摘要由CSDN通过智能技术生成

原因： 高德地图报错：禁止多种API加载方式混用

在这里插入图片描述

很奇怪，我没有使用多种api，只有一个，找了很久没有发现有其他地方引用
版本是这个：“@amap/amap-jsapi-loader”: “^1.0.1”

解决办法

很简单也很粗暴
在load之前加一个reset，反正我有效，到底什么原因我也不知道

  AMapLoader.reset()

在这里插入图片描述

Fantasywt
关注
  • 12
    点赞
  • 踩
  • 6
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
npm run dev 突然报没有依赖,npm install 下载报错network ‘proxy‘ config is set properly. See: ‘npm help config‘
qq_53001158的博客
07-24 935
npm run dev 突然报没有依赖,npm install 下载报错,network 'proxy' config is set properly. See: 'npm help config'
Vue中高德地图获取经纬度及逆地理解析的两种方式CDN或NPM(协议必须是https) 否则定位会一直失败
qq_52245553的博客
06-29 1359
Vue中高德获取经纬度及逆地理解析的两种方式CDN或NPM，复制即可
Vue项目报错：Uncaught SyntaxError: Unexpected token <
10-17
主要介绍了Vue项目报错：Uncaught SyntaxError: Unexpected token <，在引入第三方依赖的 JS 文件时，遇到的一个问题，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue2使用amap/amap-jsapi-loader高德地图AMapLoader设置一个标记点
weixin_44780502的博客
02-21 2685
使用高德地图设置一个标记点。
高德地图会报高德地图加载报错-------禁止多种API加载方式混用
2303_77072102的博客
10-17 1932
【代码】高德地图会报高德地图加载报错-------禁止多种API加载方式混用。
高德地图加载报错-------禁止多种API加载方式混用
weixin_50061893的博客
07-23 1万+
提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档 文章目录前言一、问题描述二、寻找问题二、解决方法总结 前言 最近在做一个打卡功能,需要用到地图组件.在引入地图的时候加载地图遇到问题. 一、问题描述 通过amap-jsapi-loader的方式渲染地图但是报错,禁止多种API加载方式混用.详情如下图 二、寻找问题 通过查找最后发现报错原因是因为,前辈的代码在public下通过cdn的方式引入了高德的js文件,导致渲染冲突.但是寻找了好久 二、解决方法 注释或者删掉index下引入
若依前端Vue3引入高德地图，控制台报错--禁止多种API混用
最新发布
qq_69304031的博客
08-08 162
AMapLoader.reset() 需要把这个reset一下。key和安全密钥记得也要填写正确。
Vue中高德地图多版本混用
weixin_42776027的博客
07-12 1218
Vue中使用的是amap-jsapi-loader包，在src/index.ts文件中有一个reset方法，调用后会删除已加载的AMap、AMapUI和Loca，其他页面在调用别的版本地图时就会重新加载，而不是报错了。调用的方法：AMapLoader.reset()，别忘了先引入import AMapLoader from '@amap/amap-jsapi-loader'。...
高德地图 JS API 加载多个插件
grootbaby
03-29 4076
高德地图javascript api提供以js形式调用api,确实给我们开发者带来了许多方便,但是在使用过程中发现需要使用高德的多个插件，自己试了很久，只能加载一种插件，如果同时其他地方使用其他插件，不能使用。调用api如下: <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请...
高德地图两种引入方式
seimeii的博客
11-22 2913
第一种 npm方式引入 npm i @amap/amap-jsapi-loader --save main.js import AMapLoader from '@amap/amap-jsapi-loader'; AMapLoader.load({ "key": "78451e5319b52850b9b75aafe8961dc3", // 申请好的Web端开发者Key，首次调用 load 时必填 "version": "1.4.15", // 指定要加载的 JSAPI 的版本，缺省时默认为
Vue项目中插入高德地图JS API与地图的相关设置
weixin_60131763的博客
02-12 2659
高德地图API官网：高德开放平台 | 高德地图API。由于博主是基于前端 Vue 框架进行开发的，所以针对地图 JavaScript API 结合 Vue 展开介绍。 一、案例效果 二、开发准备 需要注意想要使用 JS API 必须注册账号并获取 key 值。 1. 注册高德开放平台账号 正常输入个人信息注册即可。 2. 创建应用添加 key 值 注册成功之后，进入控制台，然后点击创建新应用； 填写名称应用名称和类型之后就可......
用高德地图API开发一个简单基础的WebGIS系统网站源码【适合小白 上传即用】
04-05
网站主题是GIS考研院校信息交互。 使用原生JS+高德地图API实现简单的WebGIS，功能有： ① 基本地图功能：放大缩小，图层管理，地图测量，几何绘制，上下文菜单； ② 路线规划； ③ POI搜索； ④ 考研院校分布点信息交互； ⑤ 热力图。 基本上都是从官方给的案例中修改过来的（还有一点点的逻辑bug未修改，交了作业就懒得弄了哈哈哈）。其中图层管理功能这一块，由于图层管理组件是用的API2.0，而热力图和分布点图层是使用LOCA 数据可视化API写的，两者不兼容，需要重写图层切换的方法！ ----- ---- ------- 写起来挺好玩的，本来想写一篇帖子的，但是写完实验报告就懒得动手了哈哈哈哈哈哈哈。如果有感兴趣源码的同学，可以下载看看
常见安装npm失败问题
Mark_da的博客
06-26 870
安装npm问题
高德地图api @amap/amap-jsapi-loader封装成方法(定位、点标记、路径规划、搜索等) 适用于vue等框架
微若年华的博客
08-05 1万+
这里写自定义目录标题欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题，有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能，丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Mar
Vue 高德地图（@amap/amap-jsapi-loader）的基本使用：添加标记、POI关键字搜索、路线规划...(方法一)
qq_37831545的博客
09-26 1万+
Vue高德地图的基本事件与使用（添加标记、POI关键字搜索、路线规划）地图鼠标点击点图，添加标记,POI关键字搜索，驾车路线规划（路线展示、途经点等）
【前端异常】JavaScript错误处理：分析 Uncaught(in promise) error
热门推荐
No8g攻城狮的博客
11-13 4万+
Uncaught(in promise) error 表示一个Promise被rejected且未处理。});在上面示例中，创建了一个Promise并使用reject方法将其状态设置为rejected。但是，没有在后续代码中处理这个错误，此时就会导致 Uncaught(in promise) error。
vue：Failed to resolve componentxxx
m0_67402564的博客
03-09 1315
vue 项目中控制台报警告： [Vue warn]: Failed to resolve component: xxx If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement. at... 大概率是没有注册组件，注册即可 ...
最新高德地图 以npm方式引入
知无涯
05-12 1万+
官方推荐使用JSAPILoader(推荐) JSAPI Loader是高德提供的 API 加载器，可帮助开发者快速定位、有效避免加载引用地图 JSAPI 各种错误用法，具有以下特性： 支持以 普通JS 和 npm包 两种方式使用； 有效避免错误异步加载导致的 JSAPI 资源加载不完整问题； 对于加载混用多个版本 JSAPI 的错误用法给予报错处理； 对于不合法加载引用 JSAPI 给予报错处理； 支持指定 JSAPI 版本； 支持插件加载； 允许多次执行加载操作，网络资源不会重...
程序防止多开的几种常见方法
weixin_34258782的博客
02-20 837
windows系统下，程序防止多开的几种常见方法： 1)使用FindWindow API函数。 通过查找窗口标题(或/和类名)来判断程序是否正在运行。如果找到了，表明程序正在运行，这时可退出程序，达到不重复运行的效果；反之表明程序是第一次运行。 这种方法不适用于以下情况，程序的标题是动态变化的、系统中运行了相同标题（或/和类名）的程序 2)Mutex/Event/Semaphore 通过互斥对象...
vue3报错：Assignment to constant variable.
05-26
这个错误通常发生在你尝试修改一个已经声明为常量的变量。在 Vue3 中，你可以通过 `const` 或 `let` 关键字来声明变量。如果你声明的是一个常量，那么就不能再次对它进行赋值。例如： ```js const foo = 'bar'; foo = 'baz'; // 这里会报错：Assignment to constant variable. ``` 要解决这个问题，你需要修改代码，确保不对已经声明为常量的变量进行赋值操作。如果需要修改变量的值，你可以使用 `let` 关键字来声明变量。示例： ```js let foo = 'bar'; foo = 'baz'; // 这里没有问题 ```
评论 3
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值