vue 页面或者弹窗使用 高德地图组件 map组件 不能加载，或者第二次才能加载问题

最新推荐文章于 2024-07-23 15:55:45 发布
最新推荐文章于 2024-07-23 15:55:45 发布
阅读量5.1k 收藏 8
点赞数 7
分类专栏： vue 前端技术 工具及依赖使用 文章标签： vue使用高德地图 高德地图不能正常加载 地图第二次加载成功 高德地图某些属性找不到 高德地图组件
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/yssa1125001/article/details/107561918
版权

        最近在项目中大量使用地图功能，因此使用了高德地图组件，因为之前没使用过，因此也踩了一些坑，花了一些时间，特此记录下来。

首先，使用地图组件，一定要设置map绑定的div的样式，为其设置宽高，不然map不能正常加载

其次，新上手使用map的（比如我）尽量每个地图功能都创建一个map对象，不然很可能复用时加载异常

再次，map加载需要考虑vue的生命周期，有时候map初次加载不成功，再次进入时发现却成功了，往往就是初始化map的顺序出了问题（这里注意如果能先获取坐标，就先获取坐标然后再初始化地图，如果有调取后台api，就在api回调then中初始化，或者正常情况下如果不能加载，就放在this.$nextTick()中使用）

还有就是要注意this的指向问题，如果console打印某些属性或者方法不能使用，很可能就是this指向问题，可能指向了方法调用本身而不是vue，可以在初始时使用_this = this，然后使用_this. 解决或者直接使用箭头表达式

yssa1125001
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
专栏目录
vue 使用高德地图vue-amap组件过程解析
10-16
在本文中，我们将深入探讨如何在Vue项目中集成并使用高德地图的`vue-amap`组件。`vue-amap`是一个专为Vue.js设计的高德地图插件，它使得在Vue应用中添加地图功能变得简单易行。首先，我们需要安装这个组件，通过运行...
微信小程序map组件层级过高，导致model模态框无法显示的解决方法
李瑞清的博客
03-04 3806
最近，在做一个土地划块的微信小程序，需要使用map组件。根据业务需求，需要在map上弹出一个模态框。由于map组件是原生组件，层级最高。导致模态框被覆盖在map组件下面。百度了很多，都说使用cover-view解决。但是我要是使用组件，就无法达到效果了。于是，我喝了一杯咖啡，思考着如何解决。突然，灵光一现，种种方案涌入脑海。最后我选择了下面这个方案。供大家参考。 我们可以使用view组件将map...
vue 弹窗_vue使用vue-AMap附加弹窗消息
weixin_39815600的博客
12-12 884
npm下载插件npm install vue-amap --save 在App.vue中写入 <template> <div id="app"> <div class="amap-page-container"> <div class="toolbar"> 当前坐标: {{ lng }}, {{ lat }} ...
Vue2（vue-amap） 最新高德地图获取坐标与地址信息＋搜索功能
最新发布
cdfdfgrd的博客
07-23 858
Vue2（vue-amap） 最新高德地图获取坐标与地址信息＋搜索功能
Vue加载地图的两种方法
m0_46641774的博客
03-21 1269
Vue加载地图的两种方法
vue3在高德地图首次加载成功后，第二次加载容器消失，后续加载抛出map实例为空问题解决
weixin_43996368的博客
03-28 1258
这里的加载方法在其他项目里都是正常了，这次放入微服务里运行的时候发现多次加载地图会出现各种问题，采用新的JS API 2.0 版本中的JSAPI Loader进行加载。原先加载方式为JS API 引入地图。
vue 高德地图出现页面空白问题解决
m0_55365537的博客
03-13 1863
vue3 keep-alive缓存地图组件以及弹窗展示地图组件时偶发地图加载空白的情况。
vue+高德地图写地图选址组件的方法
10-16
最后，如果在使用高德地图的现成组件时遇到样式不能修改或者某些事件无法监听的问题，自定义组件的开发可以解决这些问题，提高应用的可控性和用户体验。 以上是基于给定文件信息的详细知识点总结，希望能够帮助...
vue中使用高德地图-加载高德地图几种方法
03-12
### vue中使用高德地图-加载高德地图几种方法 #### 一、前言与基础知识 在当前的应用开发中，地图服务已经成为了不可或缺的一部分。无论是网约车应用还是生活服务类应用，地图服务都提供了强大的功能支持。本文将...
vue基于Vue2.0和高德地图的地图组件实例
08-30
vue-amap 是一个基于 Vue 2.0 和高德地图的地图组件实例，旨在让开发者在编写地图应用时，能够从查找众多地图 API 和繁琐的地图状态同步中解脱出来。vue-amap 通过提供简洁的 API 和强大的功能，帮助开发者快速构建...
vue引用自定义组件失败 自定义组件名为map
大雾起了清晨
05-15 641
将一个自定义组件定义为map以后页面不显示 import map from './map.vue' 下面使用组件模板中 components: { bread, quillEditor, map }, 页面中使用的是 <map></map> 页面上一直不显示，后来审查了一下页面发现是 ！！！！！！！！！！！！ 纠结了好久，突然想起可能是不是组件命名不能是这个啊，试了一下
在vue种使用高德地图
qq_36813076的博客
06-22 1126
cnpm下载amap-jsapi-loader之后在你所需要渲染地图的页面引入相应的依赖 2，开始加载地图，切记你需要申请高德地图开发者模式的key，怎么申请就不赘述了，自己百度一大堆，废话不多说，直接上代码 备注：plugins这个数组里边是地图的插件，比如你需要在地图上加载区县或者乡镇边界，那就将AMap.GeoJSON，AMap.Polygon这两个插件写进去，可以按需写入，记住他有很多插件可供使用...
vue项目中 高德地图总是出不来的问题
热门推荐
Baby_加油_的博客
05-18 1万+
111
vue加载百度地图（只加载一次）
xiaoping_1988的博客
09-15 3485
vue加载百度地图和热力图插件(只加载一次) &lt;template&gt; &lt;div style="height: 100%;width: 100%"&gt; &lt;button @click="initHeatMap"&gt;显示热力图&lt;/button&gt; &lt;div id="bmap" style="height:
VUE中使用高德地图-按需加载
weixin_45108907的博客
05-23 2193
1 首先使用npm 下载 安装 npm install vue-amap --save 2 首先需要一个容器来放地图 容器需要定一个高度 由于本次项目需求是按需加载， 首先在 webpack.base.conf.js中， 必须require， externals: [ require(‘webpack-require-http’) ], 其次，就是在你需要的页面中引入高德地图即可 在befor...
vue之 IOS苹果自动定位问题 vue-baidu-map首次进入无法定位问题
追梦猪的博客
05-27 1523
最近在用vue开发应用，要用到百度地图，基本功能都有实现过，但是到vue上用的一个vue-baidu-map封装组件，官网：https://dafrok.github.io/vue-baidu-map/#/zh/index,点击进去就是使用文档，但是有很多坑，需要自己去碰坑，填坑，用坑了 //百度地图 importBaiduMapfrom'vue-baidu-map' Vue....
关于Vue移动端 ios图片需要刷新显示的问题！
草莓味的青
05-28 1015
最近做了一个Vue移动端的项目，做好之后部署到服务器，发现ios手机访问图片不显示 刷新一下就显示，如下图！！ 对于这个问题 整整困扰了我一天时间 于是开始在网上找办法 网上的办法并不多，尝试了各种方法 最后实在不行 用电脑打开浏览器看控制台 最终 发现了问题！ 由于ios手机系统安全机制较高这就造成了ios手机访问空白的问题，而安卓安全机制比ios低 所以安卓是可以正常加载图片的，当然解决这个问题也是后端人员配置一下就好了！ ...
vue中对于高德地图API的调用、js封装以及刷新后地图不显示为空白的原因
weixin_43996368的博客
08-06 6885
vue中使用高德地图 注意点： 1.使用地图必须定义容器大小，长宽固定 2.key值需自行申请key申请地址 <template> <div id="Maps" class="Maps"></div> </template> <script> </script> export default { data(){ return{ map: null
vue-amap高德地图刷新空白 高德刷新提示 AMap is not defined解决
weixin_39921970的博客
11-11 5773
npm安装配置在main（这个配置刷新不出地图），即需要做如果刷新找不到AMap对象就重新异步请求。新建一个amap.js放在utils中（依据个人喜好，工具js放哪就哪）下面是给省市区增加范围高亮，保留AMap的plugin的写法。把main.js的下面代码复制到amap.js，以上刷新的问题就解决了。
vue 弹窗组件加载高德地图组件第一次不显示地图 第二次才显示怎么解决
06-09
这个问题可能是因为高德地图组件需要在弹窗组件显示时才能初始化，但是在第一次加载时弹窗组件可能还没有完全渲染完成，导致地图组件无法正常显示。为了解决这个问题，可以尝试以下几个方法： 1. 在弹窗组件显示后，再手动调用地图组件的初始化方法，确保地图组件已经完全渲染完成，例如： ``` mounted () { this.$nextTick(() => { this.map = new AMap.Map('map-container', { center: [116.397428, 39.90923], zoom: 13 }) }) } ``` 2. 将地图组件的加载放在弹窗组件显示后的回调函数中，确保地图组件加载时弹窗组件已经完全渲染完成，例如： ``` methods: { openDialog () { this.showDialog = true this.$nextTick(() => { this.map = new AMap.Map('map-container', { center: [116.397428, 39.90923], zoom: 13 }) }) } } ``` 3. 将地图组件的加载放在弹窗组件的 activated 钩子函数中，确保每次弹窗组件激活时都重新加载地图组件，例如： ``` activated () { this.map = new AMap.Map('map-container', { center: [116.397428, 39.90923], zoom: 13 }) } ``` 以上三种方法都可以解决地图组件第一次不显示的问题，具体选择哪种方法取决于你的具体实现方式和需求。
评论 7
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值