1***@163.com
1***@163.com
  • 发布:2024-04-30 15:10
  • 更新:2024-04-30 15:10
  • 阅读:94

【报Bug】 map组件在微信公众号内嵌的h5

分类:uni-app

产品分类: 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方法不触发.

2024-04-30 15:10 负责人:无 分享
已邀请:

要回复问题请先登录注册