处理vue3.x在高德地图1.x版本无法正常使用的问题

最新推荐文章于 2024-08-08 23:04:45 发布

或许丶

最新推荐文章于 2024-08-08 23:04:45 发布

阅读量525

点赞数 1

分类专栏： vue3.0 地图文章标签： javascript html vue map

本文链接：https://blog.youkuaiyun.com/qq_36189935/article/details/120361481

版权

本文介绍了在Vue3.x项目中遇到高德地图1.x版本运行异常的问题，详细描述了地图在缩放或平移时出现的错误。官方建议升级到2.x版本，但由于性能问题，作者提供了经过测试的有效解决方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

码云仓库（开源插件）

缩放或者放大地图就会报错，报错信息如下:
在这里插入图片描述

官方解决方法：升级2.x版本，但是2.x版本卡的跟PPT一样，暂时不能使用

经测试得出解决方案：

// 高德地图1.x版本在vue3的巨坑,不能声明成vue响应式对象
let map= null;

const initMap = async () =>

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

或许丶

关注关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

7.使用 Vue 3 和 OpenLayers 加载高德地图的多种形式

小彭的博客

12-03

1177

在 WebGIS 开发中，Vue 结合 OpenLayers 是一种非常流行的组合，能够快速实现丰富的地图功能。本文将以 Vue 3 的 Composition API 为基础，结合 OpenLayers，展示如何加载和切换高德地图的多种图层（矢量图、影像图、影像路网等）。通过本文，我们使用 Vue 3 和 OpenLayers 成功加载并切换高德地图的多种图层。OpenLayers 强大的地图功能和 Vue 3 的响应式机制让开发地图功能变得更加简单和高效。😊本文原创作者：吉檀迦俐（优快云）

vue 高德地图添加放大缩小地图、转盘工具

且听风吟的博客

03-24

2792

vue 高德地图添加放大缩小地图、转盘工具

参与评论您还未登录，请先登录后发表或查看评论

若依前端Vue3引入高德地图，控制台报错--禁止多种API混用

qq_69304031的博客

08-08

573

AMapLoader.reset() 需要把这个reset一下。key和安全密钥记得也要填写正确。

vue高德地图 各种配置不生效问题

qq_46491381的博客

03-01

1097

vue高德地图 各种配置不生效问题

vue中使用高德地图定位报错 Get ipLocation failed.Geolocation permission denied.

Yi_qian的博客

12-06

9798

按照官方文档一步步的引入高德浏览器定位 AMap.Geolocation 插件来实现定位，代码如下，和官方文档一模一样，然而报错Get ipLocation failed.Geolocation permission denied.。

vue3 leaflet Cannot read property ‘getZoomScale‘of null

qq_34736893的博客

04-26

406

在return{map,layer} 定义的变量,然后所有用到addlayer,removeLayer,clearLayers的方法的，参考文档：https://blog.csdn.net/qq_17335549/article/details/127555487。网上说是vue3 的变量深监听所导致的，vue2就没有此类的问题发生。都应该用toRaw(map.value);加 toRow() 代理变量。

高德地图 web 端 JS API 遇到的坑及性能优化

sflf36995800的博客

05-28

1万+

【JS API V2.0】本指望全面提升一下性能，结果发现一些硬伤，迫不得已转到1.4.15版本，先说一下最新的v2.0的问题。因为务业需要规划线路，但是这个版本中，规划线路，并且经过中间点时，部分window 7 旗舰 chrome 报错，报错信息:Uncaught Error: createProgram fail chrome 版本 81.0.4044.113（正式版本）（64 位） win7 64位即便是官方demo 也会报错，后来和提交工单，回复未复现，后来工期急就没跟踪，上线后有极少.

基于Vue 2.x和高德地图的地图组件.zip

热门推荐

前人挖坑，后人种（pen）

04-06

2万+

aMap.moveCamera(CameraUpdateFactory.zoomTo(18)); 这个数值越大显示的越详细

Vue3.0中引入地图（谷歌+高德+腾讯+百度）

氷泠

01-07

8290

vue高德地图点击放大Maker

lzc的博客

07-24

7469

需要自行引入高德地图，参考https://elemefe.github.io/vue-amap/#/。本案例实现点击高德地图上的marker并放大该markder的图标。当点击另外的markder时，当前marker恢复原来的大小效果图： <template> <div id="mapExam"> <el-amap ref='map' v...

VUE调用高德地图之电子围栏

人间杂记

07-10

3604

vue下使用高德JS API实现电子围栏功能

【vue+amap】高德地图报错解决【Uncaught TypeError: Cannot read property ‘addressComponent‘ of undefined】

栀妹儿的炼丹炉

08-12

2546

vue引用高德地图出现报错： Uncaught TypeError: Cannot read property 'addressComponent' of undefined 需要更改高德地图API中的【应用】【服务平台】中的web服务改成wbeb端：无报错：

Vue+高德地图API的使用(电子围栏)

qq_59863007的博客

09-09

4262

高德地图，添加可编辑围栏。获取围栏的经纬度

vue cli 4.x引入高德地图白屏

09-07

在vue cli 4.x引入高德地图时出现白屏的问题通常是由于地图引用不正确或缺少必要的配置所导致的。首先，确保你已经按照高德地图提供的官方文档正确引入了地图API，并且在index.html文件中正确指定了高德地图的脚本，如下所示： ```html <script src="https://webapi.amap.com/maps?v=1.4.15&key=your_amap_api_key"></script> ``` 注意替换`your_amap_api_key`为你自己的高德地图API key。另外，如果你的应用是基于Vue Router进行路由管理的，那么需要在Vue Router的配置中添加一条路由记录，用于在加载地图时初始化地图组件。在你的路由配置文件中，添加以下代码： ```javascript import AMapLoader from '@amap/amap-jsapi-loader'; // 配置Vue Router const router = new VueRouter({ routes: [ // ...其他路由配置... { path: '/map', component: { beforeRouteEnter(to, from, next) { // 在进入路由前动态加载地图 AMapLoader.load().then(() => { next(); }); }, render: h => h(App), }, }, ], }); ``` 这样在访问`/map`路径时，会动态加载地图组件，避免白屏问题。最后，检查你的地图相关组件的使用和配置是否正确。确保在地图容器元素上设置了正确的宽度和高度，并且在加载地图时传入了正确的地图容器ID。通过以上的步骤检查和调整，希望能够解决引入高德地图白屏的问题。如果问题仍然存在，建议查看浏览器的开发者工具中的控制台输出，以便进一步定位问题所在。