js百度地图滚轮缩放所在点偏移问题解决

 更新时间:2023年02月14日 16:15:12   作者:fredricen  
本文主要介绍了js百度地图滚轮缩放所在点偏移问题解决,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

提出问题

<!DOCTYPE html>
<html>

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=您的ak"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://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="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://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百度地图滚轮缩放 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 微信小程序实现点击生成随机验证码

    微信小程序实现点击生成随机验证码

    这篇文章主要为大家详细介绍了微信小程序实现点击生成随机验证码,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • js实现简单模态窗口,背景灰显

    js实现简单模态窗口,背景灰显

    昨天中午做项目需要一个模态窗口,想起上一个公司的项目经理曾经做过一个比较牛的模态窗口,至今没用搞清楚实现原理,平时也没有时间去分析,试着自己做了一个,用了一天的时间终于完成了,给大家一起分享, 也希望高手多提意见。第一次在博客园上发文章,挺高兴的。
    2008-11-11
  • 微信小程序实现多文件或者图片上传

    微信小程序实现多文件或者图片上传

    这篇文章主要为大家详细介绍了微信小程序实现多文件或者图片上传,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • 微信小程序实现左右列表联动

    微信小程序实现左右列表联动

    这篇文章主要为大家详细介绍了微信小程序实现左右列表联动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-02-02
  • 调试Javascript代码(浏览器F12及VS中debugger关键字)

    调试Javascript代码(浏览器F12及VS中debugger关键字)

    目前,常用的浏览器IE、Chrome、Firefox都有相应的脚本调试功能下面我就介绍如何在浏览器/VS中调试我们的JS代码,感兴趣的你可不要走开啊,希望本文对你有所帮助
    2013-01-01
  • js原生实现移动端手指滑动轮播图效果的示例

    js原生实现移动端手指滑动轮播图效果的示例

    下面小编就为大家分享一篇js原生实现移动端手指滑动轮播图效果的示例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-01-01
  • js实现常用排序算法

    js实现常用排序算法

    这篇文章主要为大家详细介绍了js实现常用排序算法的代码,感兴趣的小伙伴们可以参考一下
    2016-08-08
  • 完美解决JS文件页面加载时的阻塞问题

    完美解决JS文件页面加载时的阻塞问题

    下面小编就为大家带来一篇完美解决JS文件页面加载时的阻塞问题。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-12-12
  • javascript作用域链与执行环境详解

    javascript作用域链与执行环境详解

    这篇文章主要为大家详细介绍了javascript作用域链与执行环境,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-03-03
  • 利用JavaScript构建树形图的方法详解

    利用JavaScript构建树形图的方法详解

    ​树形图可视化广泛用于分层数据分析。如果你没有经验还想创建一个,那将会有些复杂。下面是一个详细教程,教你如何使用JavaScript创建交互式树形图
    2022-06-06

最新评论