uni-app map组件谷歌地图使用点聚合后,@markertap 事件不响应,但会移动到中心点
uni-app map组件谷歌地图使用点聚合后,@markertap 事件不响应,但会移动到中心点
开发环境 | 版本号 | 项目创建方式 |
---|---|---|
Windows | win 10 专业版 20H2 | HBuilderX |
产品分类:uniapp/App
PC开发环境操作系统:Windows
手机系统:Android
手机系统版本号:Android 11
手机厂商:vivo
手机机型:Y55S
页面类型:nvue
vue版本:vue3
打包方式:云端
项目创建方式:HBuilderX
### 示例代码:
```html
<template>
<view class="pi-pages-home-map">
<map v-if="screenHeight" id="myMap"
style="{width: '750rpx', height: screenHeight + 'px'}" :latitude="latitude" :longitude="longitude"
markers="markersList" [@markertap](/user/markertap)="markertap">
</map>
</view>
</template>
<script setup lang="ts">
import { ref, onMounted, nextTick, getCurrentInstance } from 'vue';
const { ctx } : any = getCurrentInstance();
const mapCtx : any = ref({});
const markersList : any = ref([]);
const longitude = ref(113.549777);
const latitude = ref(22.391789);
const statusBarHeight = ref(0);
const screenHeight = ref(0);
onMounted(() => {
uni.hideTabBar({})
init();
})
const init = async () => {
let systemInfo = uni.getSystemInfoSync();
statusBarHeight.value = systemInfo.statusBarHeight;
screenHeight.value = systemInfo.screenHeight;
nextTick(() => {
mapCtx.value = uni.createMapContext("myMap", ctx);
allMarkersShow();
setTimeout(() => {
markersList.value = [
{
"width": 35,
"height": 35,
"id": 0,
"iconPath": "/static/images/home/mall-position.png",
"latitude": 22.391789,
"longitude": 113.549777,
"joinCluster": true,
"zIndex": 99999,
"customCallout": {
"anchorY": 35,
"anchorX": 0,
"display": "ALWAYS"
},
"acFreeGunCount": null,
"dcFreeGunCount": null,
"acGunTotalCount": 0,
"dcGunTotalCount": 0,
"staPkId": "012744040201",
"minPrice": "--"
},
{
"width": 35,
"height": 35,
"id": 1,
"iconPath": "/static/images/home/mall-position.png",
"latitude": 22.39327,
"longitude": 113.549585,
"joinCluster": true,
"zIndex": 99999,
"customCallout": {
"anchorY": 35,
"anchorX": 0,
"display": "ALWAYS"
},
"acFreeGunCount": 0,
"dcFreeGunCount": 0,
"acGunTotalCount": 63,
"dcGunTotalCount": 45,
"staPkId": "012744040232",
"minPrice": "--"
},
{
"width": 35,
"height": 35,
"id": 2,
"iconPath": "/static/images/home/mall-position.png",
"latitude": 22.38902,
"longitude": 113.550245,
"joinCluster": true,
"zIndex": 99999,
"customCallout": {
"anchorY": 35,
"anchorX": 0,
"display": "ALWAYS"
},
"acFreeGunCount": 0,
"dcFreeGunCount": 0,
"acGunTotalCount": 26,
"dcGunTotalCount": 0,
"staPkId": "012744040225",
"minPrice": "--"
},
{
"width": 35,
"height": 35,
"id": 3,
"iconPath": "/static/images/home/mall-position.png",
"latitude": 22.390667,
"longitude": 113.551034,
"joinCluster": true,
"zIndex": 99999,
"customCallout": {
"anchorY": 35,
"anchorX": 0,
"display": "ALWAYS"
},
"acFreeGunCount": 0,
"dcFreeGunCount": 0,
"acGunTotalCount": 0,
"dcGunTotalCount": 30,
"staPkId": "012744040226",
"minPrice": "--"
},
{
"width": 35,
"height": 35,
"id": 4,
"iconPath": "/static/images/home/mall-position.png",
"latitude": 22.38902,
"longitude": 113.550244,
"joinCluster": true,
"zIndex": 99999,
"customCallout": {
"anchorY": 35,
"anchorX": 0,
"display": "ALWAYS"
},
"acFreeGunCount": 0,
"dcFreeGunCount": 0,
"acGunTotalCount": 0,
"dcGunTotalCount": 9,
"staPkId": "012744040229",
"minPrice": "--"
}
]
},2000)
})
const allMarkersShow = () => {
mapCtx.value.initMarkerCluster({
enableDefaultStyle: false,
zoomOnClick: true,
gridSize: 60,
complete(res) {
console.log('initMarkerCluster........', res)
}
});
mapCtx.value.on("markerClusterCreate", (e : any) => {
let clusterMarkers = []
const clusters = e.clusters
clusters.forEach((cluster : any, index : number) => {
const {
center,
clusterId,
markerIds
} = cluster
if (markerIds.length > 1) {
let content = markerIds.length > 100 ? '99+' : markerIds.length + ''
let clusterObj = {
clusterId,
...center,
width: 136,
height: 140,
iconPath: '/static/images/home/all-markers.png',
joinCluster: false,
}
clusterMarkers.push(clusterObj)
}
})
if (clusterMarkers.length > 0) {
mapCtx.value.addMarkers({
markers: clusterMarkers,
clear: false,
})
}
});
}
const markertap = (e : any) => {
console.log('???????????????????')
}
</script>
操作步骤:
一开始执行就不行
预期结果:
@markertap 点击有用
实际结果:
@markertap 点击无响应
bug描述:
Maps 使用了谷歌地图,定位使用了系统定位,原本高德地图的点标记代码是正常运行的,然后现在换成了谷歌地图,发现点标记的点击事件会自动将点标记移动至中心点,但是 @markertap 事件无响应,H5 端正常
3 回复
有没有人回复一下啊,不要这样子。,,,
官方文档有毒 不用createMapContext就好了 去掉 createMapContext的逻辑 用map组件的markers传参 就能点了
在uni-app中使用map组件并结合谷歌地图(Google Maps)时,实现点聚合(Marker Clustering)功能后,如果@markertap
事件不响应但标记会移动到中心点,这通常是因为聚合标记(Cluster Marker)本身拦截了点击事件,而没有正确地将事件传递到单个标记上。以下是一个简化的代码示例,演示如何在uni-app中实现点聚合,并确保@markertap
事件能够正常工作。
首先,确保你已经在项目中引入了必要的谷歌地图库和聚合插件(如marker-clusterer
)。在uni-app中,这通常意味着你需要在HTML模板中正确配置map组件,并在JavaScript中处理标记和聚合逻辑。
HTML模板(使用Vue语法):
<template>
<view>
<map
id="map"
:longitude="longitude"
:latitude="latitude"
scale="14"
@markertap="onMarkerTap"
style="width: 100%; height: 100%;"
:markers="markers"
:settings="mapSettings"
></map>
</view>
</template>
JavaScript逻辑:
export default {
data() {
return {
longitude: 116.404,
latitude: 39.915,
markers: [],
mapSettings: {
// 谷歌地图配置
type: 'google',
styleId: 'your_google_map_style_id', // 可选
showLocation: true
}
};
},
mounted() {
this.initializeMap();
},
methods: {
initializeMap() {
// 假设你已经有了标记数据
const markersData = [
{ id: 1, latitude: 39.915, longitude: 116.404 },
{ id: 2, latitude: 39.916, longitude: 116.405 },
// 更多标记数据...
];
this.markers = markersData.map(marker => ({
...marker,
iconPath: '/static/marker.png', // 标记图标路径
width: 50,
height: 50
}));
// 初始化谷歌地图聚合(这里假设你有一个适配uni-app的marker-clusterer插件)
this.$nextTick(() => {
new MarkerClusterer(this.$refs.map, this.markers, {
gridSize: 80,
maxZoom: 17
});
});
},
onMarkerTap(event) {
console.log('Marker tapped:', event.markerId);
// 根据markerId处理点击事件
}
}
};
注意:
- 上述代码中的
MarkerClusterer
初始化部分需要适配uni-app环境,因为原生marker-clusterer
是为浏览器环境设计的。你可能需要寻找或开发一个适用于uni-app的聚合插件。 @markertap
事件在uni-app中可能因平台差异(如小程序、H5)而表现不同,确保在目标平台上测试。- 如果聚合标记仍然拦截事件,考虑在聚合插件的回调中手动触发点击事件,或检查插件文档以确认是否支持事件透传。