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

ATK無限大
  • 5
新手上路,请多包涵

题目描述

如题,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()
  }
}

你期待的结果是什么?实际看到的错误信息又是什么?

期待高德地图事件方向能跟随旋转的方向,有没有现成的api可以解决这种问题。
现在地图方向完全反了,你上下滑他左右移动,点击事件位置也是乱的

回复
阅读 543
1 个回答
ATK無限大
  • 5
新手上路,请多包涵
✓ 已被采纳

好久了,都忘记结束这个问题了,最后是让移动端的人员实现微信横屏,而不是网页横屏

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
宣传栏