uni-app nvue下的map组件，缩放时触发的事件缺少了和小程序一样的event.detail.scale参数

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

uni-app nvue下的map组件，缩放时触发的事件缺少了和小程序一样的event.detail.scale参数

类别 信息
产品分类 uniapp/App
PC开发环境 Windows
PC开发环境版本 node20
HBuilderX类型 正式
HBuilderX版本 4.24
手机系统 Android
手机系统版本 Android 7.0
手机厂商 华为
手机机型 BTV-W09
页面类型 nvue
Vue版本 vue3
打包方式 离线
项目创建方式 HBuilderX

示例代码：

<map  
  id="mapEle"  
  class="map"  
  :style="mapStyle"  
  name="map"  
  :scale="mapData.scale"  
  :longitude="mapData.longitude"  
  :latitude="mapData.latitude"  
  :markers="markers"  
  @labeltap="handleLabelTap"  
  @markertap="handleLabelTap"  
  @regionchange="handleRegionChange"  
>
</map>

export default {  
  // ...  
  methods: {  
    handleRegionChange(event) {  
      console.log('handleRegionChange', event)  
      if (event.causedBy !== 'scale') return  
      const scale = event.detail.scale // 没有这个返回参数  
      if (!scale) return  
      // ...  
    },  
  }  
}

操作步骤：

  1. nvue页面正常渲染的map组件
  2. 操作地图缩放
  3. 查看HbuilderX上的打印信息

预期结果：

缩放end事件有返回event.detail.scale属性

实际结果：

缩放end事件没有返回event.detail.scale属性

bug描述：

subNVues页面的nvue下的map组件（使用高德地图），缩放时触发的事件缺少了和小程序一样的event.detail.scale参数


Harmonyos Next教程
1 回复

在 uni-app 的 nvue 环境下，map 组件的缩放事件确实与小程序的 event.detail.scale 参数有所不同。不过，uni-app 提供了其他方式来获取地图的缩放级别。你可以通过监听地图的 scale 事件并结合 map 组件的 getRegion 方法来获取当前的缩放级别。

以下是一个如何在 nvue 中实现这一功能的代码示例：

<template>
  <div>
    <map
      id="myMap"
      :longitude="longitude"
      :latitude="latitude"
      :scale="scale"
      @scale="onMapScale"
      style="width: 100%; height: 300px;"
    ></map>
    <text>{{ currentScale }}</text>
  </div>
</template>

<script>
export default {
  data() {
    return {
      longitude: 116.397428, // 北京的经度
      latitude: 39.90923,   // 北京的纬度
      scale: 14,            // 初始缩放级别
      currentScale: 14      // 当前缩放级别
    };
  },
  methods: {
    onMapScale(event) {
      // event 对象不包含 scale 属性，所以需要通过其他方式获取
      const mapContext = uni.createMapContext('myMap');
      mapContext.getRegion({
        success: (res) => {
          // 这里可以获取到缩放级别，但注意它是以范围形式给出的
          // res.scale 并不是直接的缩放级别，但可以通过其他属性计算
          // 不过在 nvue 下，我们更关注缩放变化，可以通过设置一个标志位来处理
          this.currentScale = '缩放级别变化中...'; // 实际应用中可能不需要这行
          // 在这里你可以根据需求处理缩放变化逻辑
          console.log('地图缩放事件触发，但需要通过getRegion获取具体信息', res);
        },
        fail: (err) => {
          console.error('获取地图区域信息失败', err);
        }
      });
    }
  }
};
</script>

<style>
/* 样式可以根据需要调整 */
</style>

需要注意的是，getRegion 方法返回的结果中并没有直接的 scale 属性，而是提供了地图的边界信息（如 southwest 和 northeast 坐标），你可以通过这些信息间接推算缩放级别，但在 nvue 环境下，更常见的是监听缩放事件并执行相应的逻辑，而不是直接获取缩放级别。

此外，由于 nvue 和小程序在 API 实现上存在差异，因此某些参数或方法可能不可用或行为不同。在实际开发中，建议查阅最新的 uni-app 文档以获取最准确的信息。

回到顶部