uni-app map地图组件在nvue中@callouttap和补充的@markertap方法均不生效

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

uni-app map地图组件在nvue中@callouttap和补充的@markertap方法均不生效

产品分类

uniapp/App

PC开发环境操作系统

Mac

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

macOS14.5

HBuilderX类型

正式

HBuilderX版本号

4.29

手机系统

Android

手机系统版本号

Android 15

手机厂商

OPPO

手机机型

findx7

页面类型

nvue

vue版本

vue2

打包方式

云端

项目创建方式

HBuilderX

示例代码

<map :enable-satellite="isMap" style="flex:1;" :style="{height:Height+'px'}" :latitude="latitude" :longitude="longitude" :scale="scale" :markers="markers" [@callouttap](/user/callouttap)="onCallouttap"></map>

操作步骤

[
    {
        "id": 200000001,
        "latitude": "31.238521",
        "longitude": "121.483723",
        "ids": "1852545534185250818",
        "width": 24,
        "height": 24,
        "types": "出租",
        "iconPath": "https://admin.hotelquan.com/img/icon/dingwei.png",
        "callout": {
            "content": "上海黄浦区...\n面积:4500\n租金:2.80元/㎡/天",
            "bgColor": "rgb(43,71,249)",
            "color": "#fff",
            "fontSize": 12,
            "padding": 5,
            "display": "ALWAYS",
            "borderRadius": "4"
        }
    },
    ...
]

预期结果

实际结果

bug描述

每一个markers都绑定了唯一的id,但是在ios中正常可以触发@callouttap方法,测试多台安卓,在之前版本测试中是生效的,突然不生效,苹果手机是都可以触发这个事件的,


4 回复

技术大佬们能帮忙看看问题嘛?


没人管这个问题吗?

nvue页面相关的功能已不再维护,如果确实需要解决可走付费技术支持来解决。

在uni-app中使用nvue开发时,确实可能会遇到一些问题,比如map组件的@callouttap和补充的@markertap方法不生效。这通常是由于nvue和vue在事件处理机制上的差异导致的。在nvue中,我们更多地依赖于原生事件处理机制。以下是一个在nvue中使用map组件并处理marker点击事件的代码示例:

<template>
  <div>
    <map
      id="map"
      :longitude="longitude"
      :latitude="latitude"
      :scale="scale"
      :markers="markers"
      style="width: 100%; height: 100%;"
      @tap="onMapTap"
      ref="mapRef"
    ></map>
  </div>
</template>

<script>
export default {
  data() {
    return {
      longitude: 116.404,
      latitude: 39.915,
      scale: 15,
      markers: [
        {
          id: 1,
          latitude: 39.915,
          longitude: 116.404,
          title: 'Marker 1',
          iconPath: '/static/marker.png',
          width: 50,
          height: 50,
        },
      ],
    };
  },
  methods: {
    onMapTap(e) {
      // 获取map组件实例
      const map = this.$refs.mapRef.nativeView;
      // 监听marker的点击事件
      map.onMarkerTap = (event) => {
        const marker = this.markers.find((m) => m.id === event.markerId);
        if (marker) {
          console.log('Marker tapped:', marker);
          // 这里可以添加自定义的逻辑,比如跳转页面等
        }
      };
    },
  },
  onReady() {
    // 确保map组件已经渲染完成后再绑定事件
    this.$nextTick(() => {
      this.onMapTap({}); // 手动触发一次以绑定事件
    });
  },
};
</script>

<style scoped>
/* 添加样式以适应布局 */
</style>

在上面的代码中,我们使用了ref来获取map组件的原生视图对象,并在onMapTap方法中手动绑定了markerTap事件。注意,由于nvue的事件绑定机制与vue有所不同,我们不能直接在模板中使用@markertap事件监听器。相反,我们需要通过原生视图对象来监听事件。

此外,由于nvue的生命周期和渲染机制与vue有所不同,我们在onReady生命周期钩子中使用$nextTick来确保map组件已经渲染完成,然后再绑定事件。

这种方法虽然绕过了直接在模板中绑定事件的限制,但实现了在nvue中处理map组件的marker点击事件的需求。希望这个示例能帮助你解决问题。

回到顶部