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

nvue(native vue 的缩写)官网介绍

前言

由于这个app项目立项时间很紧,没有时间做技术预研就选了uniapp,地图又是首要功能而且是首页,所以一步一个坑了属于是。
当项目中有使用mapvideolive-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的说明一样写在文档里。

相关推荐
灵感__idea4 小时前
JavaScript高级程序设计(第5版):好的编程就是掌控感
前端·javascript·程序员
烛阴5 小时前
Mix
前端·webgl
代码续发5 小时前
前端组件梳理
前端
试图让你心动6 小时前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
陈不知代码6 小时前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记6 小时前
sass中@mixin与 @include
前端·sass
源码_V_saaskw6 小时前
JAVA图文短视频交友+自营商城系统源码支持小程序+Android+IOS+H5
java·微信小程序·小程序·uni-app·音视频·交友
陈琦鹏6 小时前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数7 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante7 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端