vue - 使用百度地图vue-baidu-map插件动态刷新地图后报错（调用handler()方法报错：Error in y-on handler: “TypeError: Cannot read）

已于 2024-07-29 14:11:06 修改
阅读量3.3k 收藏 25
点赞数 19
分类专栏： 前端常见问题解决 文章标签： vue vue-baidu-map 百度地图 vue如何动态数据刷新地图点位 vue-baidu-map刷新 动态标记点数据地图不刷新怎么办 监听数据变化并让百度地图更新
于 2024-01-02 05:35:41 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_50545213/article/details/135328515
版权
前端常见问题解决 专栏收录该内容
120 篇文章 124 订阅 ¥9.90 ¥99.00
订阅专栏

描述问题及报错

在vue2 / vue3 项目中使用vue-baidu-map插件时，在某个功能或时机上实现刷新地图效果，例如在地图上动态标注点位时，就需要手动对地图进行刷新点位。

但由于vue-baidu-map没有专门的刷新方法，所以就会报错：

[Vue warn]: Error in y-on handler: “TypeError: Cannot read properties of undefined (reading ‘BMap’)”

在这里插入图片描述

解决问题

其实，

了解本专栏 订阅专栏 解锁全文
街尾杂货店&
关注
  • 19
    点赞
  • 踩
  • 25
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
订阅专栏
vue-baidu-map百度地图组件指南
12-02
vue-baidu-map 百度地图组件指南 vue-baidu-map 是一个基于 Vue.js 的 百度地图组件库，提供了便捷的方式来在 Vue 项目中集成百度地图。下面是该组件库的使用指南。 安装 使用 npm 安装 vue-baidu-map 组件库： ...
sample-stripe-handler：无服务器功能，该功能使用条纹api在Vue应用程序中进行签出流程
02-05
样本条纹处理程序 这个小型演示展示了如何使用Azure无服务器功能通过... 设置实际上并不差！ 现场演示 即将在上提供解释该演示的文章。 商店代码也都是开源的，它演示了如何使用Vue.js进行设置。 在此仓库中可用： :
Vue3+百度地图的使用--实现地图的渲染、自动定位（点击控件定位）、地图搜索位置并定位、百度地图logo去掉、坐标图像标注（坐标跳动动画）和坐标点击弹窗，setup语法糖，element-plus
weixin_43373009的博客
05-14 1538
最近在赶新的项目，用了百度地图去开发，涉及地图的操作太多，目前就摸清标题所写的功能，趁今晚有空记录下来先，因为在开发的的过程找了许多帖子，因为我基于Vue3去开发的，发现很多都是基于vue2开发的，Vue3的比较少，改成Vue3时改的吃力或者修改后运行不了，所以折腾一了段时间。所以把目前完成的代码发出来，供大家参考，涉及后端的接口的数据，我也模拟了一些数据在上面了，可以开箱即用。
Vue-baidu-map 动态刷新地图的方法
路虽远行则将至，事虽难做则必成。
01-02 2554
vue-baidu-map 是没有官方的刷新方法的，如果要在某个功能上实现刷新地图，我们可以使用v-if加开关思想加上侦听器，侦听这个标注数组来控制开关刷新比如我们是在地图上动态标注点位，点位是v-for，当便利的数组有数据就可以刷新地图，就可以实现标注。刚开始我是直接调用的handler （）方法，也可以实现标注，但是会因为没有实例对象报错。我的实际情况是点标注，在后续获取到故障信息的点位信息后，在地图给他按钮动态标注出来。
Vue报错TypeError: Cannot read properties of null (reading ‘insertBefore‘)
最新发布
weixin_42940307的博客
06-05 1010
从报错上看，看不到太多的信息与提示，因此对于第一次遇到这种报错的人，往往不知道从何下手去修复报错。自动渲染页面的数学公式。那么报错很可能就是因为你设置的自动渲染功能，其实就是因为你完全按照官网的方式设置导致的[doge]。，那么有可能把正常的代码也给渲染成数学公式了，结果就出现了。总结一下，是否有感觉Vue或者Nuxt中有不少报错，是源于。，具体原因可能涉及Vue或Nuxt的底层原理。有时候，之所以会报错，就是因为你使用了。的自动渲染设置，将自动渲染函数里面的。来渲染数学公式，或者修改你。
Vue组件通过动态绑定对象更新后子组件百度地图视图无刷新的解决方式
追寻上飞的博客
11-11 1851
Vue子组件通过动态绑定对象更新后子组件视图无刷新的解决方式一、问题描述二、问题分析三、曲线解决问题3.1 添加动态聚合标签3.2 添加数组对象markers3.3 添加对象监听函数 一、问题描述 组件的层级关系如图所示， 期望是点击气象设备组件的解析按钮将文本框的数据解析为气象对象（包含经纬度信息），并将该值传递给地图子组件，地图组件根据其经纬度信息更新位置锚点。 数据传递的方式采用对象动态绑定，即将所有的属性值进行向下单向传递。 <DisplayMap v-bind:meteorologyVo=
前端vue开发百度地图标记使用＜bm-marker＞遇到改变标记数组元素，标记不及时动态刷新标记位置信息和元素下标。
weixin_46567616的博客
02-22 1990
前端vue开发百度地图标记使用遇到改变标记数组元素，不会动态刷新标记位置信息和元素下标。
解决vue3百度地图的实时更新问题
weixin_65565362的博客
11-02 522
实现当数据变化时百度地图上的标记点跟随数据，重新渲染需要用到监听器,
如何在Vue项目中使用百度地图（实践）
bug处理进行时
03-11 6367
百度地图在vue框架中的使用 文章目录百度地图在vue框架中的使用安装注册全局注册组件局部注册使用（以局部注册为例）注意事项自己开发中踩到的坑参考链接 安装 npm install vue-baidu-map --save 注册 全局注册 在main.js中引入百度地图 import BaiduMap from 'vue-baidu-map' Vue.use(BaiduMap , { a...
vue 百度地图(vue-baidu-map)绘制方向箭头折线实例代码详解
11-21
在Vue开发中，有时我们需要在地图上绘制带有方向指示的折线，比如使用vue-baidu-map库。然而，根据描述，vue-baidu-map的BmPolyline组件默认并不支持直接添加带箭头的纹理。这个问题源于BmPolyline组件的源代码没有...
vue-baidu-map 进入页面自动定位的解决方案(推荐)
12-11
Vue.js 是一款流行的前端框架，而 `vue-baidu-map` 是 Vue.js 的一个插件，用于集成百度地图服务。在开发过程中，有时我们需要在页面加载完成后自动进行定位，即获取用户的位置信息并显示在地图上。然而，由于百度...
vue-event-handler-VueJS的事件处理插件。-Vue.js开发
05-27
一个Vue.js插件，提供了全局事件总线和一些辅助方法。 适用于Vue 1.0和Vue 2.0。 安装1.）通过Vue.js插件安装软件包，该插件提供了全局事件总线和一些辅助方法。 适用于Vue 1.0和Vue 2.0。 安装1.）通过NPM安装...
[超详细]Echarts+vue+百度地图 动态实现城市疫情地图
wuovo233的博客
05-01 2796
[超详细]Echarts+vue+百度地图 动态实现城市疫情地图 先上效果图： 动态中国城市疫情地图的实现，主要是参照Echarts官网官方案例的方法:Examples - Apache ECharts，但是官方给的案例数据都是静态写在option的data中。 ...
解决Vue＜baidu-map＞更新经纬度视图不变问题＜转载＞
m0_58257035的博客
11-11 1212
来自转载-解决baidu-map视图更新
使用vue-baidu-map时，动态渲染数据经纬度默认(0,0)
Kne982895961的博客
11-26 693
百度地图经纬度默认（0，0）问题 在我们使用百度地图时，可能会踩得坑就是动态渲染 marker 时， 因为返回参数里面没有经纬度 但是渲染时是有这条数据的，百度地图就默认这几条数据的经纬度为(0, 0) 所以这里需要重新拿个新数组来存放有经纬度的数据 this.dataList.forEach(item => { if (item.longitude && item.latitude) { this.markerList.push(item); } }); P
【无标题】vue-baidu-map 数据改变页面重新渲染
m0_59805184的博客
07-12 1268
vue-baidu-map页面应用
vue中使用百度地图
ybp500234的博客
10-28 7031
v=1.0&type=webgl&callback=initBMap&ak=自己的ak。v=2.0&callback=initBMap&ak=自己的ak。是你自己申请的地图ak，你也可以直接写在方法里面，就不用以参数的形式传入；这里我们之前是直接在html中引用的，现在我们通过异步加载的方式;这里需要注意的是：百度地图有两个初始华对象，一个是。
【百度地图】百度地图的使用方法 和 在vue中如何使用百度地图（超详细）
热门推荐
11-01 1万+
百度地图JavaScript API是一套由JavaScript语言编写的应用程序接口，可帮助您在网站中构建功能丰富、交互性强的地图应用，支持PC端和移动端基于浏览器的地图应用开发，且支持HTML5特性的地图开发。
vue-baidu-map + mapv 实现百度地图迁徙图动效
weixin_45274678的博客
05-25 1283
index.html引用 <script src='http://api.map.baidu.com/api?v=3.0&ak='></script> <script src="http://mapv.baidu.com/build/mapv.min.js"></script> 页面 <div style="height:100%;width:100%" ref="asiaMap"></div> initMapChart(.
报错了[Vue warn]: Error in v-on handler: "TypeError: window.minimize is not a function"
05-24
这个报错提示说明在你使用 `v-on` 绑定的事件处理函数中调用了一个名为 `window.minimize` 的函数，但是 `window.minimize` 并不存在或者不是一个函数。这个问题可能是由于以下原因之一导致的： 1. `window....
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

街尾杂货店&

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值