*使用官方示例的代码在vue2项目运行正常_mapContext.on可以监听到事件,在vue3项目里没有反应**
https://uniapp.dcloud.net.cn/api/location/map.html#createmapcontext
用户7810
- 发布：2023-07-05 17:03
- 更新：2023-07-26 18:09
- 阅读：1517
产品分类： uniapp/App
PC开发环境操作系统： Windows
PC开发环境操作系统版本号： win10
HBuilderX类型： Alpha
HBuilderX版本号： 3.8.5
手机系统： Android
手机系统版本号： Android 11
手机厂商： OPPO
手机机型： oppo A1
页面类型： nvue
vue版本： vue3
打包方式： 云端
项目创建方式： HBuilderX
操作步骤：
预期结果：
希望获得聚合簇的事件事件
希望获得聚合簇的事件事件
实际结果：
在vue3项目无反应
在vue3项目无反应
bug描述：
使用官方示例的代码在vue2项目运行正常_mapContext.on可以监听到事件,在vue3项目里没有反应
<template>
<view class="content">
<map id="map" class="map" :show-location="true" :latitude="latitude" :longitude="longitude"></map>
</view>
</template>
<script>
const img = '/static/logo.png';
export default {
data() {
return {
latitude: 23.099994,
longitude: 113.324520,
}
},
onReady() {
this._mapContext = uni.createMapContext("map", this);
// 仅调用初始化，才会触发 on.("markerClusterCreate", (e) => {})
this._mapContext.initMarkerCluster({
enableDefaultStyle: false,
zoomOnClick: true,
gridSize: 60,
complete(res) {
console.log('initMarkerCluster', res)
}
});
this._mapContext.on("markerClusterCreate", (e) => {
console.log("markerClusterCreate", e);
});
this.addMarkers();
},
methods: {
addMarkers() {
const positions = [
{
latitude: 23.099994,
longitude: 113.324520,
}, {
latitude: 23.099994,
longitude: 113.322520,
}, {
latitude: 23.099994,
longitude: 113.326520,
}, {
latitude: 23.096994,
longitude: 113.329520,
}
]
const markers = []
positions.forEach((p, i) => {
console.log(i)
markers.push(
Object.assign({},{
id: i + 1,
iconPath: img,
width: 50,
height: 50,
joinCluster: true, // 指定了该参数才会参与聚合
label: {
width: 50,
height: 30,
borderWidth: 1,
borderRadius: 10,
bgColor: '#ffffff',
content: `label ${i + 1}`
}
},p)
)
})
this._mapContext.addMarkers({
markers,
clear: false,
complete(res) {
console.log('addMarkers', res)
}
})
}
}
}
</script>
<style>
.content {
flex: 1;
}
.map {
flex: 1;
}
</style>
最佳回复
vue3 临时解决方案，参考下面的代码
this._mapContext.on({
name: "markerClusterCreate",
callback: (e) => {
console.log("markerClusterCreate", e);
const clusters = e.clusters
const markers = clusters.map(cluster => {
const {
center,
clusterId,
markerIds
} = cluster
return {
...center,
width: 60,
height: 60,
clusterId, // 必须
iconPath: img,
label: {
content: markerIds.length + '',
fontSize: 20,
width: 20,
height: 20,
bgColor: '#00ff00',
borderRadius: 30,
textAlign: 'center',
anchorX: 0,
anchorY: -30,
}
}
})
this._mapContext.addMarkers({
markers,
clear: false,
complete(res) {
console.log('clusterCreate addMarkers', res)
}
})
}
});
Diligent_UI - 【插件开发】【专治疑难杂症】【多款插件已上架：https://ext.dcloud.net.cn/publisher?id=193663(微信搜索飘逸科技UI小程序直接体验)】【骗子请绕道】问题咨询请加QQ群：120594820，代表作灵感实用工具小程序
map标签单独绑定需要的事件看看
-
用户7810 (作者)
其他事件都正常的,就是这个uni.createMapContext(mapId,this) 上的 .on方法的回调在vue3没反应.测试的vue2是正常的...
2023-07-05 17:17
用户7810 (作者)
对于视而不见,我方表示强烈谴责
-
哥们，实在是急的话可以试着用web-view加载本地页面的方式，加载web地图，点聚合等各种功能都有，我们公司的app对地图功能可以说重度依赖了，所以求稳定性用的是web地图，即使后面改原生地图也会保留web地图做保险的
2023-07-14 10:14
-
-
-
请问解决了吗,我也这样
-
-
回复 用户7810: 没有屏蔽，目前主要开发人员都去开发uts/uvue了，其他方面暂无分配人员较少，请见谅。后续uts/uvue开发好后，可能会要建议你使用uts/uvue来开发性能更好的app。
2023-07-26 11:30
-
用户7810 (作者)
回复 DCloud_UNI_GSQ: 感谢回复,大佬们辛苦了,uvue出来的话一定用,那能不能抽一点点时间帮忙搞一搞这个bug啊,vue2正常就是vue3监听不到,我想是不是哪个响应式的问题,可能不是难么难修复,实在是我vue3改vue2的话不现实啊,自己写这个点聚合我又太菜,只能求官方大大们修复修复了
2023-07-26 11:38
-
-
用户7810 (作者)
回复 DCloud_UNI_GSQ: 感谢再次回复,但愿可以早点抽个空看看啊,群里也有很多人遇到了这个问题,还是希望早点能够处理一下,支持uni感谢uni
2023-07-26 13:12
用户7810 (作者)
感谢大佬救命之恩啊,刚试了下,这样写可以监听到了,我工作保住了,太感谢了....
2023-07-26 14:44
用户7810 (作者)
6666666
2023-07-26 14:44
用户7810 (作者)
大佬.麻烦问一下.vue3 nvue 使用map的添加自定义点聚合样式,在视野显示标记点比较多时,每次都是先展示默认的点聚合样式,然后再加载覆盖自定义的点聚合样式,请问这个问题怎么处理啊,能不能不initMarkerCluster初始化后不要显示默认的聚合点样式啊,要不然在标记点较多时先显示默认样式再覆盖自定义样式相当难看啊
2023-08-11 21:37
用户7810 (作者)
就是说,我在页面初始化时已经initMarkerCluster和监听markerClusterCreate了,但在聚合点'markerClusterCreate'发生变化时 设置并添加点聚合样式的时候是在默认点聚合样式出现后的
2023-08-11 21:41
用户7810 (作者)
希望大帅哥能在有空的时候回复我一下啊.,.期待
2023-08-11 21:43
while
回复 用户7810: 老哥，这个有解决办法吗，点多了一闪一闪的很难看丫
2024-03-20 10:48
Analog
4.08版本 vue
this._mapContext = uni.createMapContext("map", this);
为什么这个 console 没有打印呢
2024-07-30 16:54
Analog
回复 Analog: vue2
2024-07-30 16:55