百度地图中心点偏移显示到左上角

• 使用技术：layui + jq + 百度地图开放API

1、问题描述

如下场景，点击“搜索”进行各个页签内数据渲染，要求默认展示第一个页签，而地图展示在第二个页签。当页签切换至“估值分布”页签时，发现未能正常显示设置的中心点。

image.png

2、问题定位

前端开发使用layui组件，当页面layui-tab容器尚未加载完毕，由于地图容器加载是异步进行，两个容器的尺寸大小差异造成中心点偏移。

3、解决办法

将地图渲染加载的功能，放到 页签切换事件中去触发执行。

element.on('tab(docDemoTabBrief)', function (data) { //layui-tab组件提供的监听方法

        var cusId = $("#cusName").val();
        if (data.index == 1) {
            if (!cusId) {
                layer.msg("请先选定客户并搜索");
                return;
            }
            // 执行地图展示，此处封装细节不做展示
            BATCH.getZoneCount(cusId);
        }
    })