【报Bug】customCallout自定义气泡窗口不在标记点上

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Windows

PC开发环境操作系统版本号： Windows 10 家庭中文版22H2

HBuilderX类型：正式

HBuilderX版本号： 3.8.7

手机系统： Android

手机系统版本号： Android 12

手机厂商： vivo

手机机型： iqoo neo3

页面类型： nvue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

<template>  
    <view class="mapContent" :style="{ width: screenWidth + 'px', height: screenHeight + 'px' }">  
        <map id="map" ref="map" class="map" :markers="marker" :scale="scale" :min-scale='5' :show-location="true"  
            :latitude="latitude" :longitude="longitude">  
            <cover-view slot="callout">  
                <template v-for="(item, index) in marker">  
                    <cover-view :marker-id="item.id" class="customCallout">  
                        <text class="customCallout-item fs14">{{ item.id }}</text>  
                    </cover-view>  
                </template>  
            </cover-view>  
        </map>  
    </view>  
</template>  

<script>  
    export default {  
        data() {  
            return {  
                marker: [],  
                latitude: 39.5427, // 视野内中心点维度 默认北京天安门  
                longitude: 116.2317, // 视野内中心点经度 默认北京天安门  
                scale: 18,  
                currentScale: 18, // 当前地图缩放等级  
                position: '北京', // 当前位置  
                myLatitude: '', // 当前位置维度  
                myLongitude: '', // 当前位置经度  
                positions: [{  
                    latitude: 39.5427, // 视野内中心点维度 默认北京天安门  
                    longitude: 116.2317, // 视野内中心点经度 默认北京天安门  
                }, {  
                    latitude: 39.5527, // 视野内中心点维度 默认北京天安门  
                    longitude: 116.2317, // 视野内中心点经度 默认北京天安门  
                }, {  
                    latitude: 39.5627, // 视野内中心点维度 默认北京天安门  
                    longitude: 116.2317, // 视野内中心点经度 默认北京天安门  
                }, {  
                    latitude: 39.5727, // 视野内中心点维度 默认北京天安门  
                    longitude: 116.2317, // 视野内中心点经度 默认北京天安门  
                }, {  
                    latitude: 39.5827, // 视野内中心点维度 默认北京天安门  
                    longitude: 116.2317, // 视野内中心点经度 默认北京天安门  
                }, {  
                    latitude: 39.5927, // 视野内中心点维度 默认北京天安门  
                    longitude: 116.2317, // 视野内中心点经度 默认北京天安门  
                }], // 店铺地址  
                centralPoint: {  
                    lat: '',  
                    lng: ''  
                },  
                isOption: false,  
                searchKey: "",  
                searchList: [],  
                bottomShow: false,  
                bottom: {  
                    src: '',  
                    name: '',  
                    address: '',  
                    time: '',  
                    shopId: '',  
                },  
            }  
        },  
        computed: {  
            screenWidth() {  
                let width  
                uni.getSystemInfo({  
                    success(res) {  
                        width = res.screenWidth;  
                    }  
                })  
                return width  
            },  
            screenHeight() {  
                let height  
                uni.getSystemInfo({  
                    success(res) {  
                        height = res.screenHeight;  
                    }  
                })  
                return height  
            }  
        },  
        async onReady() {  
            this._mapContext = uni.createMapContext("map", this);  
            let that = this  
            // await uni.getLocation({ // 获取当前位置  
            //  type: 'gcj02',  
            //  geocode: true,  
            //  success: function(res) {  
            //      that.latitude = res.latitude;  
            //      that.longitude = res.longitude;  
            //      that.position = res.address.city;  
            //      that.myLatitude = res.latitude;  
            //      that.myLongitude = res.longitude;  

            //  },  
            // });  
            this.addMarkers()  
        },  
        methods: {  
            addMarkers() { // 添加marker  
                const markers = [];  
                this.positions.forEach((p, i) => {  
                    markers.push(  
                        Object.assign({}, {  
                            id: i + 1,  
                            iconPath: '/static/images/storeAlliance/dianpu.png',  
                            width: 25,  
                            height: 25,  
                            callout: { // 自定义标记点上方的气泡窗口 点击有效  
                            },  
                            customCallout: {  
                                anchorY: 0, // Y轴偏移量  
                                anchorX: 0, // X轴偏移量  
                                display: 'ALWAYS', // ALWAYS 常显 || BYCLICK 不常显  
                            },  
                        }, p)  
                    )  
                })  
                // console.log('markers:', markers.length)  
                let that = this  
                this._mapContext.addMarkers({  
                    markers,  
                    clear: true, // 是否清除全部marker  
                    complete(res) {  
                        console.log(res)  
                    },  
                })  
                this.marker = markers  
                // console.log(this.marker)  
            },  
        }  
    }  
</script>  

<style>  
    .mapContent {  
        display: flex;  
        position: relative;  
        flex: 1;  
    }  

    .map {  
        flex: 1;  
    }  

    .customCallout {  
        background-color: #F06E1E;  
        border-radius: 30px;  
        width: 90px;  
        height: 30px;  
        padding-left: 10px;  
        padding-right: 10px;  
        display: flex;  
        flex-direction: row;  
        align-items: center;  
        border-width: 1px;  
        border-style: solid;  
        border-color: #eee;  
    }  

    .customCallout-item {  
        width: 70px;  
        color: #fff;  
        lines: 1;  
        text-align: center;  
        text-overflow: ellipsis;  
        overflow: hidden;  
    }  
</style>

操作步骤：

    <map id="map" ref="map" class="map" :markers="marker" :scale="scale" :min-scale='5' :show-location="true"  
        :latitude="latitude" :longitude="longitude">  
        <cover-view slot="callout">  
            <template v-for="(item, index) in marker">  
                <cover-view :marker-id="item.id" class="customCallout">  
                    <text class="customCallout-item fs14">{{ item.id }}</text>  
                </cover-view>  
            </template>  
        </cover-view>  
    </map>

预期结果：

    <map id="map" ref="map" class="map" :markers="marker" :scale="scale" :min-scale='5' :show-location="true"  
        :latitude="latitude" :longitude="longitude">  
        <cover-view slot="callout">  
            <template v-for="(item, index) in marker">  
                <cover-view :marker-id="item.id" class="customCallout">  
                    <text class="customCallout-item fs14">{{ item.id }}</text>  
                </cover-view>  
            </template>  
        </cover-view>  
    </map>

实际结果：

    <map id="map" ref="map" class="map" :markers="marker" :scale="scale" :min-scale='5' :show-location="true"  
        :latitude="latitude" :longitude="longitude">  
        <cover-view slot="callout">  
            <template v-for="(item, index) in marker">  
                <cover-view :marker-id="item.id" class="customCallout">  
                    <text class="customCallout-item fs14">{{ item.id }}</text>  
                </cover-view>  
            </template>  
        </cover-view>  
    </map>