t***@qq.com
t***@qq.com
  • 发布:2024-02-20 11:43
  • 更新:2024-07-14 18:19
  • 阅读:382

【报Bug】内置组件map @callouttap事件拿不到markerId

分类:uni-app

产品分类: 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="onClick"  
        />

操作步骤:

11

预期结果:

11

实际结果:

11

bug描述:

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

2024-02-20 11:43 负责人:HRK_01 分享
已邀请:
t***@qq.com

t***@qq.com (作者)

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

  • DCloud_UNI_OttoJi

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

    2024-05-13 11:53

2***@qq.com

2***@qq.com

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

  • t***@qq.com (作者)

    没有,严重bug

    2024-03-21 17:11

  • DCloud_UNI_OttoJi

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

    2024-05-13 11:51

1***@163.com

1***@163.com

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

DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

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

DCloud_UNI_OttoJi

DCloud_UNI_OttoJi - 日常回复 uni-app/x 问题,如果艾特我没看到,请主动私信

因为你提供的 demo 不完整,所以我提供我的可以直接运行的测试代码。

我使用下面的代码运行到 安卓平台,点击 label 文本 出现弹窗,点击弹窗内容。观察控制台发现 onMarkertap 和 onCallouttap 触发了,并且都可以打印 e.detail.markerId

请你运行我提供的 demo,验证我的说法,并提供我如何修改和验证你的问题。

<template>  
  <div>  
    <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>  

  </div>  
</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***@qq.com

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

    2024-07-11 14:31

7***@qq.com

7***@qq.com - 嘿嘿

什么时候能修复啊 急急急

要回复问题请先登录注册