uniapp中map自定义信息窗口

uniapp中map自定义信息窗口

<template>
    <view class="page-body">
        <view class="page-section">
            <map id="map1" class="mapstyle" ref="map1" style="width: 100%; height: 100%;" :markers="markers"
                :latitude="latitude" :longitude="longitude" :scale="mapScale" @markertap="markertap">
                <cover-view slot="callout">
                    <!--循环遍历-->
                    <view v-for="(item, index) in customCalloutMarkerIds" :key="index">
                        <cover-view class="customCallout" :marker-id="item">
                            123123123
                        </cover-view>
                    </view>
                </cover-view>
            </map>
        </view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                latitude: 30.17489176432292,
                longitude: 120.2113267686632,
                markers: [{
                    id: 1,
                    latitude: 30.174892900,
                    longitude: 120.2113275343,
                    stationName:   ,
                    distance: 10,
                    <!--偏移量和是否显示-->
                    customCallout: {
                        anchorY: 0,
                        anchorX: 0,
                        display:  ALWAYS ,
                    }
                }, {
                    id: 2,
                    latitude: 30.174894900,
                    longitude: 120.2133285343,
                    stationName:   ,
                    distance: 20,
                    customCallout: {
                        anchorY: 0,
                        anchorX: 0,
                        display:  NONE ,
                    }
                }, {
                    id: 3,
                    latitude: 30.172792900,
                    longitude: 120.2133285343,
                    stationName:   ,
                    distance: 30,
                    customCallout: {
                        anchorY: 0,
                        anchorX: 0,
                        display:  NONE ,
                    },
                }], // 地图上markers列表
                customCalloutMarkerIds: [1, 2, 3],
                mapScale: 16, // 地图默认放大倍数
            }
        },
        methods: {
            markertap(e) {
                const that = this
                let markers = this.markers
                <!--根据id确定显示还是不显示-->
                markers.find(function(item, index) {
                    if (item.id == e.markerId) {
                        item.customCallout.display =  ALWAYS  // 点击marker 显示站点名
                    } else {
                        item.customCallout.display =  NONE 
                    }
                })
            }
        }
    }
</script>
<style lang="less" scoped>
    .page-body {
        width: 100%;
        height: 100%;
        position: absolute;
        overflow: hidden;

        .page-section {
            width: 100%;
            height: 100%;
            position: absolute;
        }

        .customCallout {
            width: 75%;
            box-sizing: border-box;
            border-radius: 4rpx;
            display: inline-flex;
            justify-content: center;
            align-items: center;
        }
    }

    .mapstyle {
        position: relative;
    }
</style>