uni-app nvue中map markers的气泡callout，在markers设置rotate后，marker与气泡callout出现偏差，callout不位于marker上方

uni-app nvue中map markers的气泡callout，在markers设置rotate后，marker与气泡callout出现偏差，callout不位于marker上方

示例代码：

that.markers = res.data.map(item => {  
    return {  
        id: item.carId,  
        longitude: item.Longitude,  
        latitude: item.Latitude,  
        width: 50,  
        height: 50,  
        iconPath: '/static/imgs/car_icon2.png',  
        rotate:Number(item.direction),  
        callout: {  
            content: item.carNo,  
            color: item.color == '蓝色' ? '#FFFFFF' : '#0F1B33',  
            fontSize: 14,  
            borderRadius: 4,  
            padding: 5,  
            bgColor: item.color == '蓝色' ? '#1890FF' : '#FFBC32',  
            textAlign: 'center',  
            display: 'ALWAYS'  
        }  
    }  
})


### 操作步骤：

预期结果：



### 实际结果：

bug描述：

APP nvue 中 的map markers 上的气泡callout，在markers设置的rotate后，marker跟气泡callout会有偏差，callout不在marker上方，会有位置偏差 rotate为0 或者不设置时 显示callout位置无偏差


更多关于uni-app nvue中map markers的气泡callout，在markers设置rotate后，marker与气泡callout出现偏差，callout不位于marker上方的实战教程也可以访问 https://www.itying.com/category-93-b0.html

6 回复

就是这样的 不是bug callout不会跟随marker旋转的，至少目前是这样设计的

更多关于uni-app nvue中map markers的气泡callout，在markers设置rotate后，marker与气泡callout出现偏差，callout不位于marker上方的实战教程也可以访问 https://www.itying.com/category-93-b0.html


谢谢，怎么才能让callout在 markers旋转后的上方呢？

回复 consoleLog123: 我看你只想换下箭头方向。不如多几个图片就可以了

回复 DCloud_Android_ST: 嗯呢 不好意思才看到。只设置的航向角，多几个图片的意思是 多渲染几个markers吗？

老哥，我nvue在app真机运行，气泡直接不显示，用的3.6.18

这是一个已知的 nvue map 组件的渲染问题。当 marker 设置了 rotate 旋转属性后，callout 气泡的位置计算会出现偏差，因为 callout 的定位仍然基于未旋转的 marker 坐标系。

临时解决方案：

  1. 避免使用 rotate：如果方向信息不是必须的，可以移除 rotate 属性。

  2. 使用自定义标注实现：放弃使用 map 组件的 callout，改用自定义 marker + 覆盖层的方式：

    • 将图标和文字合并成一张图片作为 marker 的 iconPath
    • 或者使用 cover-view 在 map 上覆盖显示气泡

  3. 调整 callout 位置：通过 anchor 属性手动修正：

    callout: {
  content: item.carNo,
  anchorX: 0.5,  // 水平锚点
  anchorY: 1,    // 垂直锚点
  // 其他配置...
}
回到顶部