【解决】百度地图多个标记点多个信息窗口只显示一个问题(vue-baidu-map)

公司项目用到百度地图,我新手一个,碰到多个标记点多个信息窗口只显示一个问题。百度到的看不懂,后来自己解决了 ,贴出我的解决方法

vue + vue-baidu-map

HTML 代码

    <template v-for="(items, index) in markerPoints">
      <bm-marker
        :key="index"
        :position="items"
        :icon="{ url: require('@/assets/img/point.svg'), size: { width: 32, height: 32 } }"
        title="hello"
        @click="lookDetail(items)"
      >
      </bm-marker>
    </template>
    <bm-info-window 
    	:position="position" 
    	:show="show" 
    	@close="infoWindowClose" 
    	@open="infoWindowOpen"
    >
      我爱北京天安门
    </bm-info-window>

data代码

  markerPoints: [
    // 标记点列表
    { lng: 116.404, lat: 39.915 },
    { lng: 116.45, lat: 39.415 },
    { lng: 116.48, lat: 39.815 },
    { lng: 116.32, lat: 39.615 },
    { lng: 116.39, lat: 39.115 },
    { lng: 116.25, lat: 39.015 }
  ],
  position: {},
  show: false

js代码

    infoWindowClose() {
      this.show = false
    },
    infoWindowOpen() {
      this.show = true
    },
    lookDetail(items) {
      // console.log(items)
      this.position = items
      this.show = true
    }
  • 4
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 12
    评论

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

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

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值