快捷導(dǎo)航

js百度地圖鼠標(biāo)滾輪縮放導(dǎo)致地圖中心點偏移問題

更新時間：2023年02月14日 16:18:19 作者：菑恩_

本文主要介紹了js百度地圖鼠標(biāo)滾輪縮放導(dǎo)致地圖中心點偏移問題，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

一、問題

帶滾動條的彈窗中的地圖正常顯示，滾輪縮放位置發(fā)生偏移，放大時位置是靠上偏移的，縮小時位置是靠下偏移的, 高德地圖、騰訊地圖不存在此問題，百度地圖存在

二、問題分析

是由于百度地圖默認(rèn)定位是取瀏覽器文檔對象的scrollTop=0的位置, 是由body中心為中心點的, 如果html頁面(或者是彈窗)出現(xiàn)滾動條，那么地圖的中心位置其實是有偏移的，偏移的距離就是滾動條滾動的距離。這個時候縮放就會出現(xiàn)上述偏移的情況。

三、解決方法

1.禁止?jié)L輪縮放, 添加縮放控件

禁止?jié)L輪縮放, 添加百度地圖縮放控件

  mapCanvas = new BMap.Map("mapBox",  { enableMapClick: false });
  var point = new BMap.Point(116.379341, 39.938776);
  mapCanvas.centerAndZoom(point, 15);
  //彈窗中帶有滾動條  縮放會存在中心點偏移問題
  mapCanvas.disableScrollWheelZoom();     //禁止鼠標(biāo)滾輪縮放
  mapCanvas.addControl(scaleCtrl);
  //平移縮放控件
  mapCanvas.addControl(new BMap.NavigationControl());
  var scaleCtrl = new BMap.ScaleControl();  // 添加比例尺控件

效果:

在這里插入圖片描述