使用vite+vue3开发移动端遇到的问题及天地图的基本使用

首先是登录页面的布局

• 1、 点击input框的时候，键盘弹框，此时的页面可视区域变小，有可能导致页面样式进行变形
  • 1.1、由于我使用的是vw进行页面布局，键盘弹框弹出的时候，感觉从新进行计算样式了，最后只能将样式的单位写死为vw，这种就是正常布局，没有使用margin，padding等，上面要是有空的需要margin啥的，我用了一个空标签，给了一个高度
  • 1.2、还有就是使用固定定位（由于我是样式重新进行计算，所以定位之后样式也会变小）

基于上面的登录页布局，点击输入框弹出键盘的时候，页面样式进行重新布局的问题进行解决

• 我使用的是vite，样式转化是用的postcss-px-to-viewport
• vite里面是支持postcss的，要在这里进行配置，不能单独的新建一个文件进行配置了，否则我在vivo手机上看到的都是样式会变得
• 在vite.config.js中进行配置（配置后就莫得问题了）

import pxtoVw from "postcss-px-to-viewport"

 css: {//跟build，base是同级
    postcss: {
      plugins: [
        pxtoVw({
          unitToConvert: "px", // 要转化的单位
          viewportWidth: 375, // UI设计稿的宽度
          unitPrecision: 6, // 转换后的精度，即小数点位数
          propList: ["*"], // 指定转换的css属性的单位，*代表全部css属性的单位都进行转换
          viewportUnit: "vw", // 指定需要转换成的视窗单位，默认vw
          fontViewportUnit: "vw", // 指定字体需要转换成的视窗单位，默认vw
          selectorBlackList: ["ignore-"], // 指定不转换为视窗单位的类名，
          minPixelValue: 1, // 默认值1，小于或等于1px则不进行转换
          mediaQuery: true, // 是否在媒体查询的css代码中也进行转换，默认false
          replace: true, // 是否转换后直接更换属性值
          landscape: false, // 是否处理横屏情况
        }),
      ],
    },
  },

天地图使用markers并添加标注到markers中间

let label = new T.Label({
    text: textLabel,
    position: marker.getLngLat(),//还有这个，一定要用marker的方法获取当前的经纬度
    offset: new T.Point(-(0.5 * (name.length * 14)), -36),//关键是这行代码，进行计算
  })

使用天地图3d小车轨迹运动，拉动进度条后，从当前的位置继续执行

• 首先使用new T.CarTrack进行动画
• 拖拽进度条的时候，将相应的经纬度进行计算，让前半段的经纬度使用画线的形式进行展示，当前的位置，重新初始化new T.CarTrack就可以了
• 那么第一次初始化的时候，小车还是在的，怎么取消掉呢，这个可以看官方提供的代码中有这个

data.carTrack._Remove();//用这个方法就可以清楚上一次的运行轨迹了

• 在移动端中添加多个圆形覆盖物，随着放大缩小，这个圆的大小也会变化，用户这边不太想要，最后使用圆中嵌套label，label文本中添加class，在class中添加不用圆的颜色，这样就不会变大变小了，当然你也可以使用背景图片