Vue:解决在百度地图上只显示一个信息窗体的问题

最新推荐文章于 2024-06-07 15:10:59 发布

CLxhu

最新推荐文章于 2024-06-07 15:10:59 发布

阅读量1k

点赞数 2

文章标签： javascript vue.js css

本文链接：https://blog.youkuaiyun.com/weixin_49046823/article/details/116974886

版权

本文介绍如何在Vue项目中解决百度地图上只显示一个bm-info-window的问题。通过设置bm-info-window的show属性初始为false，并在bm-marker点击事件中切换show为true，点击信息窗体关闭按钮则将show设回false。

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

Vue:解决在百度地图上只显示一个信息窗体的问题

最近在Vue中调用百度API，并在地图上标注位置且显示信息，但是用v-for循环后，发现只显示最后一个标注位置的信息窗体。在优快云上看了很多文章，但是都没有完全解决我的问题。最后经过一步一步的梳理，发现应该是信息窗体的show属性的传参问题。直接上代码。

<el-tab-pane label="实时地图"> 
  <div class="panel-body"  > 
  <baidu-map class="bm-view" ak="N7YmCegdP5yekL1IWukifknWQGvQ0pv2" :center="center" :zoom="zoom" :scroll-wheel-zoom="true" @ready="handler">     <!--缩放控件-->               
  <bm-navigation anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-navigation>               <!--定位-->                
  <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true