uni-app map组件在微信公众号内嵌的h5中存在Bug

uni-app map组件在微信公众号内嵌的h5中存在Bug

产品分类:

uniapp/H5

PC开发环境操作系统:

Windows

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

23H2

浏览器平台:

Chrome

浏览器版本:

124.0.6367.91

项目创建方式:

CLI

CLI版本号:

vue3+ts

示例代码:

<map @markertap="markertap" id='map1' :circles="mapInfor.circle" :style="{ width: '100%', height }"  
@anchorpointtap="anchorpointtap"  
@callouttap='callouttap' @regionchange="regionChange" :latitude="mapInfor.latitude"  
longitude="mapInfor.longitude" show-location :markers="mapInfor.markers" :scale="mapInfor.scale">
    <cover-view class="sub-list" v-if="subList.length">
        <block v-for="item in subList" :key="item.id">
            <cover-view :class="{ 'sub-item': true, 'active': currentIndex == item.id }"
                @click="handleSubItem(item)">
                {{ item.name }}
            </cover-view>
        </block>
    </cover-view>
</map>  
//地图点位获取
const getlocaition = () => {
    const params = {
        longitude: mapInfor.latitude,
        latitude: mapInfor.latitude,
        // categoryId:catageryId.value
    };
    uni.showLoading()
    queryLifrcycle(params).then(res => { 
        const marker = res.data.map((item) => {  
            return Object.assign({}, {  
                id: item.id,  
                joinCluster: true,  
                latitude: Number(item.latitude), //纬度  
                longitude: Number(item.longitude),//经度  
                iconPath: '../../static/icons/gift.png', //显示的图标  
                rotate: 100, // 旋转度数  
                width: 15, //宽  
                height: 15, //高  
                alpha: 0.5,  
                title: '',  
                callout: {//自定义标记点上方的气泡窗口 点击有效  
                    content: item.name,//文本  
                    markerId:  item.id,  
                    color: '#fff',//文字颜色  
                    fontSize: 12,//文本大小  
                    borderRadius: 15,//边框圆角  
                    borderWidth: '10',  
                    anchorX: 20,  
                    anchorY: 10,  
                    bgColor: '#4b96f3',//背景颜色  
                    display: 'ALWAYS',//常显  
                },  
            })  
        })  
        setTimeout(_ => {  
            mapInfor.markers=[...marker];  
        },1000)  
    })
}

//点击标记点时触发
const markertap = (e) => {
    console.log(e, '点击标记点')
    emits('showPopup', true)
    emits('customSkip', { currentIndex, currentId, detail: e.detail })
    // proxy.$refs.popup.open();  
}

//点击子级分类
const handleSubItem = (item) => {
    catageryId.value = currentIndex.value = item.id
    getlocaition()
}

操作步骤:

  • handleSubItem 触发后,地图的markers更新,map组件重新渲染

预期结果:

  • handleSubItem 触发后,地图的markers更新,map组件重新渲染

实际结果:

  • 地图的点更新了,但是页面没有重新渲染

bug描述:

map组件更新markers时在微信开发者工具的微信公众号模块不生效(页面不重新渲染),链接在手机上直接打开是可以重新渲染的,但是打包后手机打开也不会渲染,另外addmarkers也不生效,数据更新后再浏览器打开是重新渲染的,但是新的点位的markertap方法不触发.


更多关于uni-app map组件在微信公众号内嵌的h5中存在Bug的实战教程也可以访问 https://www.itying.com/category-93-b0.html

回到顶部