百度地图缩放中心点偏移问题

百度地图加载的位置因为定位等原因，与整个html 页面产生了不同步滚动的问题。

 

 

导致此问题的主要原因就是地图加载位置的问题导致。百度地图的缩放是基于body层的，如果body层有滚动条，插入了百度地图，也就是出现该问题时的状态，这个时候滚轮缩放就会产生偏移。

解决方法：

监听缩放开始事件前的中心点经纬度，然后到缩放事件结束后，将地图重新位移到中心点处。

需要添加的代码如下：

·1.将地图的中心点更改为给定的点。

map.panTo(point);

2.处理缩放事件。
      // 临时存储地图中心点经度和纬度
      let center_lng = 0;
      let center_lat = 0;
      // 监听地图缩放开始事件 lng表示经度，lat表示纬度
      map.addEventListener("zoomstart", function (e) {
        center_lng = map.getCenter().lng;
        center_lat = map.getCenter().lat;
      });
      // 监听地图缩放结束事件 lng表示经度，lat表示纬度
      map.addEventListener("zoomend", function (e) {
        map.centerAndZoom(
          new BMap.Point(center_lng, center_lat),
          map.getZoom()
        );
      });

项目中初始化地图的整个代码如下：

//初始化地图
function init() {
    var map = new BMap.Map("allmap",{enableMapClick:false,maxZoom:20});
    //先清除所有内容
    map.clearOverlays();
    map.enableScrollWheelZoom();                 //启用滚轮放大缩小
    //坐标转换完之后的回调函数
    translateCallback = function (data){
        //设置地图中心
        map.centerAndZoom(data.points[1],17);
        //创建自定义图标
        var myIcon1 = new BMap.Icon("/data/img/blue.svg", new BMap.Size(16,16));
        var myIcon2 = new BMap.Icon("/data/img/green.svg", new BMap.Size(16,16));
        //遍历所有的点
        for(var index in data.points)
        {  // 创建标注
            if(index==0){
                var marker1 = new BMap.Marker(data.points[index],{icon:myIcon1});
                // 将标注添加到地图中
                map.addOverlay(marker1);
            }else{
                var marker2 = new BMap.Marker(data.points[index],{icon:myIcon2});
                // 将标注添加到地图中
                map.addOverlay(marker2);
            }
        }
        // 创建polyline对象
        //定义折线
        var polyline = new BMap.Polyline(data.points,
            {
                enableEditing: false,//是否启用线编辑，默认为false
                enableClicking: true,//是否响应点击事件，默认为true
                strokeWeight:'3',//折线的宽度，以像素为单位
                strokeOpacity: 0.7,//折线的透明度，取值范围0 - 1
                strokeColor:"#f30824" //折线颜色
            });
        map.addOverlay(polyline);
        map.panTo(data.points[1]);
    }
    var PointArr = new Array();
    var point0 = new BMap.Point("${item.newLng}", "${item.newLat}");//创建一个地理点坐标
    var point1 = new BMap.Point("${item.oldLng}", "${item.oldLat}");//创建一个地理点坐标
    PointArr.push(point0);
    PointArr.push(point1);
    //转化为百度地图的坐标
    var convertor = new BMap.Convertor();
    convertor.translate(PointArr,1,5,translateCallback);
    var juli=(map.getDistance(point0,point1)).toFixed(2);
    if(juli>=0){
        $("#mapInfo").html('注：绿色图标为原始地址，蓝色图标为信息提交地址。（两点距离为 '+juli+' 米）')
    }
    /**
     *
     * 处理缩放偏移量变化的问题
     */
        // 临时存储地图中心点经度和纬度
    let center_lng = 0;
    let center_lat = 0;
    // 监听地图缩放开始事件 lng表示经度，lat表示纬度
    map.addEventListener("zoomstart", function (e) {
        center_lng = map.getCenter().lng;
        center_lat = map.getCenter().lat;
    });
    // 监听地图缩放结束事件 lng表示经度，lat表示纬度
    map.addEventListener("zoomend", function (e) {
        map.centerAndZoom(
            new BMap.Point(center_lng, center_lat),
            map.getZoom()
        );
    });
}