qq_38166944
-jieshi
采纳率40%
2020-03-09 11:41

页面整体使用transform scale 后 会和高德地图的点击冲突

5

页面整体使用transform scale 会导致 高德地图点击页面上的标注处问题,应该是点击范围出现了迁移。
加了下面这个样式后会出现上述问题。图片说明

不加上述transform scale 则不会出现这个问题
图片说明

有谁遇到过这样的问题吗?求解。

  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 复制链接分享
  • 邀请回答

4条回答

  • qq_35662706 qq_35662706 1年前

    默认2D viewMode 3D 就解决啦 鄙视乱回答的

    点赞 3 评论 复制链接分享
  • weixin_45876226 weixin_45876226 10月前

    遇到了同样的问题,我的项目中是这样,在地图container外面有别的父元素设置了transform:scale(),最后我是通过给container也设置tansform:scale(),例如父元素设置了scale(0.5),那么container就设置scale(2),最后鼠标移动错位和点击时间错位问题解决了。 当然我感觉这是一个笨办法,目前还没有找到别的方法解决这个问题,如果有好心人知道的话,麻烦告诉我一下,谢谢

    点赞 1 评论 复制链接分享
  • weixin_44775548 Ljsxx 1月前

    已解决,把高德地图的组件放到 iframe 标签里面,在 iframe 标签的父组件做 transform:scale()

    <!DOCTYPE html>
    <html lang="en">
    <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
      <style>
        html {
          width: 100%;
          height: 100%;
        }
        body {
          width: 100%;
          height: 100%;
          transform: scaleX(0.5);
          transform-origin: left;
        }
        iframe {
          width: 100%;
          height: 100%;
        }
      </style>
    </head>
    <body>
      <iframe src="https://ditu.amap.com/place/B0FFHQ2LLW" frameborder="0"></iframe>
    </body>
    </html>
    

    点赞 评论 复制链接分享
  • caozhy 回答这么多问题就耍赖把我的积分一笔勾销了 1年前
    点赞 评论 复制链接分享

为你推荐