Nvue页面map组件上下滑动，在安卓端会导致页面滚动而map组件无法上下滑动

但是在苹果端 虚拟机上是没有问题的 ，是我的代码哪里不对吗还是bug呢？
下面是代码:

        <div class="wrapper">  
        <div class="map-box">  
            <map name="map1" class="map" id="map1" ref="map1"   
            :latitude="latitude"   
            :longitude="longitude"   
            @regionchange="onregionchange"></map>  
            <div class="map-mask">  
                <text class="map-mask-content">可显示街道名称</text>  
            </div>  
            <text class="map-district-content">{{district}}</text>  
            <div class="location-box">  
                <image src="/static/img/common/icon-location.png" class="location-icon"></image>  
            </div>  
        </div>  
    </div>  

        .map-box{  
    width: 630rpx;  
    height: 700rpx;  
    position: relative;  
    margin-left: 60rpx;  
}  
.map{  
    width: 630rpx;  
    height: 700rpx;  
}  
.map-mask{  
    width: 630rpx;  
    height: 100rpx;  
    background-image: linear-gradient(to bottom, rgba(59,59,59,0.8), rgba(238,238,238,0.3));  
    position: absolute;  
    top: 0;  
    left: 0;  
}  
.map-mask-content{  
    text-align: center;  
    line-height: 100rpx;  
    font-size: 28rpx;  
    color: #fff;  
}  
.map-district-content{  
    width: 208rpx;  
    height: 90rpx;  
    line-height: 90rpx;  
    font-size: 28rpx;  
    color: #fff;  
    background-color: $base-color;  
    border-radius: 42rpx;  
    text-align: center;  
    position: absolute;  
    left: 211rpx;  
    top: 305rpx;  
}  
.location-box{  
    width: 96rpx;  
    height: 96rpx;  
    background-color: #fff;  
    box-shadow:0px 2px 6px 1px rgba(97,56,203,0.23);  
    border-radius: 100%;  
    position: absolute;  
    bottom: 36rpx;  
    right: 32rpx;  
    align-items: center;  
    justify-content: center;  
}  
.location-icon{  
    width: 48rpx;  
    height: 48rpx;  
}