vue-baidu-map动态描点，点击展示点信息

最新推荐文章于 2023-06-02 11:59:24 发布

小宇宙chris_310

最新推荐文章于 2023-06-02 11:59:24 发布

阅读量1.9k

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/qq_38796823/article/details/105489005

版权

Vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

html

<baidu-map class="bm-view" :center="center" :zoom="zoom" @ready="handler" :scroll-wheel-zoom="true">
                            <bm-marker v-for="(item,index) of pointList" :key="index" :position="item.markerPoint" :dragging="false" @click="infoWindowOpen(index,item)">
                                <bm-info-window :show="item.mapShow" @close="infoWindowClose(index,item)" @open="infoWindowOpen(index,item)">{{item.res}}</bm-info-window>
                            </bm-marker>
                        </baidu-map>

data

center: {
                lng: 104.06107,
                lat: 30.543327
            },
            zoom: 3,
            mapShow: false,
            pointList: [{
                    res: "家庭地址：XXXXXXXXXX",
                    markerPoint: {
                        lng: 104.06107,
                        lat: 30.543327
                    }
                },
                {
                    res: "签到位置：四川省成都市武侯区益州大道中段1800",
                    markerPoint: {
                        lng: 104.061855,
                        lat: 30.545336
                    }
                },
                {
                    res: "签退位置：四川省成都市武侯区益州大道中段1800",
                    markerPoint: {
                        lng: 104.061025,
                        lat: 30.545156
                    }
                }
            ]

handler({
            BMap,
            map
        }) {
            // console.log(BMap, map)
            // this.center.lng = 104.06107
            // this.center.lat = 30.543327
            this.center.lng =this.pointList[0].markerPoint.lng;
            this.center.lat=this.pointList[0].markerPoint.lat;
            this.zoom = 15
        },
        infoWindowClose(index,item) {
            // console.log(index,item)
            item.mapShow=false
            this.$set(this.pointList,index,item)
        },
        infoWindowOpen(index,item) {
            // console.log(index,item)
            item.mapShow=true
            this.$set(this.pointList,index,item)
        }