解决页面整体使用transform scale后高德地图点位点击偏移错位问题

最近在可视化项目中使用 css3 transform：scale（）封装了一个组件 让页面缩小或者放大自适应屏幕

js文件：

import React, { useState, useEffect } from 'react';
import { useDebounceFn } from 'ahooks';
import styles from './index.module.less';
 
export default ({ width, height, children }) => {
  const getScale = () => {
    const x = window.innerWidth / width;
    const y = window.innerHeight / height;
    return { x, y };
  };
 
  console.log(width, height, 'props');
 
  const [scale, setScale] = useState(getScale());
 
  const { run: handleScale } = useDebounceFn(
    () => {
      const s = getScale();
      setScale(s);
    },
    {
      wait: 500,
    }
  );
 
  useEffect(() => {
    window.addEventListener('resize', handleScale);
  }, []);
 
  useEffect(() => {
    console.log('当前缩放比例', scale);
  }, [scale]);
 
  return (
    <div
      className={styles['scale-box']}
      style={{
        transform: `scale(${scale.x},${scale.y}) translateX(-50%)`,
        WebkitTransform: `scale(${scale.x},${scale.y}) translateX(-50%)`,
        width,
        // minHeight: window.innerHeight,
      }}
    >
      {children}
    </div>
  );
};

css文件：

.scale-box {
  position: absolute;
  top: 0;
  left: 50%;
  transform-origin: 0 0;
  transition: 0.3s;
}

然后发现使用 transform：scale（）缩放后会导致高德地图的点位点击的时候会出现 点位偏移 错位的情况 找了很多方法 最后用 iframe 解决了

把地图单独封装一个组件 拿 iframe 去引入这个组件

    <iframe
       className="map_iframe"
       width="808px"
       height="953px"
       src={`http://${window.location.host}/maprouter`}
       frameBorder="0"

到此这篇关于解决页面整体使用transform scale后高德地图点位点击偏移错位问题的文章就介绍到这了,更多相关面整体使用transform scale内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 解决页面整体使用transform scale后高德地图点位点击偏移错位问题

    最近在可视化项目中使用 css3 transform:scale()封装了一个组件 让页面缩小或者放大自适应屏幕 js文件: import React, { useState, useEffect } from 'react'; import { useDebounceFn } from 'ahooks'; import styles from './index.module.less';   export default ({ width, height, children }) => {  

  • vue+高德地图实现地图搜索及点击定位操作

    首先需要在index.html中引入高德地图的js链接,key需要换成你自己的key 最近有个需求是实现一个使用地图搜索定位的功能,在网上参考了下其他的文章,感觉不是很完善,自己整理了一下,可以实现点击定位,搜索列表定位等功能,可能有些地方是多余的,需要的自己看着改下 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=你的key"></

  • Vue使用高德地图实现城市定位

    本文实例为大家分享了Vue使用高德地图实现城市定位的具体代码,供大家参考,具体内容如下 一 前端选择框点击跳转至地图选址页面 <van-row class="address_item"> <van-col span="6" class="item-title">收货地址</van-col> <van-col span="18"> <p class="item&qu

  • 解决uni-app微信小程序input输入框在底部时,键盘弹起页面整体上移问题

    解决uni-app微信小程序input输入框在底部时,键盘弹起页面整体上移问题

    目录 问题描述: 问题分析: 解决思路: 重点在这里!!!我踩坑被折磨很久的一个地方!!!一定要用 px!!! 总结: 问题描述: 最近的做了个客服聊天的功能,遇到一个问题如下:在手机上点击聊天页底部的input框后,键盘弹起同时页面会整体上移,标题栏被顶上去了.如下图: 问题分析: input 获取焦点时会自动调起手机键盘,设置 :adjust-position="true",会导致键盘弹起时页面整体上移 解决思路: 设置使键盘弹起使页面不上移 设置输入框所在盒子为绝对定位 键盘弹起

  • 解决Vue在封装了Axios后手动刷新页面拦截器无效的问题

    项目类型:vue+vux+axios 刚开始,把Axios封装在了http.js文件里面,然后为了使用VUX的提示框消息,把拦截器直接写在了main.js里面.直接调用接口,一切正常. 然而因为返回值有统一的code错误代码提示,所以在拦截器里面加入了code的判断以便统一返回值.刚开始一切都是按照预期的结果来走的.就在一个夜黑风高的晚上,我头晕眼花的按F5手动刷新了一下页面,惊奇的发现拦截器失效了,并没有拦截外面的Coode Json代码层,而是直接把服务器的全部json数据劈头盖脸的砸在了我

  • 关于vue2强制刷新,解决页面不会重新渲染的问题

    问题描述: 在使用Vue框架开发时,在函数中改变了页面中的某个值,在函数中查看是修改成功了,但在页面中没有及时刷新改变后的值: 解决: 运用 this.$forceUpdate();  //强制刷新,解决页面不会重新渲染的问题 例: <template> <div> <el-card> <ul class="list-style-none title-list"> <li v-for="item in titleList&

  • vue主动刷新页面及列表数据删除后的刷新实例

    1.场景 在处理列表时,常常有删除一条数据或者新增数据之后需要重新刷新当前页面的需求. 2.遇到的问题 1. 用vue-router重新路由到当前页面,页面是不进行刷新的 2.采用window.reload(),或者router.go(0)刷新时,整个浏览器进行了重新加载,闪烁,体验不好 3.解决方法 provide / inject 组合 作用:允许一个祖先组件向其所有子孙后代注入一个依赖,不论组件层次有多深,并在起上下游关系成立的时间里始终生效. App.vue: 声明reload方法,控制

  • Vue 解决父组件跳转子路由后当前导航active样式消失问题

    举个栗子,导航栏如下图,当前新闻资讯的路由是:localhost:8083/#/new,导航栏样式如图所示: 随便挑个新闻点击后会跳转到子路由:localhost:8083/#/new/newDetail,这时候新闻资讯的主路由style样式出现消失的问题,如下图: style代码: .router-link-exact-active{ color: #8fc526!important; border-top: 4px solid #8fc526!important; } router.js代码

  • vuex结合session存储数据解决页面刷新数据丢失问题

    vuex结合session存储数据解决页面刷新数据丢失问题

    目录 前言 一.原因: 二.解决思路: 1.本地存储方法: 2.实现步骤: 3.优化: 前言 在项目中表单筛选项里,选择完之后刷新页面数据就变了,没有保留在自己选择的选项上. 在项目中是使用vuex保存数据,但是网页刷新后,store中保存的数据丢失了. 提示:以下是本篇文章正文内容,下面案例可供参考 一.原因: vuex作为全局的数据状态管理机制,store中的数据是保存在运行内存中,当页面刷新时,页面会重新加载vue实例,store里边的数据就会被重新赋值变成初始化状态. 二.解决思路: 将

  • JS中利用localStorage防止页面动态添加数据刷新后数据丢失

    非常不多说了,直接给大家贴代码了,具体代码如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,use

随机推荐