高德地图强制横屏后（旋转90deg）在手机上拖动方向问题（vue）

大屏需要在手机端横屏展示，强制横屏后，地图的拖动方向也相对正常的方向旋转90度

代码片段

html部分

<div
      id="mapInit"
      @touchstart.prevent="handleTouchStart"
      @touchmove="handleTouchMove"
      @touchend="handleTouchEnd"
      :style="{width:component.width+'px',height:component.height+'px'}"
    ></div>

js部分

 	handleTouchEnd() {
      this.pre = "";
      this.count = 0;
    },
    handleTouchStart(e) {
      this.pre = this.getLnglat(e.touches[0].clientY, e.touches[0].clientX);
      // console.log('start',this.pre);
    },
    handleTouchMove(e) {
      // return
      // const { windowWidth, windowHeight } = uni.getSystemInfoSync();
      this.count = this.count + 1;
      if (this.count % 3 != 0) {
        return;
      }
      // 构造成 Pixel 对象后传入
      var lnglat = this.getLnglat(e.touches[0].clientY, e.touches[0].clientX); // 获得 LngLat 对象
      let lng = this.mapObj.getCenter().lng - (lnglat.lng - this.pre.lng) / 2;
      let lat = this.mapObj.getCenter().lat + (lnglat.lat - this.pre.lat) / 2;
      this.mapObj.setCenter([lng, lat]);
    },
    getLnglat(x, y) {
      var pixel = new AMap.Pixel(x, y);
      return this.mapObj.containerToLngLat(pixel);
    },
    mapInit() {
      const { isMobile } = this;
      const { zoom, center, styleId } = this.option;
      let cen = JSON.parse(center);
      const map = new AMap.Map('mapInit', {
        center: cen,
        resizeEnable: true,
        // viewMode: "3D",
        zoom,
        dragEnable: !isMobile(),//手机端设置为false
        // dragEnable: false,
        showLabel: true,
        touchZoomCenter: 1,
        mapStyle: `amap://styles/${styleId}`,
      });
      // map.setFitView();
      this.mapObj = map;
      this.setMarker();
      if (this.eventList.length !== 0) {
        this.setEventMarker();
      }
    },
    //判断手机端还是PC端
    isMobile() {
      if (
        navigator.userAgent.match(
          /(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i
        )
      ) {
        return true;
      } else {
        return false;
      }
    },

可以通过调节(lnglat.lng - this.pre.lng) / 2中的2来改变移动的步数大小，数字越大移动越小；或者也可以调节this.count % 3

转载于文章https://blog.csdn.net/rubylint/article/details/106068247。非常感谢啦啦