l***@163.com
l***@163.com
  • 发布:2025-06-21 15:06
  • 更新:2025-06-21 15:30
  • 阅读:24

【报Bug】腾讯地图在安卓手机(已解决)

分类:uni-app

产品分类: uniapp/H5

PC开发环境操作系统: Windows

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

HBuilderX类型: 正式

HBuilderX版本号: 4.66

浏览器平台: Chrome

浏览器版本: 137.0.7151.104(正式版本)

项目创建方式: HBuilderX

示例代码:
<template>  
    <view class="pagebody">  
        <chuizi-tabbar :current-page="3"></chuizi-tabbar>  
        <view class="page-body">  
            <view class="page-section page-section-gap">  
                <map ref="mapRef" style="width:100%;height: 100%;"  :latitude="latitude" :longitude="longitude"  
                    :scale="scale" @controltap="controltap" :show-location="true" :markers="markersList" @tap="markertap" @markertap="tapMap" @callouttap='callouttap'>  
                    <cover-image class="img-map2"  src="/static/map/local.png" @click="clickcontrol"></cover-image>  
                    <cover-image class="img-map"  src="/static/map/clocal.png" @click="chooseLocal"></cover-image>  
                    <cover-image class="img-map1"  src="/static/map/hlep.png" @click="showHelp"></cover-image>  
                </map>  

            </view>  
        </view>  
    </view>  
</template>  

<script>  
    // import VConsole from 'vconsole';  
    // const vConsole = new VConsole();  

    export default {  
        data() {  
            return {  
                showloc:true,  
                id: 0, // 使用 marker点击事件 需要填写id  
                title: 'map',  
                latitude: 0,  
                longitude: 0,  
                markers: [],  
                scale: 20,  
                markersList:[],  
                clicknums: 0  
            }  
        },  
        onPullDownRefresh() {  
            this.getLocation()  
        },  
        mounted() {  
            this.getLocation();  
        },  
        methods: {  
            showHelp() {  
                uni.showModal({  
                    title:'提示',  
                    content:'可以在地图上点击标点,再次点击标点可以新增调查表',  
                    showCancel:false,  
                })  
            },  
            //地图点击事件  
            markertap(e) {  

                this.$refs.mapRef._maps.event.addListener(this.$refs.mapRef._map,'click',(e)=>{    
                    console.log(e.latLng.getLat().toFixed(6) + "," + e.latLng.getLng().toFixed(6),this.clicknums)    
                    this.clicknums += 1   
                    var pointobj = {  
                        id: this.clicknums,  
                        title:'定位点' + this.clicknums,  
                        latitude:e.latLng.getLat().toFixed(6),  
                        longitude:e.latLng.getLng().toFixed(6),  
                        iconPath: '/static/map/setlocal.png',  
                        width:40,  
                        height:40  
                    }  

                    this.markersList.push(pointobj)  

                })  

            },  
            tapMap(e) {  
                console.log("你点击了标记点", e)  
                uni.showModal({  
                    title: '提示',  
                    content: '是否需要在此处添加调查表?',  
                    success: function (res) {  
                        if (res.confirm) {  
                            uni.showActionSheet({  
                                itemList: ['栽培药调查表', '栽培药用植物调查表', '动画药调查表'],  
                                success (res) {  
                                    const indedx  = res.tapIndex  
                                    if(indedx == 0) {  
                                        uni.redirectTo({  
                                            url:"/page_two/addSurver"  
                                        })  
                                    }else if(indedx == 1) {  
                                        uni.redirectTo({  
                                            url:"/page_two/addSurverBot"  
                                        })  
                                    }else{  
                                        uni.redirectTo({  
                                            url:"/page_two/addSurverAnimal"  
                                        })  
                                    }  
                                },  
                                fail (res) {  
                                    console.log(res.errMsg)  
                                }  
                            })  

                        } else if (res.cancel) {  
                            console.log('用户点击取消');  
                        }  
                    }  
                })  
            },  
            //地图点击事件  
            callouttap(e) {  
                console.log('你点击了气泡标签', e)  
                uni.showModal({  
                    title: '提示',  
                    content: '地图点击事件,气泡标签'  
                })  
            },  
            chooseLocal() {  
                uni.chooseLocation({  
                    success: (res) => {  
                        // this.latitude = res.latitude  
                        // this.longitude = res.longitude  
                        uni.createMapContext("maps", this).moveToLocation({   //moveToLocation将地图中心移动到当前定位点,需要配合map组件的show-location使用  
                            latitude: res.latitude,  
                            longitude: res.longitude  
                        });    
                    }  
                })  
            },  
            clickcontrol(){  
                uni.createMapContext("maps", this).moveToLocation({   //moveToLocation将地图中心移动到当前定位点,需要配合map组件的show-location使用  
                    latitude: this.latitude,  
                    longitude: this.longitude  
                });    
            },  
            getLocation() {  
                var that = this  
                uni.getLocation({  
                    type: 'gcj02',  
                    // type: 'wgs84',  
                    highAccuracy: true, // 启用高精度定位  
                    success: function(res) {  
                        console.log(res,'res')  
                        // uni.showToast({  
                        //  title:'当前位置的经度:' + res.longitude,  
                        //  icon:'none'  
                        // })  
                        console.log('当前位置的经度:' + res.longitude);  
                        console.log('当前位置的纬度:' + res.latitude);  
                        that.latitude = res.latitude  
                        that.longitude = res.longitude  
                        uni.stopPullDownRefresh();  
                    // let arr = [{  
                    //      id: 0,  
                    //      longitude: res.longitude,  
                    //      latitude: res.latitude,  
                    //      name: res.address  
                    //  }]  
                    //  let markers = []  
                    //  for (var i = 0; i < arr.length; i++) {  
                    //      markers = markers.concat({  
                    //          id: arr[i].id,  
                    //          latitude: arr[i].latitude, //纬度  
                    //          longitude: arr[i].longitude, //经度  
                    //          callout: { //自定义标记点上方的气泡窗口 点击有效  
                    //              content: arr[i].name, //文本  
                    //              color: '#ffffff', //文字颜色  
                    //              fontSize: 10, //文本大小  
                    //              borderRadius: 2, //边框圆角  
                    //              bgColor: '#00c16f', //背景颜色  
                    //              display: 'ALWAYS', //常显  
                    //          },  
                    //      })  
                    //  }  
                    //  that.markers = markers  
                    //  console.log(that.markers)  
                    },fail(res) {  
                        console.log(res)  
                        uni.stopPullDownRefresh();  
                    }  
                })  
            }  
        },  
    }  
</script>  
<style lang="scss">  
    uni-page-body {  
        height: 100vh !important;  
    }  
    #maps{  
        z-index: 1;  
        height: 500px;  
    }  
    .pagebody {  
        height: 100%;  

        .page-body {  
            height: 100%;  

            .page-section {  
                height: 100%;  
            }  
        }  
    }  
    .img-map2{  
        width: 50rpx;  
        height: 50rpx;  
        position: fixed;  
        bottom: 15vh;  
        right: 2vh;  
        background-color: #FFFFFF;  
        border-radius: 5px;  
        padding: 7px;  
    }  
    .img-map{  
        width: 50rpx;  
        height: 50rpx;  
        position: fixed;  
        bottom: 22vh;  
        right: 2vh;  
        background-color: #FFFFFF;  
        border-radius: 5px;  
        padding: 7px;  
    }  
    .img-map1{  
        width: 50rpx;  
        height: 50rpx;  
        position: fixed;  
        bottom: 15vh;  
        left: 2vh;  
        background-color: #FFFFFF;  
        border-radius: 5px;  
        padding: 7px;  
    }  
    ::v-deep .uni-map {  
        height: 300px;  
    }  
</style>  

操作步骤:

安卓不行

预期结果:

安卓不行

实际结果:

安卓不行

bug描述:

在安卓手机上显示地图高度无效,怎么设置都无效,px,rpx,vh,%全都无效

2025-06-21 15:06 负责人:无 分享
已邀请:
l***@163.com

l***@163.com (作者)

救救我,不知道咋整了,并且我使用高德地图为什么特别慢啊,有时候也报错了,这默认的map组件问题好多

l***@163.com

l***@163.com (作者)

等待经纬度好了后再去加载地图

要回复问题请先登录注册