记录使用vue-Baidu-map循环生成多个点时信息窗体显示问题

在Vue项目中遇到地图显示多个点并点击展示信息窗体的问题,使用vue-baidu-map插件时发现信息窗体显示异常。通过对文档的分析,发现问题是将bm-info-window组件放在了bm-marker的循环内部。解决方案是将bm-info-window移出循环,使其独立,从而正确显示每个点的信息。
摘要由CSDN通过智能技术生成

项目场景:

vue项目中需要在地图中显示多个点,点击地图中的点通过信息窗体呈现出每个点对应的信息


问题描述:

项目中使用vue Baidu map 这个插件来渲染地图,按照文档进行配置操作后,通过for循环将不同的坐标点渲染到地图上,在点击的时候显示窗体信息,结果出现点击不同的点,信息窗体始终在一个位置不变的问题,后来发现没有配置position属性,这一属性表示信息窗体的位置,可以通过坐标点来配置,但是配置完后发现仍然没有效果。

vue Baidu map 文档:(https://dafrok.github.io/vue-baidu-map/#/zh)
问题代码

//html的部分代码
 <baidu-map
      class="bm-view"
      :center="center"
      :zoom="zoom"
      :scroll-wheel-zoom="true"
    >
      <bm-marker
        :position="{lng:item.longitude,lat:item.latitude}"
        @click="clickMarker(item)"
        v-for="item in mapData"
        :key="item.id"
      >
        <bm
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值