uni-app 微信版本8.0.7 地图组件map的markers标记点无法正常显示

uni-app 微信版本8.0.7 地图组件map的markers标记点无法正常显示

产品分类:

uniapp/小程序/微信

PC开发环境操作系统:

Windows

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

版本 Windows 10 教育版
版本号 20H2
安装日期 ‎2021/‎5/‎8
操作系统内部版本 19042.928
体验 Windows Feature Experience Pack 120.2212.551.0

HBuilderX类型:

正式

HBuilderX版本号:

3.1.22

第三方开发者工具版本号:

1.05.2107090

基础库版本号:

2.17.0

项目创建方式:

HBuilderX

示例代码:

<!-- 地图定位 -->  
<template>  
    <view class="">  
        <view class="" style="height: 750rpx; width: 750rpx;">  
            微信8.0.6可以显示标记点  微信8.0.7不显示  
            <map  
                id="map"  
                ref="map"  
                :scale="scale"  
                style="height: 750rpx; width: 750rpx;"  
                :latitude="targetLatitude"  
                :longitude="targetLongitude"  
                :markers="markers"  
                :enable-building="true"  
                :show-location="true"  
            ></map>  
        </view>  
    </view>  
</template>  

<script>  
export default {  
    data() {  
        return {  
            // 定位纬度  
            latitude: 0,  
            // 定位经度  
            longitude: 0,  
            // 目标纬度  
            targetLatitude: 0,  
            // 目标经度  
            targetLongitude: 0,  
            // 标点列表  
            markers: [],  
            scale: 16 //缩放级别  
        };  
    },  
    watch: {  
        targetInfo(value) {  
            let obj = {  
                id: 1, //标记点id  
                clusterId: 1, //自定义点聚合簇效果时使用  
                latitude: value.lat, //纬度  
                longitude: value.lng, //经度  
                alpha: 1 //透明度 0-1  
            };  
            this.markers = [obj];  
        }  
    },  
    computed: {},  
    created() {},  
    mounted() {  
        this.isGetLocation();  
    },  
    methods: {  
        // 获取定位信息  
        getLocationInfo() {  
            uni.getLocation({  
                type: 'gcj02', //gcj02国测局坐标  
                success: res => {  
                    console.log('res',res);  
                    this.longitude = res.longitude;  
                    this.latitude = res.latitude;  
                    this.targetLatitude =  res.latitude;  
                    this.targetLongitude = res.longitude;  
                    let obj = {  
                        id: 1, //标记点id  
                        clusterId: 1, //自定义点聚合簇效果时使用  
                        latitude: res.latitude, //纬度  
                        longitude: res.longitude, //经度  
                        alpha: 1 //透明度 0-1  
                    };  
                    this.markers = [obj];  
                },  
                fail: (error) => {  
                    console.log('error',error);  
                }  
            });  
        },  
        // 获取定位授权  
        getAuthorizeInfo(a = 'scope.userLocation') {  
            //1. uniapp弹窗弹出获取授权(地理,个人微信信息等授权信息)弹窗  
            var _this = this;  
            uni.authorize({  
                scope: a,  
                success() {  
                    //1.1 允许授权  
                    _this.getLocationInfo();  
                },  
                fail() {  
                    //1.2 拒绝授权  
                    console.log('你拒绝了授权,无法获得周边信息');  
                }  
            });  
        },  
        // 查看是否已经授权定位  
        isGetLocation(a = 'scope.userLocation') {  
            // 3. 检查当前是否已经授权访问scope属性,  
            var _this = this;  
            // #ifdef MP  
            uni.getSetting({  
                success(res) {  
                    if (!res.authSetting[a]) {  
                        //3.1 每次进入程序判断当前是否获得授权,如果没有就去获得授权,如果获得授权,就直接获取当前地理位置  
                        _this.getAuthorizeInfo();  
                    } else {  
                        _this.getLocationInfo();  
                    }  
                }  
            });  
            // #endif  

            // #ifdef H5  
            console.log('我是h5');  
            _this.getLocationInfo();  
            // #endif  
        }  
    }  
};  
</script>  

操作步骤:

直接打开demo 同意获取定位 即可出现标记点

预期结果:

真机微信8.0.7版本、真机微信8.0.6版本、h5、微信开发者工具 标记正常显示;

实际结果:

真机微信8.0.6版本、h5、微信开发者工具 标记正常显示;真机微信8.0.7版本 标记点无法正常显示;

bug描述:

代码在真机微信版本8.0.7 地图组件map 的 markers 标记点无法正常显示;代码在微信开发者工具调试中可以正常显示,h5也可以正常显示。真机微信版本8.0.7以下版本 如8.0.6可以正常显示;

示例图片 示例图片


更多关于uni-app 微信版本8.0.7 地图组件map的markers标记点无法正常显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html

2 回复

问题已解决 8.0.7版本 设置了clusterId 点聚合簇id 会导致自定义 气泡 callout失效

更多关于uni-app 微信版本8.0.7 地图组件map的markers标记点无法正常显示的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个已知的微信8.0.7版本与uni-app地图组件的兼容性问题。从你的描述和代码来看,问题出现在微信8.0.7版本中markers标记点无法显示,而在其他环境均正常。

分析你的代码,markers数据结构和赋值逻辑正确,问题可能源于:

  1. 微信8.0.7版本对地图组件渲染机制的变更
  2. markers数据更新的时机问题

建议尝试以下解决方案:

方案一:强制重新渲染地图

// 在设置markers后添加
this.$nextTick(() => {
    this.$refs.map.updateLayout()
})

方案二:延迟设置markers

setTimeout(() => {
    let obj = {
        id: 1,
        clusterId: 1,
        latitude: res.latitude,
        longitude: res.longitude,
        alpha: 1
    };
    this.markers = [obj];
}, 100);

方案三:添加完整的marker属性

let obj = {
    id: 1,
    clusterId: 1,
    latitude: res.latitude,
    longitude: res.longitude,
    alpha: 1,
    iconPath: '/static/icon.png', // 确保图标路径正确
    width: 30,
    height: 30
};
回到顶部