如何解决百度地图滚轮缩放时中心点偏移的问题？
- 内容介绍
- 文章标签
- 相关推荐
本文共计931个文字，预计阅读时间需要4分钟。
目录 + 提出问题 + 分析问题 + 解决问题 + 结论 + 提出问题 + !DOCTYPE
目录
- 提出问题
- 分析问题
- 解决问题
- 结语
提出问题
<!DOCTYPE html> <html> <head> <meta api.map.baidu.com/api?v=2.0&ak=您的ak"></script> <!-- 引入样式 --> <link rel="stylesheet" href="unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" > <style type="text/css"> [v-cloak] { display: none; } #allmap { width: 600px; height: 600px; left: 180px; overflow: hidden; margin: 0; font-family: "微软雅黑"; } </style> <title>地图展示</title> </head> <body> <div id="container" v-cloak> <div> <el-button @click="openMap">Button</el-button> </div> <div style="margin-top:1000px;"> <el-button @click="openMap">Button</el-button> </div> <el-dialog :visible.sync="visible" title="地图展示"> <div id="allmap"></div> </el-dialog> </div> </body> <!-- import Vue before Element --> <script src="unpkg.com/vue/dist/vue.js"></script> <!-- import JavaScript --> <script src="unpkg.com/element-ui/lib/index.js"></script> </html> <script type="text/javascript"> new Vue({ el: '#container', data: function () { return { visible: false, map: null } }, mounted: function () { }, methods: { openMap: function () { this.visible = true; this.$nextTick(function () { const map = new BMap.Map("allmap"); this.map = map //添加地图类型控件 this.map.addControl(new BMap.MapTypeControl({ mapTypes: [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ] })); this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别 }) }, }, beforeDestroy: function () { this.map = null } }) </script>
分析问题
运行上述代码，会发现点击第一个按钮，弹窗中的地图正常显示，滚轮缩放位置也不会发生偏移。但是点击第二个按钮，弹窗中的地图在滚轮缩放时，放大时位置是靠上偏移的，缩小时位置是靠下偏移的。为啥会出现这种现象，是不是所有在线地图都有这个问题？幸运的是，高德地图、腾讯地图不存在此问题，百度地图偏偏有这个问题。
原因在于百度地图默认定位是取浏览器文档对象的scrollTop=0的位置。如果文档也就是html页面出现滚动条，当你地图不是在scrollTop=0的时候出现时，那么地图的中心位置其实是有偏移的，偏移的距离就是滚动条滚动的距离。这个时候缩放就会出现上述偏移的情况。
解决问题
针对百度地图的这种特殊设计，我们只好采取相应对策。
<el-dialog :visible.sync="visible" title="地图展示" @closed="mapClose" @open="mapOpen"> <div id="allmap"></div> </el-dialog>
上述代码添加了开启和关闭事件处理
我们只要在弹窗打开的时候，检查滚轮位置是否在最顶部，如果不在的话，调整到最顶部，然后在弹窗关闭的时候，恢复到最初的位置即可。
贴上我的代码：
mapOpen: function () { this.top = this.getScrollTop() if (this.top) { this.setScrollTop(0) } }, mapClose: function () { this.setScrollTop(this.top); this.top = 0; } getScrollTop: function () { let scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop; } else if (document.body) { scrollTop = document.body.scrollTop; } return scrollTop; }, setScrollTop: function (top) { if (!isNaN(top)) { if (document.documentElement && document.documentElement.scrollTop !== undefined) { document.documentElement.scrollTop = top; } else if (document.body) { document.body.scrollTop = top; } } }
结语
到此这篇关于js百度地图滚轮缩放所在点偏移问题解决的文章就介绍到这了,更多相关js百度地图滚轮缩放 内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！
本文共计931个文字，预计阅读时间需要4分钟。
目录 + 提出问题 + 分析问题 + 解决问题 + 结论 + 提出问题 + !DOCTYPE
目录
- 提出问题
- 分析问题
- 解决问题
- 结语
提出问题
<!DOCTYPE html> <html> <head> <meta api.map.baidu.com/api?v=2.0&ak=您的ak"></script> <!-- 引入样式 --> <link rel="stylesheet" href="unpkg.com/element-ui/lib/theme-chalk/index.css" rel="external nofollow" > <style type="text/css"> [v-cloak] { display: none; } #allmap { width: 600px; height: 600px; left: 180px; overflow: hidden; margin: 0; font-family: "微软雅黑"; } </style> <title>地图展示</title> </head> <body> <div id="container" v-cloak> <div> <el-button @click="openMap">Button</el-button> </div> <div style="margin-top:1000px;"> <el-button @click="openMap">Button</el-button> </div> <el-dialog :visible.sync="visible" title="地图展示"> <div id="allmap"></div> </el-dialog> </div> </body> <!-- import Vue before Element --> <script src="unpkg.com/vue/dist/vue.js"></script> <!-- import JavaScript --> <script src="unpkg.com/element-ui/lib/index.js"></script> </html> <script type="text/javascript"> new Vue({ el: '#container', data: function () { return { visible: false, map: null } }, mounted: function () { }, methods: { openMap: function () { this.visible = true; this.$nextTick(function () { const map = new BMap.Map("allmap"); this.map = map //添加地图类型控件 this.map.addControl(new BMap.MapTypeControl({ mapTypes: [ BMAP_NORMAL_MAP, BMAP_HYBRID_MAP ] })); this.map.enableScrollWheelZoom(true); //开启鼠标滚轮缩放 this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); // 初始化地图,设置中心点坐标和地图级别 }) }, }, beforeDestroy: function () { this.map = null } }) </script>
分析问题
运行上述代码，会发现点击第一个按钮，弹窗中的地图正常显示，滚轮缩放位置也不会发生偏移。但是点击第二个按钮，弹窗中的地图在滚轮缩放时，放大时位置是靠上偏移的，缩小时位置是靠下偏移的。为啥会出现这种现象，是不是所有在线地图都有这个问题？幸运的是，高德地图、腾讯地图不存在此问题，百度地图偏偏有这个问题。
原因在于百度地图默认定位是取浏览器文档对象的scrollTop=0的位置。如果文档也就是html页面出现滚动条，当你地图不是在scrollTop=0的时候出现时，那么地图的中心位置其实是有偏移的，偏移的距离就是滚动条滚动的距离。这个时候缩放就会出现上述偏移的情况。
解决问题
针对百度地图的这种特殊设计，我们只好采取相应对策。
<el-dialog :visible.sync="visible" title="地图展示" @closed="mapClose" @open="mapOpen"> <div id="allmap"></div> </el-dialog>
上述代码添加了开启和关闭事件处理
我们只要在弹窗打开的时候，检查滚轮位置是否在最顶部，如果不在的话，调整到最顶部，然后在弹窗关闭的时候，恢复到最初的位置即可。
贴上我的代码：
mapOpen: function () { this.top = this.getScrollTop() if (this.top) { this.setScrollTop(0) } }, mapClose: function () { this.setScrollTop(this.top); this.top = 0; } getScrollTop: function () { let scrollTop = 0; if (document.documentElement && document.documentElement.scrollTop) { scrollTop = document.documentElement.scrollTop; } else if (document.body) { scrollTop = document.body.scrollTop; } return scrollTop; }, setScrollTop: function (top) { if (!isNaN(top)) { if (document.documentElement && document.documentElement.scrollTop !== undefined) { document.documentElement.scrollTop = top; } else if (document.body) { document.body.scrollTop = top; } } }
结语
到此这篇关于js百度地图滚轮缩放所在点偏移问题解决的文章就介绍到这了,更多相关js百度地图滚轮缩放 内容请搜索自由互联以前的文章或继续浏览下面的相关文章希望大家以后多多支持自由互联！