大屏地图全屏scale 缩放适配方案 包含解决地图坐标问题（验证过的）

app.vue 文件

#container { width: 1920px; height: 1080px; position: absolute; left: 50%; top: 50%; margin-left: -960px; margin-top: -540px; overflow: hidden; background-color: #fff; /* display: none; */ }

这个解决缩放全屏自适应问题

mounted() { setTimeout(() => { if (this.$router.history.current.name == "zdPositionPage（ifream地址）") { let _element = document.getElementById("container"); _element.style.width = "100%"; _element.style.height = "100%"; _element.style.position = "absolute"; _element.style.left = "0%"; _element.style.top = "0%"; _element.style.marginLeft = "inherit"; _element.style.marginTop = "inherit"; _element.style.overflow = "inherit"; return false; } let element = document.getElementById("container"); // 1.重置container大小 var width = window.innerWidth || document.documentElement.clientWidth; var height = window.innerHeight || document.documentElement.clientHeight; var scale = Math.min(width / 1920, height / 1080); // element.style.transform = "scale(" + scale + ")"; element.style.transform = "scale(" + width / 1920 + "," + height / 1080 + ")"; }, 500); // window.addEventListener('resize', this.transformfun); },

需要用地图的页面

使用这个导入地图 解决坐标偏移问题

data() { return { iframeUrl: "http://" + location.host + "/zdPositionPage", } }