uni-app 内置组件 map 的 @callouttap 事件无法获取 markerId

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

uni-app 内置组件 map 的 @callouttap 事件无法获取 markerId

项目属性 信息
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 win11
HBuilderX类型 正式
HBuilderX版本 4.01
手机系统 Android
手机系统版本 Android 14
手机厂商 华为
手机机型 vivo
页面类型 vue
vue版本 vue3
打包方式 云端
项目创建方式 HBuilderX

示例代码:

<map  
    :latitude="centerLat"  
    :longitude="centerLng"  
    :enable-3D="true"  
    :markers="markers"  
    @markertap="onClick"  
    [@callouttap](/user/callouttap)="onClick"  
/>

操作步骤:

  1. 11

预期结果:

  1. 11

实际结果:

  1. 11

bug描述:

内置组件map的@callouttap事件,e.detail = {markerId}拿不到markerId,显示NaN


13 回复

@markertap="onClick"这个能拿到,而@callouttap="onClick"拿不到


看我下面回复,请你指出我如何复现和验证你的问题。

大佬解决了吗,我也是同样问题

没有,严重bug

看我下面回复,请你指出我如何复现和验证你的问题。

现在解决了吗,我也拿不到那个值

看我下面回复,请你指出我如何复现和验证你的问题。

回复 DCloud_UNI_OttoJi: web端

感谢反馈,你提到 hbuilderx 运行 vue3 项目在安卓平台拿不到 callouttap ,我验证下。

因为你提供的 demo 不完整,所以我提供我的可以直接运行的测试代码。
我使用下面的代码运行到 安卓平台,点击 label 文本 出现弹窗,点击弹窗内容。观察控制台发现 onMarkertap 和 onCallouttap 触发了,并且都可以打印 e.detail.markerId
请你运行我提供的 demo,验证我的说法,并提供我如何修改和验证你的问题。
<template>

<view>map demo</view> <map :longitude="dot.longitude" :latitude="dot.latitude" show-location @callouttap="onCallouttap" :markers="markers" @markertap="onMarkertap" style="outline: 1px solid red; width: 746rpx; height: calc(100vh - 200rpx)"></map>
</template> <script lang="ts" setup> import { onMounted, onUnmounted } from "vue";

const dot = { latitude: 39.916633014861084, longitude: 116.3198844199444 };
const dot2 = {
latitude: 39.919998434612495,
longitude: 116.31794540154829,
};

// 地图圆框
const circles = [
{
longitude: dot.longitude,
latitude: dot.latitude,
color: “#FF0000DD”,
fillColor: “#7cb5ec88”,
radius: 200,
strokeWidth: 1,
},
{
latitude: dot2.latitude,
longitude: dot2.longitude,
color: “#FF0000DD”,
fillColor: “#7cb5ec88”,
radius: 250,
strokeWidth: 1,
},
];
// markers 显示标记
const markers = [
{
id: 5,
longitude: dot.longitude,
latitude: dot.latitude,
width: 60,
height: 60,
title: “标注点名”,
iconPath: “/static/logo.png”,
rotate: 0, //45,
alpha: 0.5,
anchor: {
x: 0.5, // 0-1
y: 0.5,
},
iconLayout: {
params: {
count: “1”,
},
src: “/static/marker_icon.xml”,
},

  label: {  
    content: "label 文本",  
    color: "#ff0000",  
    fontSize: 16,  
    // x,y  
    borderRadius: 10,  
    borderWidth: 2,  
    borderColor: "#000000",  
    bgColor: "#ffffff",  
    padding: 5,  
    textAlign: "center",  
    ["aria-label"]: "标注地名23",  
  },  
  /** 有 customCallout 属性自动失效  */  
  callout: {  
    // 这里设置无效  
    content: "文本 11",  
    color: "#ff0000",  
    fontSize: 16,  
    borderRadius: 10,  
    borderWidth: 2,  
    borderColor: "#000000",  
    bgColor: "#ffffff",  
    padding: 5,  
    // display: "BYCLICK",  
    display: "ALWAYS", // BYCLICK  
    textAlign: "center",  
    anchorX: 0,  
    anchorY: 0,  
  },  
  // 普通自定义写法  
  __customCallout: {  
    type: 2,  
    descList: [  
      {  
        desc: "预计",  
        descColor: "#333333",  
      },  
      {  
        desc: "5分钟",  
        descColor: "#108EE9",  
      },  
      {  
        desc: "到达",  
        descColor: "#333333",  
      },  
    ],  
    isShow: 1,  
  },  
  // 高级自定义写法  
  _customCallout: {  
    canShowOnTap: true,  
    layout: {  
      params: {  
        title: "标题栏",  
        bgColor: "#FF00FF",  
      },  
      src: "/static/marker_customcallout.xml",  
    },  
    layoutBubble: {  
      style: "bubble",  
      bgColor: "#898986",  
      borderRadius: 0,  
    },  
  },  
},  

];

// polyline 路线
const polyline = [
{
points: [
{
latitude: 39.92070131041505,
longitude: 116.31702092378805,
// name: “八一湖旅社”
},
{
latitude: 39.91831987978079,
longitude: 116.31675588473558,
name: “樱花湖”,
},
{
latitude: 39.912221631121064,
longitude: 116.3193962250391,
// name: “世纪园”
},
],
color: “#FF0000DD”,
width: 1,
dottedLine: false,
// arrowLine: true,
// arrowIconPath:"/static/logo.png",
borderColor: “#ffffff”,
borderWidth: 1,
},
];

// onMounted(() => {
// console.log(“map onMounted”);
// });

onUnmounted(() => {
console.log(“map onUnmounted”);
});

const onRegionchange = (e : Event) => {
console.log(“区域滚动,视野发生变化,onRegionchange–”, e.type, e.target);
// console.log(“区域滚动,onRegionchange–”, e.type, e.target);
};
// onTap e
const onTap = (e : Event) => {
console.log(“随意点击,onTap–”);
// console.log(“随意点击,onTap–”, e.type, e.target);
};
const onUpdated = (e : Event) => {
console.log(“onUpdated–”, e.type, e.target);
};
const onAnchorpointtap = (e : Event) => {
console.log(“onAnchorpointtap”, e);
};
const onPoitap = (e : any) => {
console.log(“建筑选中onPoitap–”, e.target?.name, e.target);
};
const onMarkertap = (e : any) => {
console.log(“选中了marker,onMarkertap, markerId:”, e.detail.markerId);
};
const onLabeltap = (e : Event) => {
console.log(“label 点击,onLabeltap”, e);
};
const onCallouttap = (e : Event) => {
console.log(“气泡点击,onCallouttap”, e.detail.markerId);
};
const onControltap = (e : Event) => {
console.log(“onControltap”, e);
};
</script>

<style></style>

在版本3.0.0-4020320240708001,网页端onCallouttap的e.detail.markerId确实拿不到,微信小程序可以

什么时候能修复啊 急急急

uni-app 中,map 组件的 @callouttap 事件确实存在无法直接获取 markerId 的问题。这是因为 @callouttap 事件回调的参数中并没有直接提供 markerId 的信息。

解决方法

为了在 @callouttap 事件中获取 markerId,你可以通过以下方式实现:

  1. 使用 markers 数组的索引:在 markers 数组中,每个 marker 都有一个唯一的 id。你可以在 markers 数组中根据索引找到对应的 marker,从而获取 markerId

  2. 自定义 markercallout 内容:在 markercallout 中添加自定义数据,然后在 @callouttap 事件中通过 e.detail.markerId 获取。

示例代码

<template>
  <view>
    <map
      :markers="markers"
      @callouttap="handleCalloutTap"
      style="width: 100%; height: 300px;"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      markers: [
        {
          id: 1,
          latitude: 39.909,
          longitude: 116.39742,
          title: 'Marker 1',
          callout: {
            content: 'Marker 1 Callout',
            color: '#ffffff',
            fontSize: 14,
            borderRadius: 5,
            bgColor: '#007AFF',
            padding: 5,
            display: 'ALWAYS',
            // 自定义数据
            customData: {
              markerId: 1
            }
          }
        },
        {
          id: 2,
          latitude: 39.919,
          longitude: 116.40742,
          title: 'Marker 2',
          callout: {
            content: 'Marker 2 Callout',
            color: '#ffffff',
            fontSize: 14,
            borderRadius: 5,
            bgColor: '#007AFF',
            padding: 5,
            display: 'ALWAYS',
            // 自定义数据
            customData: {
              markerId: 2
            }
          }
        }
      ]
    };
  },
  methods: {
    handleCalloutTap(e) {
      // 通过自定义数据获取 markerId
      const markerId = e.detail.markerId;
      console.log('Callout tapped, markerId:', markerId);
      // 其他处理逻辑
    }
  }
};
</script>
回到顶部
AI 助手
你好,我是IT营的 AI 助手
您可以尝试点击下方的快捷入口开启体验!