uni-app Map 地图上同一个点位多个rotate的marker，markertap事件不能返回正确的markerId

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

uni-app Map 地图上同一个点位多个rotate的marker，markertap事件不能返回正确的markerId

示例代码：

// nvue map示例  
<map id="myMap" style="width: 100%; flex: 1;" scale="15" :longitude="longitude"  
          :latitude=" latitude" :show-location=" !!locationPermission" :markers=" markers"  
         @markertap="makerTap" @labeltap="makerTap" @regionchange="onRegionChange" @tap="mapTap">  
 </map>  

//markers 示例  
[  
    {  
        "id": 0,  
        "iconPath": "../../static/imges/ic_loc_offline.png",  
        "latitude": 22.611764,  
        "longitude": 113.83889,  
        "zIndex": 0,  
        "dis": 697,  
        "width": 40,  
        "height": 40,  
        "devSn": "BTA-C005",  
        "rotate": -80,  
        "label": {  
            "anchorX": -31,  
            "anchorY": -16,  
            "content": "0",  
            "display": "ALWAYS",  
            "textAlign": "center",  
            "borderRadius": 50,  
            "fontSize": 12,  
            "padding": 3,  
            "borderWidth": 1,  
            "borderColor": "transparent",  
            "bgColor": "transparent",  
            "color": "white"  
        }  
    },  
    {  
        "id": 1,  
        "iconPath": "../../static/imges/ic_loc_offline.png",  
        "latitude": 22.611764,  
        "longitude": 113.83889,  
        "zIndex": 1,  
        "dis": 697,  
        "width": 40,  
        "height": 40,  
        "devSn": "SWAPTT",  
        "rotate": 0,  
        "label": {  
            "anchorX": -7,  
            "anchorY": -35,  
            "content": "0",  
            "display": "ALWAYS",  
            "textAlign": "center",  
            "borderRadius": 50,  
            "fontSize": 12,  
            "padding": 3,  
            "borderWidth": 1,  
            "borderColor": "transparent",  
            "bgColor": "transparent",  
            "color": "white"  
        }  
    },  
    {  
        "id": 2,  
        "iconPath": "../../static/imges/ic_loc_empty.png",  
        "latitude": 22.611764,  
        "longitude": 113.83889,  
        "zIndex": 3,  
        "dis": 697,  
        "width": 40,  
        "height": 40,  
        "devSn": "BTA0C12YZHH240516015",  
        "rotate": 80,  
        "label": {  
            "anchorX": 17,  
            "anchorY": -16,  
            "content": "0",  
            "display": "ALWAYS",  
            "textAlign": "center",  
            "borderRadius": 50,  
            "fontSize": 12,  
            "padding": 3,  
            "borderWidth": 1,  
            "borderColor": "transparent",  
            "bgColor": "transparent",  
            "color": "white"  
        }  
    }  
]

操作步骤：

Map组件上，同一个经纬度上有3个带旋转（rotate）的marker，分别点击3个marker , markertap 事件会都返回相同的 markerId

预期结果：

分别点击3个marker ，markertap 事件应返回marker中对应不同的marerId

实际结果：

分别点击3个marker , markertap 事件会都返回相同的 markerId

bug描述：

在HbuilderX 正式版 4.08 以后（即：高德地图sdk升级后，参考附件），Map 地图上同一个点位多个rotate的marker，markertap事件不能返回正确的markerId；（注：亲测 HbuilderX 正式版 3.99 版本正常）

image


Harmonyos Next教程
1 回复

在uni-app中使用Map组件时，如果同一个位置上有多个带旋转角度（rotate）的marker，并且希望在markertap事件中获取正确的markerId，确实需要注意一些细节。由于marker的重叠，直接点击可能会被覆盖的marker所拦截。不过，通过一些技巧，我们可以确保获取到正确的markerId。

以下是一个示例代码，展示如何在uni-app中设置多个带旋转角度的marker，并正确处理markertap事件：

<template>
  <view>
    <map
      id="map"
      :latitude="latitude"
      :longitude="longitude"
      scale="14"
      @markertap="onMarkerTap"
      style="width: 100%; height: 500px;"
    >
      <block v-for="(marker, index) in markers" :key="marker.id">
        <cover-view :latitude="marker.latitude" :longitude="marker.longitude" :marker-id="marker.id">
          <cover-image
            :src="marker.iconPath"
            :style="{ transform: 'rotate(' + marker.rotate + 'deg)', width: '50px', height: '50px' }"
          ></cover-image>
        </cover-view>
      </block>
    </map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.9042,
      longitude: 116.4074,
      markers: [
        { id: 1, latitude: 39.9042, longitude: 116.4074, iconPath: '/static/marker1.png', rotate: 0 },
        { id: 2, latitude: 39.9042, longitude: 116.4074, iconPath: '/static/marker2.png', rotate: 45 },
        { id: 3, latitude: 39.9042, longitude: 116.4074, iconPath: '/static/marker3.png', rotate: 90 },
      ],
    };
  },
  methods: {
    onMarkerTap(e) {
      console.log('Marker tapped with ID:', e.markerId);
    },
  },
};
</script>

<style scoped>
/* Add any necessary styles here */
</style>

注意：

  1. 在上述代码中，我们使用了cover-view和cover-image来模拟marker，因为直接在map组件上设置marker的rotate属性并不被支持。通过cover-view和cover-image，我们可以自定义marker的外观和旋转角度。
  2. 每个cover-view都有一个唯一的marker-id属性，该属性在markertap事件中用于识别被点击的marker。
  3. onMarkerTap方法接收一个事件对象，该对象包含markerId属性，用于标识被点击的marker。

这种方法虽然绕过了直接在marker上设置rotate的限制，但实现了相同的功能，并且能够正确处理markertap事件。

回到顶部