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

