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

nvue（native vue 的缩写）官网介绍

当项目中有使用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：地图markers不要用ref来绑定

按照以往vue逻辑，向地图添加markers应该是下面这样写：

<map
 id="map"
 ref="mapRef"
 :markers="mapMarkers"
/>

const mapMarkers = ref([])

运行到iPhone模拟器和真机上后效果都没有问题，然后开心的写完了功能，然后Android同事说运行到Android上marker数量不对。咱就是说，uniapp能不能起码保持下iOS、Android两端统一性啊？

最终解决办法是不要使用:markers="mapMarkers"来修改地图上的markers，而是使用mapContext.value.addMarkers()方法：

<map
 id="map"
 ref="mapRef"
/>

onReady(() => {
  mapContext.value = uni.createMapContext('map')
})
const mapMarkers = ref([])

const updateMarkers => () {
    mapMarkers.value = [
      {...},
      {...},
    ]
    if (mapContext.value) {
      mapContext.value.addMarkers({
        markers: mapMarkers.value,
        clear: true,
        success: () => {
          // 添加marker成功
        },
        fail: () => {
          // 添加marker失败
        },
      })
    }
}

踩坑3：map的marker属性限制很多

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

我用Cursor写代码，运行到iPhone模拟器上看效果，在写地图自定义marker时自动生成了以下代码：

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

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

调试了半天后发现文档里customCallout仅仅支持设置display这个属性。两端不一致应该像下面display的说明一样写在文档里。

待更新

踩坑4：自定义marker

踩坑5：marker的customCallout