How to solve the problem of map point click offset after the overall use of transform scale on the page

How to solve the problem of map point click offset dislocation after the overall use of transform scale on the page, I believe that many inexperienced people are at a loss about this. Therefore, this paper summarizes the causes and solutions of the problem. Through this article, I hope you can solve this problem.

Recently, css3 transform:scale () was used in the visualization project to encapsulate a component to make the page shrink or enlarge the adaptive screen.

Js file:

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 (' current scale', scale);}, [scale]); return ({children}) }

Css file:

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

Then found that the use of transform:scale () zoom will lead to Amap's point position when clicking will occur point offset dislocation situation, found a lot of ways to solve the problem with iframe

Encapsulate a separate component of the map and use iframe to introduce this component