使用uniapp的nvue开发地图map功能踩坑记录

ZouNiMei2025-06-03 17:41

前言

由于这个app项目立项时间很紧，没有时间做技术预研就选了uniapp，地图又是首要功能而且是首页，所以一步一个坑了属于是。
当项目中有使用map、video、live-pusher等组件且属于主要功能时，非必要不要用uniapp ！

踩坑1：开发app时不要用vue写map

之前用vue写过几个前端map功能，本以为uniapp写app也大差不差用vue就行，于是让同事先把首页另一半非地图的UI先写了，留出map容器位置。

结果开始写map的时候发现运行到app后效果和网页完全不同，然后才翻了uniapp的文档发现需要用nvue。那就直接改文件后缀.vue转.nvue，结果样式完全错乱（文档有写很多css样式nvue不支持），乱到Cursor都拯救不了只能重写布局。

踩坑2：map的markers属性限制很多

具体请参考官网map组件介绍

我先说我遇到的一个问题。我用Cursor写代码，运行到iPhone模拟器上看效果，在写地图自定义marker时自动生成了以下代码：

js 复制代码

mapMarkers.value = [
      {
        ...省略,
        customCallout: {
          display: 'ALWAYS',
          anchorX: 0,
          anchorY: 20,
        },
      },
]

其中设置了偏移量anchorY，运行到iPhone模拟器和真机上后效果都没有问题，然后开心的写完了功能，然后Android同事说运行到Android上后没有偏移量。

调试了半天后发现文档里customCallout仅仅支持设置display这个属性。咱就是说，uniapp能不能起码保持下iOS、Android两端统一性啊？或者像下面display的说明一样写在文档里。