爱得源码
爱得源码
  • 发布:2022-08-16 01:18
  • 更新:2022-08-16 11:55
  • 阅读:910

【报Bug】uniapp Map组件,谷歌地图marker上的气泡callout的display 常显属性在 iOS 不生效

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Mac

PC开发环境操作系统版本号: 12.3.1

HBuilderX类型: Alpha

HBuilderX版本号: 3.5.4

手机系统: iOS

手机系统版本号: iOS 15

手机厂商: 苹果

手机机型: iPhone

页面类型: nvue

vue版本: vue2

打包方式: 云端

项目创建方式: HBuilderX

示例代码:

<template>
<view class="">
<view class="map">
<map id="map" ref="map" class='map_view' latitude="22.274848" longitude="114.187981" :markers="markers" ></map>
<view class="tips">
<view class="return" @click="returnTap">
<u-icon name="arrow-left" bold></u-icon>
</view>
</view>
</view>
</view>
</template>

<script>
export default {
data() {
return {
value: 5,
// 时间
now: '',
// 地址数据
markers: [],
// 预约弹出层
bookingtimeShow: false,
includepoints: [],
circles: [],
// 数模数据
touch: {
// 开始y
startY: '',
// 结束y
endY: ''
},
// 上下滑动开关
touchSwitch: false,
// 统计数据
// 统计数据
list: [{
id: 0,
name: '待接單',
text: '待接單',
}, {
id: 1,
name: '進行中',
text: '進行中',
}, {
id: 2,
name: '進行中',
text: '進行中',
}, {
id: 3,
name: '已完成',
text: '去評價',
}, {
id: 4,
name: '待付款',
text: '去支付',
}, {
id: 5,
name: '超過預約',
text: '重新預約',
}],
// 数据
data: '',
// oss域名
ossUrl: uni.$ossUrl,
// 更改预约时间订单id
bookingtimeId: '',
}
},
onLoad() {

    },  
    onShow() {  
        this.mapMarkers()  
    },  
    methods: {  
        // 地图标记  
        mapMarkers() {  
            this.markers = [{  
                id: 1,  
                latitude: 22.274848,  
                longitude: 114.187981,  
                width: 30,  
                height: 30,  
                iconPath: '/static/position.png',  
                callout: {  
                    color: '#ffffff',  
                    content: this.data.type == 1 ? '排隊目的地' : '現場拍照目的地',  
                    fontSize: 12,  
                    borderRadius: 5,  
                    bgColor: '#FDA655',  
                    padding: 5,  
                    textAlign: 'center',  
                    display: "ALWAYS" //'BYCLICK':点击显示; 'ALWAYS':常显    
                }  
            }]  
        }  
    },  

}  
}  

</script>

<style lang="scss" scoped>
// 总div
.u-backgroundColor {
flex: 1;
}

// 地图  
.map,  
.map_view {  
    // width: 750rpx;  
    // height: 500rpx;  
    flex: 1;  
}  

.tips {  
    position: fixed;  
    left: 30rpx;  
    top: 80rpx;  
    flex-direction: row;  
}  

.return {  
    width: 50rpx;  
    height: 50rpx;  
    background-color: #FFFFFF;  
    justify-content: center;  
    align-items: center;  
    border-radius: 50rpx;  
}  

.tips_view {  
    flex: 1;  
    flex-direction: row;  
    margin-left: 20rpx;  
    background-color: rgba($color: #FB9D45, $alpha: 0.9);  
    padding: 10rpx 20rpx;  
    border-radius: 50rpx;  
}  

.tips_view-b {  
    margin-left: 20rpx;  
}  

// 地图结束  
// 快递信息  
.function {  
    top: -50rpx;  
    left: 30rpx;  
    align-items: center;  
    padding-bottom: 80rpx;  
    background-color: #FFFFFF;  
    border-radius: 10rpx 10rpx 0 0;  

    .function_view {  
        padding: 0 20rpx;  
    }  
}  

.height {  
    // height: 850rpx;  
}  

// 时间和价格  
.top {  
    margin: 20rpx 0;  
    flex-direction: row;  
    justify-content: space-between;  
    align-items: center;  

    .top_l {  
        flex-direction: row;  
        align-items: center;  

        .top_l-view {  
            flex: 1;  
            flex-direction: row;  
            align-items: center;  
            box-sizing: border-box;  

            // background-color: #FB9D45;  
            .top_l-view-time {  
                flex-direction: row;  
                align-items: center;  
            }  
        }  
    }  

    .top_r {  
        flex-direction: row;  
    }  
}  

// 地址  
.address {  
    flex-direction: row;  
    justify-content: space-between;  
    padding: 20rpx 0;  

    // 地址左边  
    .address_l {  
        justify-content: space-between;  

        .address_l-view {  
            width: 40rpx;  
            height: 40rpx;  
            border-radius: 10rpx;  
            background-color: $u-auxiliaryColor;  
            justify-content: center;  
            align-items: center;  
        }  

        .address_l-in {  
            align-items: center;  
            justify-content: center;  
        }  
    }  

    // 地址右边  
    .address_r {  
        flex: 1;  
        margin-left: 20rpx;  
        justify-content: space-between;  

        .address_r-t {  
            flex-direction: row;  
            align-items: center;  

            .address_r-t-l {  
                flex: 1;  

                // 个人信息  
                // .information {  
                //  margin-bottom: 20rpx;  
                // }  
            }  

            .address_r-t-r {  
                margin-left: 20rpx;  
            }  
        }  

        .address_r-b {  
            flex-direction: row;  
            align-items: center;  

            .address_r-b-l {  
                flex: 1;  
            }  

            .address_r-b-r {  
                margin-left: 20rpx;  
            }  
        }  

        // 个人信息  
        .information {  
            flex-direction: row;  
        }  
    }  
}  

// 地址结束  
// 详情物品信息  
.details {}  

.alert {  
    margin-bottom: 20rpx;  

    .u-alert {}  
}  

// 详情物品信息結束  
// 收入  
.income {}  

// 收入结束  
// 快递结束  
// 底部定位栏   
.bottom {  
    position: fixed;  
    bottom: 0;  
    left: 0;  
    background-color: #FFFFFF;  
    flex-direction: row;  
    width: 750rpx;  
    justify-content: center;  
    border-top: 1rpx solid #909399;  
}  

.bottom_view {  
    margin: 20rpx 0;  
}  

.bottom_l {  
    flex-direction: row;  

    .bottom_l-l {  
        flex-direction: row;  
        margin-right: 20rpx;  
    }  
}  

.bottom_l-view {  
    justify-content: center;  
    align-items: center;  
    margin: 0 20rpx;  
}  

.u-button {  
    flex: 1;  
    margin-left: 20rpx;  
}  

</style>

操作步骤:

1

预期结果:

2

实际结果:

3

bug描述:

uniapp Map组件,谷歌地图marker上的气泡callout的display 常显属性在 iOS 不生效 必须点了才显示出来文字,但是display写的是'ALWAYS':常显

2022-08-16 01:18 负责人:无 分享
已邀请:
爱得源码

爱得源码 (作者) - QQ299392216

代码

DCloud_UNI_Anne

DCloud_UNI_Anne

要回复问题请先登录注册