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

已于 2024-02-03 18:00:16 修改
阅读量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
版权

描述问题及报错

在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之百度地图的使用（一）
only_zing的博客
08-02 2876
vue中引用百度地图、使用百度地图搜索框以及在地图手动选取位置。
解决Vue＜baidu-map＞更新经纬度视图不变问题＜转载＞
m0_58257035的博客
11-11 1189
来自转载-解决baidu-map视图更新
Vue3+百度地图的使用--实现地图的渲染、自动定位（点击控件定位）、地图搜索位置并定位、百度地图logo去掉、坐标图像标注（坐标跳动动画）和坐标点击弹窗，setup语法糖，element-plus
最新发布
weixin_43373009的博客
05-14 720
最近在赶新的项目，用了百度地图去开发，涉及地图的操作太多，目前就摸清标题所写的功能，趁今晚有空记录下来先，因为在开发的的过程找了许多帖子，因为我基于Vue3去开发的，发现很多都是基于vue2开发的，Vue3的比较少，改成Vue3时改的吃力或者修改后运行不了，所以折腾一了段时间。所以把目前完成的代码发出来，供大家参考，涉及后端的接口的数据，我也模拟了一些数据在上面了，可以开箱即用。
Vue-baidu-map 动态刷新地图的方法
路虽远行则将至，事虽难做则必成。
01-02 2422
vue-baidu-map 是没有官方的刷新方法的，如果要在某个功能上实现刷新地图，我们可以使用v-if加开关思想加上侦听器，侦听这个标注数组来控制开关刷新比如我们是在地图上动态标注点位，点位是v-for，当便利的数组有数据就可以刷新地图，就可以实现标注。刚开始我是直接调用的handler （）方法，也可以实现标注，但是会因为没有实例对象报错。我的实际情况是点标注，在后续获取到故障信息的点位信息后，在地图给他按钮动态标注出来。
vue3中props不会动态更新的问题
qq_41306452的博客
08-15 7922
在vue3语法糖响应式的模式下，父组件设置子组件的值无法动态更新的原因 1.props对象不是ref对象，需要使用toRefs去给props加一层包装或者用$(对象)去添加响应式
vue中cannot read property of undefined的问题分析及解决
热门推荐
qq_46100747的博客
03-29 2万+
vue项目中经常会遇到"cannot read property ‘某某某’ of undefined"的报错信息。下面我就简单分析下报错原因及解决方法 问题描述 info是服务端返回的数据，是一个对象。我们要做的就是把对象里的值放到页面显示，先看一下我出错的代码片段 <div class="shop-header-discounts" @click="toggleSupportShow"> <div class="discounts-left"> <div
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进行设置。 在此仓库中可用： :
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安装...
v-click-outside：:black_square_button:Vue指令对元素外部的单击做出React，而不会停止事件传播
02-06
Vue指令对元素外部的单击做出React，而不会停止事件传播。 非常适合用于关闭对话和菜单。 安装 $ npm install --save v-click-outside $ yarn add v-click-outside 利用 import Vue from 'vue' import ...
解决Vue watch里调用方法的坑
01-18
这里是说watch调用methods里方法的时候，页面经常会报找不到方法 这个时候一定要在watch里去输出一下this， 看看this包裹的壳是不是多了好多层，所以找不到方法，虽然我到现在还没理解为啥有时候会出现一层或几层壳...
vue/react项目刷新页面出现404的原因以及解决办法
博哥的二进制世界
04-28 6829
vue/react项目刷新页面出现404的原因以及解决办法
vue引入百度离线地图（亲测有效）解决瓦片过大放入nginx的问题
qq_27036043的博客
09-16 4828
先放成功图： 第一步：当然引入离线地图需要资源包，三个js文件，地址是：（https://download.csdn.net/download/qq_27036043/11751597）（嘿嘿。。）。（样式文件比如地图的css和一些图标不重要，就不上传了）。这三个文件如下，这三个文件需要放入static文件夹下。在vue的index.html中分别引入 要按照这个顺序依次引入。 第二步：如果我们...
Vue3 使用 百度地图
lingwueryao的博客
04-02 6364
@[TOC](Vue3 (vue-cli4)使用 百度地图的坑) vue3 项目中使用百度地图总是报错BMap is not defined. 网上教程多有不完善处 ,此处总结完善之: public/index.html 中 加入 <script type="text/javascript" src="http://api.map.baidu.com/api?v=3.0&ak=你的ak"></script> .eslintrc.js中加入 module.exports
高德地图使用vue-amap开发 页面刷新地图空白
qq_40121308的博客
10-19 6024
使用vue-amap地图开发的时候，刷新页面地图就不显示了。因为刷新的时候AMapUI没有加载出来导致地图显示空白。 使用remoteLoad 来解决 // remoteLoad.js export default function remoteLoad(url, hasCallback) { return createScript(url) /** * 创建script * @param url * @returns {Promise} */ function cr
百度地图使用感受
qhy8023happy的博客
01-12 2156
1.百度地图直接设置 baiduMap.setMapStatus,地图不会回调onMapStatusChangeFinish ,使用 baiduMap.animateMapStatus 则会调用onMapStatusChangeFinish (着实让人蛋疼) 2.百度地图maker标识的中心点设置 marker.setAnchor(0.5f,0.5f) 表示上已这个图片的中心点,默认是已图片的底部为中心点,,可以根据UI切图自己进行调整,防止maker 设置方向,造成偏差较大 3.百度地图点聚合点,接口数据
cannot read properties of undefined reading matched
08-28
这个错误"Cannot read properties of undefined (reading 'matched')"通常是由于访问了一个未定义的属性而引起的。根据引用，这个错误可能是在访问一个未定义的'matched'属性时出现的。 根据引用，解决这个问题的方法是检查导入的router实例对象的属性名是否正确。确保在实例化对象中的属性名和值名一致。 另外，根据引用，一种解决方法是将导入的Router改成小写的router，并且将所有相关的Router都改成小写。 综上所述，如果你遇到了"cannot read properties of undefined reading matched"错误，你可以检查一下导入的对象属性名是否正确，并将相关的属性名改成小写，以解决这个问题。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [TypeError: Cannot read properties of undefined (reading ‘matched‘)“错误](https://blog.csdn.net/xuehua_zhx/article/details/122112017)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *2* [解决问题：Cannot read properties of undefined (reading ‘matched‘)“报错](https://blog.csdn.net/qq_55761697/article/details/125402362)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

街尾杂货店&

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

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

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

打赏作者

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

抵扣说明：

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

余额充值