如何解决移动端高德地图强制横屏问题？

Z时代
2024-03-02
分类：IT

如何解决移动端高德地图强制横屏问题？

题目描述

如题，vue项目，之前只需要PC端使用，客户需求在移动端也能使用，但是要横屏样式才能正常。项目中用到了高德地图，结果强制横屏后其他东西改了改也没啥问题了，但是地图方向完全反了，你上下滑他左右移动，点击事件位置也是乱的

题目来源及自己的思路

百度找到了横屏解决方案，利用js通过屏幕宽高判断横竖屏，然后用rotate旋转，竖屏时旋转，横屏时转回来。地图我想的是重写地图事件，但是想想都很头疼，就想问问有没有现成的api可以解决这种问题

相关代码

import $ from 'jquery'
export default {
  mounted () {
    var evt = 'onorientationchange' in window ? 'orientationchange' : 'resize'
    let orientationEvent = function () {
      setTimeout(() => {
        var width = document.documentElement.clientWidth
        var height = document.documentElement.clientHeight
        if (width > height) {
          $('#app').width(width)
          $('#app').height(height)
          $('#app').css('top', 0)
          $('#app').css('left', 0)
          $('#app').css('transform', 'none')
          $('#app').css('transform-origin', '50% 50%')
        } else {
          $('#app').width(height)
          $('#app').height(width)
          $('#app').css('top', (height - width) / 2)
          $('#app').css('left', 0 - (height - width) / 2)
          $('#app').css('transform', 'rotate(90deg)')
          $('#app').css('transform-origin', '50% 50%')
        }
      }, 200)
    }
    window.addEventListener(evt, orientationEvent, false)
    orientationEvent()
  }}