uni-app 安卓端地图map组件设置marker的rotate旋转后点击范围问题以及iOS的rotate问题

在 uni-app 中使用 map 组件时，设置 marker 的 rotate 属性可以实现标记的旋转效果。然而，这个功能在 Android 和 iOS 平台上可能会遇到一些问题，特别是在点击范围的处理上。

1. Android 端 marker 旋转后的点击范围问题

在 Android 平台上，marker 旋转后，点击范围不会随着 marker 的旋转而改变。点击范围仍然是以未旋转的 marker 的矩形边界为准。这意味着即使 marker 旋转了，点击范围仍然是原来的矩形区域，可能会导致用户体验不佳。

解决方案：

• 手动调整点击区域：可以通过监听 marker 的点击事件，手动处理点击逻辑。比如，根据 marker 的旋转角度和当前点击位置，判断是否在旋转后的 marker 范围内。
• 使用自定义 marker：可以通过自定义 marker 的方式来实现旋转效果，这样可以更好地控制点击范围。

2. iOS 端 marker 的旋转问题

在 iOS 平台上，marker 的旋转可能会遇到以下问题：

• 旋转失效：在某些情况下，marker 的旋转可能不会生效。
• 旋转后显示异常：marker 旋转后可能会出现显示异常，比如图片变形或位置偏移。

解决方案：

• 检查图片资源：确保 marker 的图片资源是正方形，并且没有多余的空白区域。这样可以避免旋转时出现显示异常。
• 使用 iconPath：通过 iconPath 属性设置 marker 的图标，并确保图标的中心点正确。
• 更新 uni-app 版本：确保使用的是最新版本的 uni-app，因为新版本可能会修复一些已知的问题。

示例代码

<template>
  <view>
    <map
      id="map"
      :latitude="latitude"
      :longitude="longitude"
      :markers="markers"
      @markertap="onMarkerTap"
    ></map>
  </view>
</template>

<script>
export default {
  data() {
    return {
      latitude: 39.909,
      longitude: 116.39742,
      markers: [
        {
          id: 1,
          latitude: 39.909,
          longitude: 116.39742,
          iconPath: '/static/marker.png',
          width: 30,
          height: 30,
          rotate: 45 // 旋转角度
        }
      ]
    };
  },
  methods: {
    onMarkerTap(e) {
      const markerId = e.markerId;
      console.log('Marker tapped:', markerId);
      // 在这里处理点击逻辑
    }
  }
};
</script>