欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

js百度地圖滾輪縮放所在點偏移問題解決

 更新時間:2023年02月14日 16:15:12   作者:fredricen  
本文主要介紹了js百度地圖滾輪縮放所在點偏移問題解決,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

提出問題

<!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"  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); ? ? //開啟鼠標(biāo)滾輪縮放?
? ? ? ? ? ? ? ? ? ? this.map.centerAndZoom(new BMap.Point(116.404, 39.915), 11); ?// 初始化地圖,設(shè)置中心點坐標(biāo)和地圖級別
? ? ? ? ? ? ? ? })
? ? ? ? ? ? },
? ? ? ? },
? ? ? ? beforeDestroy: function () {
? ? ? ? ? ? this.map = null
? ? ? ? }
? ? })

</script>

分析問題

運行上述代碼,會發(fā)現(xiàn)點擊第一個按鈕,彈窗中的地圖正常顯示,滾輪縮放位置也不會發(fā)生偏移。但是點擊第二個按鈕,彈窗中的地圖在滾輪縮放時,放大時位置是靠上偏移的,縮小時位置是靠下偏移的。為啥會出現(xiàn)這種現(xiàn)象,是不是所有在線地圖都有這個問題?幸運的是,高德地圖、騰訊地圖不存在此問題,百度地圖偏偏有這個問題。

原因在于百度地圖默認(rèn)定位是取瀏覽器文檔對象的scrollTop=0的位置。如果文檔也就是html頁面出現(xiàn)滾動條,當(dāng)你地圖不是在scrollTop=0的時候出現(xiàn)時,那么地圖的中心位置其實是有偏移的,偏移的距離就是滾動條滾動的距離。這個時候縮放就會出現(xiàn)上述偏移的情況。

解決問題

針對百度地圖的這種特殊設(shè)計,我們只好采取相應(yīng)對策。

<el-dialog :visible.sync="visible" title="地圖展示" @closed="mapClose" @open="mapOpen">
    <div id="allmap"></div>
</el-dialog>

上述代碼添加了開啟和關(guān)閉事件處理

我們只要在彈窗打開的時候,檢查滾輪位置是否在最頂部,如果不在的話,調(diào)整到最頂部,然后在彈窗關(guān)閉的時候,恢復(fù)到最初的位置即可。

貼上我的代碼:

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;
        }
    }
}

結(jié)語

到此這篇關(guān)于js百度地圖滾輪縮放所在點偏移問題解決的文章就介紹到這了,更多相關(guān)js百度地圖滾輪縮放 內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 微信小程序?qū)崿F(xiàn)點擊生成隨機驗證碼

    微信小程序?qū)崿F(xiàn)點擊生成隨機驗證碼

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)點擊生成隨機驗證碼,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2020-09-09
  • js實現(xiàn)簡單模態(tài)窗口,背景灰顯

    js實現(xiàn)簡單模態(tài)窗口,背景灰顯

    昨天中午做項目需要一個模態(tài)窗口,想起上一個公司的項目經(jīng)理曾經(jīng)做過一個比較牛的模態(tài)窗口,至今沒用搞清楚實現(xiàn)原理,平時也沒有時間去分析,試著自己做了一個,用了一天的時間終于完成了,給大家一起分享, 也希望高手多提意見。第一次在博客園上發(fā)文章,挺高興的。
    2008-11-11
  • 微信小程序?qū)崿F(xiàn)多文件或者圖片上傳

    微信小程序?qū)崿F(xiàn)多文件或者圖片上傳

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)多文件或者圖片上傳,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • 微信小程序?qū)崿F(xiàn)左右列表聯(lián)動

    微信小程序?qū)崿F(xiàn)左右列表聯(lián)動

    這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)左右列表聯(lián)動,文中示例代碼介紹的非常詳細(xì),具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-02-02
  • 調(diào)試Javascript代碼(瀏覽器F12及VS中debugger關(guān)鍵字)

    調(diào)試Javascript代碼(瀏覽器F12及VS中debugger關(guān)鍵字)

    目前,常用的瀏覽器IE、Chrome、Firefox都有相應(yīng)的腳本調(diào)試功能下面我就介紹如何在瀏覽器/VS中調(diào)試我們的JS代碼,感興趣的你可不要走開啊,希望本文對你有所幫助
    2013-01-01
  • js原生實現(xiàn)移動端手指滑動輪播圖效果的示例

    js原生實現(xiàn)移動端手指滑動輪播圖效果的示例

    下面小編就為大家分享一篇js原生實現(xiàn)移動端手指滑動輪播圖效果的示例,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧
    2018-01-01
  • js實現(xiàn)常用排序算法

    js實現(xiàn)常用排序算法

    這篇文章主要為大家詳細(xì)介紹了js實現(xiàn)常用排序算法的代碼,感興趣的小伙伴們可以參考一下
    2016-08-08
  • 完美解決JS文件頁面加載時的阻塞問題

    完美解決JS文件頁面加載時的阻塞問題

    下面小編就為大家?guī)硪黄昝澜鉀QJS文件頁面加載時的阻塞問題。小編覺得挺不錯的,現(xiàn)在就分享給大家,也給大家做個參考。一起跟隨小編過來看看吧
    2016-12-12
  • javascript作用域鏈與執(zhí)行環(huán)境詳解

    javascript作用域鏈與執(zhí)行環(huán)境詳解

    這篇文章主要為大家詳細(xì)介紹了javascript作用域鏈與執(zhí)行環(huán)境,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2017-03-03
  • 利用JavaScript構(gòu)建樹形圖的方法詳解

    利用JavaScript構(gòu)建樹形圖的方法詳解

    ?樹形圖可視化廣泛用于分層數(shù)據(jù)分析。如果你沒有經(jīng)驗還想創(chuàng)建一個,那將會有些復(fù)雜。下面是一個詳細(xì)教程,教你如何使用JavaScript創(chuàng)建交互式樹形圖
    2022-06-06

最新評論