e***@qq.com
e***@qq.com
  • 发布:2024-09-25 17:36
  • 更新:2024-11-13 15:44
  • 阅读:82

【报Bug】急急急,谷歌地图标记点,@markertap点击事件没有回调。希望尽快解决下

分类:uni-app

产品分类: uniapp/App

PC开发环境操作系统: Windows

PC开发环境操作系统版本号: win10

手机系统: Android

手机系统版本号: Android 10

手机厂商: 华为

手机机型: 华为Mate 10

页面类型: nvue

vue版本: vue3

打包方式: 云端

项目创建方式: CLI

CLI版本号: 4.23

示例代码:
<template> <view class="pi-map"> <map id="map" ref="map" class="pi-map" scale="data.scale" latitude="data.latitude" longitude="data.longitude" @markertap="onTap"/>
</view>
</template>

<script lang="ts" setup>
import { reactive, ref, onMounted, computed, watch, nextTick } from 'vue';
import { getCurrentInstance } from 'vue';
import config from "@/config";

const img = '/static/logo.png';
const { ctx }: any = getCurrentInstance();
// 地图属性
const data = reactive({
title: 'map',
scale: 16,
latitude: 13.743980890903845,
longitude: 100.48840066400577,
markers: [] as Array<any>
});

const mapContext = ref<UniApp.MapContext>();

const platform = ref('');
const markers = ref([]);

const mounted = () => {
platform.value = uni.getSystemInfoSync().platform;
nextTick(()=> {
mapContext.value = uni.createMapContext("map", ctx);
addClusters();
});
setTimeout(() => {
addMarkers([{
latitude: 13.743980890903845,
longitude: 100.48840066400577,
treeNodeId: 22132132,
},{
latitude: 13.753980890903845,
longitude: 100.48840066400577,
treeNodeId: 22132133,
},{
latitude: 13.750980890903845,
longitude: 100.48840066400577,
treeNodeId: 22132134,
}]);
}, 1000)
}

/**

  • 添加聚合点
    */
    const addClusters = () => {
    // 仅调用初始化,才会触发 on.("markerClusterCreate", (e) => {})
    mapContext.value?.initMarkerCluster({
    enableDefaultStyle: false,
    zoomOnClick: true,
    gridSize: 60,
    complete(res: any) {
    console.log('initMarkerCluster', res)
    }
    });
    //聚合点创建监听事件,需要重新设置聚合点的样式(图标,文本),不然不会显示
    mapContext.value?.on("markerClusterCreate", (e: any) => {
    console.log("markerClusterCreate", e);
    let clusterMarkers = [] as Array<any>
    const clusters = e.clusters // 新产生的聚合簇
    clusters.forEach((cluster: any, index: any) => {
    const {
    center, // 聚合点的经纬度数组
    clusterId, // 聚合簇id
    markerIds // 已经聚合了的标记点id数组
    } = cluster
    const content = (markerIds.length > 99 ? '99+' : markerIds.length) + '';
    let clusterObj = {
    clusterId, //必须
    ...center,
    width: 40,
    height: 40,
    iconPath: img,
    label: { // 定制聚合簇样式
    content: content,
    fontSize: 16,
    color: '#ffffff',
    textAlign: 'center',
    anchorX: platform.value === 'ios'? undefined : (content.length > 1? -9 : -5),
    anchorY: platform.value === 'ios'? -30 : -10,
    },
    // {x, y},x表示横向(0-1),y表示竖向(0-1)。{x: .5, y: 1} 表示底边中点
    anchor: {
    x: 0.5,
    y: 0.5
    }
    }
    clusterMarkers.push(clusterObj)
    })
    // 添加聚合簇
    mapContext.value?.addMarkers({
    markers: clusterMarkers,
    clear: false, //是否先清空地图上所有的marker
    })
    });
    mapContext.value?.on('markerClusterClick', (res: any) => {
    showStationDetail(res.cluster.markerIds);
    });
    }

/**

  • 判断纬度是否合法,纬度的合法范围在 -90 到 90 之间。
  • @param latitude 维度
    */
    const isValidLatitude = (latitude: string)=> {
    return Number(latitude) >= -90 && Number(latitude) < 90;
    }

/**

  • 判断经度是否合法,经度的合法范围在 -180 到 180 之间。
  • @param longitude
    */
    const isValidLongitude = (longitude: string)=> {
    return Number(longitude) >= -180 && Number(longitude) <= 180;
    }

/**

  • 生成markId,使用treedId,长度大于9时取后面9位
  • @param treeId
    */
    const getMarkId = (treeId:string): number => {
    const id = treeId.length > 9? treeId.slice(treeId.length - 9, treeId.length) : treeId;
    return Number(id);
    }

/**

  • 添加标记点
  • @param stationList 站点列表
    */
    const addMarkers = (stationList ?: Array<any>) => {
    if (!mapContext.value) {
    return;
    }
    stationList = stationList || [];
    const positions = stationList.filter(item => item.latitude
    && item.longitude
    && isValidLatitude(item.latitude)
    && isValidLongitude(item.longitude)).map(item => {
    return {
    id: getMarkId(item.treeNodeId),
    latitude: Number(item.latitude),
    longitude: Number(item.longitude),
    // iconPath: img,
    }
    });

    const markers = [] as Array<any>
    positions.forEach((p, i) => {
    markers.push(
    Object.assign({}, {
    width: 40,
    height: 40,
    // joinCluster: true, // 指定了该参数才会参与聚合
    // anchor: {
    // x: 0.5,
    // y: 0.5
    // }
    }, p)
    )
    });

    // data.markers = markers;
    console.log('addMarkers', markers)
    console.log("mapContext.value", mapContext.value)
    mapContext.value?.addMarkers({
    markers,
    clear: true,
    complete(res) {
    console.log('addMarkers', res)
    }
    })
    };

// 点击标记点事件处理
const onMarker = (e: any) => {
console.log('onMarker');
uni.showToast({
duration: 1500,
title: '点击了标记点',
icon: 'none'
})
}

const onTap = (e: any) => {
console.log('onTap', e);
}

onMounted(mounted);
</script>

<style lang="scss" scoped>
@import './index';
</style>

操作步骤:

点击标记点@markertap绑定方法无回调

预期结果:

@markertap有回调

实际结果:

没有调@markertap绑定方法

bug描述:

谷歌地图标记点,@markertap点击事件没有回调。iOS可以,Andorid不行。

2024-09-25 17:36 负责人:无 分享
已邀请:
浩楠啊

浩楠啊

请问解决了嘛??

要回复问题请先登录注册