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

最新推荐文章于 2025-06-13 15:38:26 发布
最新推荐文章于 2025-06-13 15:38:26 发布
阅读量1.5w 收藏 10
点赞数 9
CC 4.0 BY-SA版权
分类专栏： 高德地图 大图显示 文章标签： javascript 前端 cdn
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_50061893/article/details/119025972

提示：文章写完后，目录可以自动生成，如何生成可参考右边的帮助文档

文章目录

前言

最近在做一个打卡功能,需要用到地图组件.在引入地图的时候加载地图遇到问题.

一、问题描述

通过amap-jsapi-loader的方式渲染地图但是报错,禁止多种API加载方式混用.详情如下图

引入高德
报错信息

二、寻找问题

通过查找最后发现报错原因是因为,前辈的代码在public下通过cdn的方式引入了高德的js文件,导致渲染冲突.但是寻找了好久
在这里插入图片描述

三、解决方法

注释或者删掉index下引入高德的代码就好了

在这里插入图片描述
成功渲染
在这里插入图片描述

总结

高德地图引入方式不能混用,如果禁止多种API加载方式混用报错信息,不妨寻找一下是不是 别的地方也引入了高德地图

vue使用高德地图搜索地址添加标记marker,定位，拖拽选址功能
总结前端开发中遇到的问题，分享前端知识
04-04 5041
需求：点击输入框弹窗地图弹窗，输入框输入地址模糊搜索列表结果，点击列表添加相应得marker标记，并且添加标记拖拽选址功能。 项目中引入了element-ui,自行安装引入，这里不写了...... JSAPI 的加载 JS API 2.0 版本提供了两种方案引入地图 JSAPI： 1. 使用官网提供的JSAPI Loader进行加载； 2. 以常规JavaScript脚本的方式加载； 注意：为避免地图数据协议和前端资源不匹配导致页面运行报错，只允许在线加.............
vue使用高德地图实现实时天气预报功能
总结前端开发中遇到的问题，分享前端知识
05-31 2241
需求：根据手机定位功能，使用高德地图实现定位当前城市的天气预报功能。
从达标到卓越 —— API 设计之道
哲
03-08 461
转载自：http://taobaofed.org/blog/2017/02/16/a-guide-to-api-design/ 新技术层出不穷，长江后浪推前浪，而浪潮褪去后能留下来的，是一些经典的设计思想。 在前端界，以前有远近闻名的 jQuery，近来有声名鹊起的 Vue.js。这两者叫好又叫座的原因固然有很多，但是其中有一个共同特质不可忽视，那便是它们的 API 设计 非常优雅。
高德地图会报高德地图加载报错-------禁止多种API加载方式混用
2303_77072102的博客
10-17 2852
【代码】高德地图会报高德地图加载报错-------禁止多种API加载方式混用。
百度地图、高德地图API使用
weixin_45115367的博客
06-13 1027
为了防止您的API密钥被盗用，建议您配置refer白名单，只有在白名单中的域名才能使用该密钥调用API。首先，你需要在高德地图开放平台注册账号并创建一个应用，以获取API Key（也称为“Key”或“密钥”）。2.点击“创建应用”，填写应用名称，选择应用类型（通常选择“浏览器端”）。标签引入百度地图的JavaScript文件，并使用您的API密钥。1.登录百度地图开放平台，进入“应用管理” -> “我的应用”。3.提交后，您将获得一个唯一的API密钥（AK），表示只有您的域名下的网站才能使用该密钥。
【Vue3加载高德地图，第一次加载不显示地图，控制台报错：“禁止多种API加载方式混用”】
weixin_53196143的博客
12-11 752
但是我在代码中也没找到其他类似cdn方式的加载，在网上搜了一下，加上这个就没问题了。在加载高德地图时发现，地图不显示，控制台报了一个“禁止多种API加载方式混用”Vue3加载高德地图控制台报错：“禁止多种API加载方式混用”如有知道问题的大佬还请多多指教！
高德地图报错：禁止多种API加载方式混用（vue3）
Fantasywt的博客
05-06 3847
vue3使用高德地图报错：禁止多种API加载方式混用
高德地图加载提示“禁止多种API加载方式混用”
ccxbt的博客
03-19 455
高德地图加载提示“禁止多种API加载方式混用”的解决方法
若依前端Vue3引入高德地图，控制台报错--禁止多种API混用
qq_69304031的博客
08-08 615
AMapLoader.reset() 需要把这个reset一下。key和安全密钥记得也要填写正确。
高德地图 JS API 加载多个插件
grootbaby
03-29 4326
高德地图javascript api提供以js形式调用api,确实给我们开发者带来了许多方便,但是在使用过程中发现需要使用高德的多个插件，自己试了很久，只能加载一种插件，如果同时其他地方使用其他插件，不能使用。调用api如下: <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请...
引入高德地图提示禁止多种API加载方式混用
g1437353759的博客
02-25 203
【代码】引入高德地图提示禁止多种API加载方式混用。
Vue-Cli 3.0 中配置高德地图的两种方式
12-04
vue 中使用高德地图有两种方式 一、vue-amap 组件 官网： https://elemefe.github.io/vue-amap/#/ 开始的时候是打算用这个组件做地图功能的，但是尝试之后存在些问题，所以就放弃了，可能是我的使用方式不对。我所...
用高德地图API开发一个简单基础的WebGIS系统网站源码【适合小白 上传即用】
04-05
网站主题是GIS考研院校信息交互。 使用原生JS+高德地图API实现简单的WebGIS，功能有： ① 基本地图功能：放大缩小，图层管理，地图测量，几何绘制，上下文菜单； ② 路线规划； ③ POI搜索； ④ 考研院校分布点信息交互； ⑤ 热力图。 基本上都是从官方给的案例中修改过来的（还有一点点的逻辑bug未修改，交了作业就懒得弄了哈哈哈）。其中图层管理功能这一块，由于图层管理组件是用的API2.0，而热力图和分布点图层是使用LOCA 数据可视化API写的，两者不兼容，需要重写图层切换的方法！ ----- ---- ------- 写起来挺好玩的，本来想写一篇帖子的，但是写完实验报告就懒得动手了哈哈哈哈哈哈哈。如果有感兴趣源码的同学，可以下载看看
Error in mounted hook: "ReferenceError: AMap is not defined" fo
06-13
ReferenceError: AMap is not defined AMap未定义
执行以下代码时候 var vectorSource = new VectorSource({ format: new GeoJSON(), url: url, loader: function (extent, success, failure) { console.log(url) var xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.setRequestHeader('Authorization', 'Basic YWRtaW46Z2hqdDgzMg=='); var onError = function () { vectorSource.removeLoadedExtent(extent); failure(); } xhr.onerror = onError; xhr.onload = function () { if (xhr.status == 200) { var features = vectorSource.getFormat().readFeatures(xhr.responseText); vectorSource.addFeatures(features); that.tableData = features; success(features); } else { onError(); } } xhr.send(); }, });报错t.getSourceConfig is not a function at x.addLayer (maps?callback=___onAPILoaded&v=2.0&key=ed2ea36f8564541569c370254845d93d&plugin=AMap.DistrictSearch,AMap.Scale,AMap.HawkEye,AMap.ToolBar,AMap.Geolocation,AMap.Driving:1:944916) at addPoint (gaodemap.js:192:1) at addWMSLayer (gaodemap.js:26:1)
最新发布
07-11
根据错误信息，我们可以推断可能是由于高德地图API的版本问题、使用方式不正确或Vue组件生命周期导致的问题。 ### 解决步骤 #### 1. **检查高德地图API版本** 确保使用的高德地图JavaScript API版本是稳定且与Vue...
Vue中高德地图多版本混用
weixin_42776027的博客
07-12 1415
Vue中使用的是amap-jsapi-loader包，在src/index.ts文件中有一个reset方法，调用后会删除已加载的AMap、AMapUI和Loca，其他页面在调用别的版本地图时就会重新加载，而不是报错了。调用的方法：AMapLoader.reset()，别忘了先引入import AMapLoader from '@amap/amap-jsapi-loader'。...
高德地图两种引入方式
seimeii的博客
11-22 3570
第一种 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中使用原生高德地图
weixin_44042792的博客
01-15 728
1. 引入高德地图 html中 <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.15&key=你的key&plugin=AMap.Geocoder"></script> 2.配置 vue.config.js configureWebpack: { externals: { 'AMap': 'AMap', 'AMapUI': 'AMapUI' } } 3...
报`Uncaught (in promise)`错误解决办法
热门推荐
weixin_46721670的博客
09-26 6万+
使用了promise,但是在使用的过程中报错误，第一次遇到这种错误，所以在此记录下，方便以后解决问题只要在 new Promise 后面加上，就不会报错了。
<AMap JSAPI> KEY异常，错误信息：USERKEY_PLAT_NOMATCH
04-02
<think>好的，我现在需要帮助用户解决AMap JSAPI中出现的USERKEY_PLAT_NOMATCH错误。首先，我得仔细分析用户提供的引用内容，找出错误的原因和解决方法。 根据引用[2]，USERKEY_PLAT_NOMATCH错误是因为用户使用的密钥（User Key）与绑定的平台不匹配。高德地图的高级版API要求每个密钥都关联到特定的平台，比如Web端、移动端等。如果用户在一个不匹配的平台上使用这个密钥，就会报错。 然后看引用[3]，里面提到如果参数报这个错误，可能是因为开发者申请的是JS API的key，却用来调用Web服务接口。这说明不同类型的API需要对应不同的密钥。比如，JS API的密钥只能用于前端JavaScript，而Web服务的API需要另一个密钥，用于后端调用。 接下来，用户的问题是如何解决这个错误。根据引用中的信息，解决方案应该包括检查密钥类型是否正确，确认调用的API接口是否匹配，以及核对安全设置中的域名或IP白名单是否配置正确。 另外，用户提供的示例代码中，AMapLoader.load使用了key，这里需要确认这个key是否为JS API的密钥，并且没有错误地用于其他类型的服务。比如，如果用户不小心把Web服务的key用在了JS API上，就会导致这个错误。 可能的解决步骤应该是：首先检查申请的是哪种类型的密钥，然后核对代码中的key是否正确，再确认调用的API接口是否与密钥类型一致。如果都正确，再检查安全设置是否有误，比如域名是否加入了白名单，或者是否需要关闭IP白名单功能。 还需要注意，用户可能在申请密钥时选错了平台类型，比如应该选“Web端(JS API)”却选了其他类型。此外，如果用户同时使用多个高德服务，比如JS API和Web服务，可能需要分别申请不同的密钥，不能混用。 最后，确保用户按照高德地图的文档正确配置所有参数，特别是key和plugins部分，避免拼写错误或遗漏必要的插件，比如AMap.Geocoder。如果有必要，建议用户参考高德的官方文档或联系技术支持进行进一步排查。</think>### AMap JSAPI USERKEY_PLAT_NOMATCH 错误原因及解决方案 #### 错误原因 该错误表示**用户密钥与使用平台不匹配**。高德地图API对密钥（User Key）的调用平台有严格限制： 1. 若申请的是**JS API密钥**，则只能用于前端地图加载、地理编码等浏览器端功能[^3] 2. 若申请的是**Web服务密钥**，则仅适用于服务端接口调用（如通过经纬度获取地址信息等）[^1] 3. 每个密钥需在控制台绑定**安全域名/IP白名单**，未正确配置会触发此错误[^2] #### 解决方案 1️⃣ **检查密钥类型** ```javascript // 正确使用JS API密钥示例 AMapLoader.load({ key: "xxxxxxxxxxxxxxxx", // 必须是「Web端(JS API)」类型的密钥 plugins: ["AMap.Geocoder"] }); ``` 2️⃣ **核对接口匹配性** - 前端地图渲染 → JS API密钥 - 后端服务调用 → Web服务密钥 - 混合使用会导致`USERKEY_PLAT_NOMATCH`[^3] 3️⃣ **配置安全设置** 登录[高德开放平台控制台]，在「应用管理」中： - 添加当前域名到**Web端(JS API)**的「安全设置」 - 若使用Web服务接口，需配置服务器IP白名单 4️⃣ **常见排查步骤** ```mermaid graph TD A[检查密钥类型] -->|正确| B[检查域名/IP白名单] A -->|错误| C[重新申请对应类型密钥] B -->|未配置| D[添加安全域名] B -->|已配置| E[验证密钥字符串拼写] ``` #### 注意事项 - 测试阶段可暂时关闭IP白名单功能 - JS API密钥以「Web端」开头，Web服务密钥以「服务端」开头 - 密钥需通过`AMapLoader.load`加载，不可直接拼接到URL参数中
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值