yue1123 / vue3-baidu-map-gl

🎉百度地图 GL版 Vue3 组件库,baidu map gl components libary based on Vue3.0
https://yue1123.github.io/vue3-baidu-map-gl/
MIT License
375 stars 44 forks source link

BInfoWindow组件关闭后无法再显示。 #58

Closed Jozoooooo closed 11 months ago

Jozoooooo commented 11 months ago

大佬您好:smile:,我最近在使用vue3-baidu-map-gl时,遇到了点小问题。

官方示例

百度地图JS API官方示例中,信息窗口默认关闭,点击红色标注点后信息窗口显示,点击其他地方信息窗口关闭。再次点击该红色标注点时,信息窗口能再次打开。

问题复现

vue3-baidu-map-gl示例中,如 #23 中代码,信息窗口默认打开,点击其他地方信息窗口关闭。 点击其他点可以正常显示信息窗口,但是刚刚关闭的信息窗口无法再次打开,如下图: issue

yue1123 commented 11 months ago

ok,我复现一下,可能是个 bug

Jozoooooo commented 11 months ago

谢谢大佬 :+1:

yue1123 commented 11 months ago

在无法打开的时候手动改一下 show的值就好了,内部组件监听的是位置改变自动打开,同一个位置关闭后再次点击设置位置是不会触发位置改变的。

以文档 demo 代码为例,做如下修改:

<template>
  <BMap enableScrollWheelZoom v-bind="$attrs" :center="{ lat: 39.915185, lng: 116.400901 }" :zoom="16">
    <BMarker
      v-for="item in markers"
      :position="item.position"
      icon="blue1"
      @click="() => handleClick(item)"
      enableClicking
    />
-   <BInfoWindow :show="true" :position="position" :title="title" enableAutoPan enableCloseOnClick />
+   <BInfoWindow v-model:show="show" :position="position" :title="title" enableAutoPan enableCloseOnClick />
  </BMap>
</template>

<script lang="ts" setup>
  import { ref } from 'vue'
  import { BMap, BMarker, BInfoWindow } from 'vue3-baidu-map-gl'
  let markers = ref([
    {
      position: { lat: 39.915185, lng: 116.400901 },
      title: '地址一'
    },
    {
      position: { lat: 39.915185, lng: 116.400101 },
      title: '地址二'
    }
  ])
  const title = ref(markers.value[0].title)
  const position = ref(markers.value[0].position)
+ const show = ref<boolean>(true)
  function handleClick(item) {
    position.value = item.position
    title.value = item.title
+   show.value = true
  }
</script>
Jozoooooo commented 11 months ago

感谢开发者大佬😃~