动态添加marker,infoWindow点击不显示

[weigegeaa]

[BUG 反馈] 动态添加marker,infoWindow点击不显示

浏览器版本号

Chrome 115.0

Vue 版本号

2.7

组件库版本号

0.21.22

现象描述

动态添加marker,点击marker图标  infoWindow窗口不显示

完整异常信息

没效果

在线示例 / 仓库 URL

暂无

复现用例

<template>
    <!-- <div> -->
    <div>
        <el-tag effect="dark" @click="addPoints">增加点</el-tag>
        <baidu-map class="map" :center="center" :zoom="zoom" @ready="initMap" :scroll-wheel-zoom="true">

            <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
            <!-- <bm-map-type :map-types="['BMAP_NORMAL_MAP', 'BMAP_HYBRID_MAP']" anchor="BMAP_ANCHOR_TOP_LEFT"></bm-map-type> -->
            <bm-overview-map anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :isOpen="true"></bm-overview-map>
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true"></bm-geolocation>
            <bm-city-list anchor="BMAP_ANCHOR_TOP_LEFT" style="align-items: right;"></bm-city-list>
            <!-- <bm-panorama></bm-panorama> -->

            <bm-marker :position="point" :dragging="false" @click="infoWindowOpen(point)" v-for="(point, index) in points"
                :key="index">
                <!-- <bm-label content="我爱北京天安门" :labelStyle="{color: 'red', fontSize : '24px'}" :offset="{width: -35, height: 30}"/> -->
                <bm-info-window :show="point.flag"  :position="{lng: point.lng, lat: point.lat}"
                    @clickclose="infoWindowOpen(point)" :closeOnClick="false"><el-descriptions title="设备信息" :column="1">
                        <el-descriptions-item label="名称">{{ point.name }}</el-descriptions-item>
                        <el-descriptions-item label="mac">{{ point.mac }}</el-descriptions-item>
                        <el-descriptions-item label="地址">{{ point.address }}</el-descriptions-item>
                    </el-descriptions></bm-info-window>
            </bm-marker>

        </baidu-map>

    </div>

    <!-- </div> -->
</template>
<script>
import { getDeviceInfoPage } from "@/api/system/deviceInfo";

export default {
    name: "DeviceMap",

    data() {
        return {
            center: {      // 经纬度
                lng: 0,
                lat: 0
            },
            zoom: 5,　     // 地图展示级别、
            BMap: null,      // 百度地图对象
            map: null,       // 百度地图实例
            points: [],

            location: '北京',
            keyword: '百度'
        }

    },
    created() {
        // this.addPoints();
        this.getDeviceInfoPage()
    },
    methods: {
        getDeviceInfoPage() {
            getDeviceInfoPage().then(response => {
                this.points = response.data.list
            })
        },
        initMap({ BMap, map }) {
            this.BMap = BMap;
            this.map = map;
            console.log('BMap' + BMap)
            console.log('map' + map)
            this.$set(this.center, 'lng', '113.226525');
            this.$set(this.center, 'lat', '23.136637');
        },
        clickHandler(e) {
            alert(`单击点的坐标为：${e.point.lng}, ${e.point.lat}`);
        },
        addPoints() {

            this.$nextTick(() => {
                const points = [];
                for (var i = 0; i < 30; i++) {
                    const position = { lng: Math.random() * 40 + 85, lat: Math.random() * 30 + 21, flag: false }
                    points.push(position)
                }

                this.points = points 
            })

        },
        infoWindowClose(e) {
            e.flag = false
        },
        infoWindowOpen(e) {
            e.flag = true 

        },
        mouseover(type, target, point, pixel) {
        }

    }
};

</script>

<style>
.map {
    width: 100%;
    height: 650px;
}
</style>

预期输出

点击marker会显示对应的infoWindow

实际输出

没效果