uni-app map组件谷歌地图使用点聚合后,@markertap 事件不响应,但会移动到中心点

发布于 1周前 作者 nodeper 来自 Uni-App

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处理点击事件
    }
  }
};

注意

  1. 上述代码中的MarkerClusterer初始化部分需要适配uni-app环境,因为原生marker-clusterer是为浏览器环境设计的。你可能需要寻找或开发一个适用于uni-app的聚合插件。
  2. @markertap事件在uni-app中可能因平台差异(如小程序、H5)而表现不同,确保在目标平台上测试。
  3. 如果聚合标记仍然拦截事件,考虑在聚合插件的回调中手动触发点击事件,或检查插件文档以确认是否支持事件透传。
回到顶部