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

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

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

文章目录

前言

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

一、问题描述

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

引入高德
报错信息

二、寻找问题

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

三、解决方法

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

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

总结

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

冲动消费
关注
  • 9
    点赞
  • 踩
  • 10
    收藏
    觉得还不错? 一键收藏
  • 11
    评论
专栏目录
高德地图会报高德地图加载报错-------禁止多种API加载方式混用
2303_77072102的博客
10-17 1438
【代码】高德地图会报高德地图加载报错-------禁止多种API加载方式混用。
Vue中高德地图多版本混用
weixin_42776027的博客
07-12 1135
Vue中使用的是amap-jsapi-loader包，在src/index.ts文件中有一个reset方法，调用后会删除已加载的AMap、AMapUI和Loca，其他页面在调用别的版本地图时就会重新加载，而不是报错了。调用的方法：AMapLoader.reset()，别忘了先引入import AMapLoader from '@amap/amap-jsapi-loader'。...
使用高德地图JS API 开发一些常见使用问题（急救包）
最新发布
weixin_45511682的博客
05-31 1307
记录高德地图JS API 一些使用问题 #版本 #密钥（_AMapSecurityConfig.securityJsCode）、key 、域名白名单、 #getBounds()、 #setLimitBounds、#zoom
用高德地图API开发一个简单基础的WebGIS系统网站源码【适合小白 上传即用】
04-05
网站主题是GIS考研院校信息交互。 使用原生JS+高德地图API实现简单的WebGIS，功能有： ① 基本地图功能：放大缩小，图层管理，地图测量，几何绘制，上下文菜单； ② 路线规划； ③ POI搜索； ④ 考研院校分布点信息交互； ⑤ 热力图。 基本上都是从官方给的案例中修改过来的（还有一点点的逻辑bug未修改，交了作业就懒得弄了哈哈哈）。其中图层管理功能这一块，由于图层管理组件是用的API2.0，而热力图和分布点图层是使用LOCA 数据可视化API写的，两者不兼容，需要重写图层切换的方法！ ----- ---- ------- 写起来挺好玩的，本来想写一篇帖子的，但是写完实验报告就懒得动手了哈哈哈哈哈哈哈。如果有感兴趣源码的同学，可以下载看看
高德地图报错：禁止多种API加载方式混用（vue3）
Fantasywt的博客
05-06 2277
vue3使用高德地图报错：禁止多种API加载方式混用
vue中使用原生高德地图
weixin_44042792的博客
01-15 634
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...
高德地图 JS API 加载多个插件
grootbaby
03-29 4026
高德地图javascript api提供以js形式调用api,确实给我们开发者带来了许多方便,但是在使用过程中发现需要使用高德的多个插件，自己试了很久，只能加载一种插件，如果同时其他地方使用其他插件，不能使用。调用api如下: <script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申请...
报`Uncaught (in promise)`错误解决办法
热门推荐
weixin_46721670的博客
09-26 6万+
使用了promise,但是在使用的过程中报错误，第一次遇到这种错误，所以在此记录下，方便以后解决问题只要在 new Promise 后面加上，就不会报错了。
Vue-Cli 3.0 中配置高德地图的两种方式
12-04
vue 中使用高德地图有两种方式 一、vue-amap 组件 官网： https://elemefe.github.io/vue-amap/#/ 开始的时候是打算用这个组件做地图功能的，但是尝试之后存在些问题，所以就放弃了，可能是我的使用方式不对。我所...
vue-cli中使用高德地图的方法示例
10-17
主要介绍了vue-cli中使用高德地图的方法示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
vue 使用高德地图vue-amap组件过程解析
12-10
这篇文章主要介绍了vue 使用高德地图vue-amap组件过程解析,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 首先 npm install -S vue-amap 然后在 main.js ...
swift-iOS仿链家地图找房-高德地图找房-需要自行用pod集成地图api
08-15
在iOS应用开发中，"swift-iOS仿链家地图找房-高德地图找房-需要自行用pod集成地图api" 这个项目涉及到的主要知识点是利用Swift编程语言结合高德地图API来实现类似链家地图找房的功能。在这个过程中，开发者需要掌握...
高德省市区json数据-gaode-area
08-17
高德地图是中国知名的导航及位置服务提供商，其提供的省市区数据对于开发地理位置相关的应用非常有价值。例如，开发者可以利用这些数据实现地址选择器、定位服务、距离计算等功能。JSON文件“gaode-area.json”是...
【前端异常】JavaScript错误处理：分析 Uncaught(in promise) error
No8g攻城狮的博客
11-13 3万+
Uncaught(in promise) error 表示一个Promise被rejected且未处理。});在上面示例中，创建了一个Promise并使用reject方法将其状态设置为rejected。但是，没有在后续代码中处理这个错误，此时就会导致 Uncaught(in promise) error。
Uncaught (in promise)解决方法
weixin_42596246的博客
01-10 7691
"Uncaught (in promise)" 是 JavaScript 的一种错误，通常是在执行 Promise 时发生的。解决方法可能有以下几种： 在 catch 块中处理错误。例如： somePromise() .then(function(result) { // 处理结果 }) .catch(function(error) { // 处理错误 }); ...
Uncaught (in promise)的解决方法，可能原因
有问题可关注公众号：前端研究院 后台输入问题回复
06-27 1万+
Uncaught (in promise)的解决方法，可能原因
19.混合使用选项和组合API需要注意哪些
粉丝们务必加入微信粉丝群
09-13 1236
所以，如果使用 Vue3 来开发项目的话，建议大家还是按官方推荐方式：使用组合API。函数中， 我们不能访问选项 API 中的属性，也不能使用。返回的属性可以被在选项API中使用。啥意思呢，我们来看个例子，假设我们有一个。同样，我们来看个例子，我们新建一个。在 User 组件中，我们声明一个。获取到对应的值，然后转成大写。
Uncaught (in promise) 的解决方法
a5252145的博客
10-18 5万+
Uncaught (in promise) 的解决方法 请求后面加catch(err=>{})即可。 this.$axios.post(url,formData).then(res => { }) .catch(err => { })
高德地图api 添加图例
09-04
您可以使用高德地图API的"控件"功能来添加图例。以下是一个简单的示例代码，演示如何在地图上添加一个自定义的图例： ```html <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>高德地图API 添加图例</title> <style> #legend { position: absolute; top: 10px; right: 10px; background-color: white; padding: 10px; border: 1px solid #ccc; font-family: Arial, sans-serif; font-size: 12px; } </style> </head> <body> <div id="map" style="width: 100%; height: 500px;"></div> <div id="legend"></div> <script src="https://webapi.amap.com/maps?v=1.4.15&key=您的高德地图API密钥"></script> <script> var map = new AMap.Map('map', { center: [116.397428, 39.90923], zoom: 13 }); var legend = document.getElementById('legend'); var icons = [ { label: '标记1', color: 'red' }, { label: '标记2', color: 'blue' }, { label: '标记3', color: 'green' } ]; icons.forEach(function(icon) { var item = document.createElement('div'); item.innerHTML = '<span style="background-color:' + icon.color + '; width: 10px; height: 10px; display: inline-block; margin-right: 5px;"></span>' + icon.label; legend.appendChild(item); }); map.on('complete', function() { map.getContainer().appendChild(legend); }); </script> </body> </html> ``` 您需要将代码中的`您的高德地图API密钥`替换为您自己的高德地图API密钥。此示例在地图上添加了一个包含标记颜色和标签的图例，您可以根据需要自定义图例的样式和内容。请注意，图例是通过在地图上添加一个自定义的 HTML 元素实现的。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 11
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值