seven's blog | 百度地图初始化中心点偏移问题

百度地图初始化中心点偏移问题
2018年05月15日

最近做的项目涉及到了很多数据可视化的操作,所以用到了大量的ECharts以及百度地图,记录一下前两天刚刚遇到的一个问题。

一个地图展示页面,其中包含一个tab切,展现数据的两种展现形式,(实际情况是tab切页面中还有子tab切,但这不是关键),两个地图实例都设置了相同的中心点point,但是当tab切换到第二个地图时,出现了中心点偏移。

出现这种现象的原因是,页面初始化时,两个地图都会加载,由于一个其中一个地图开始时是隐藏状态,所以它的初始宽高为0,因此中心点不管取什么值都会在左上角。

解决方案一

定义地图加载完成事件

但由于该事件会在每次拖动地图时触发,因此可以定义一个变量,控制其只触发一次,代码如下:

let loadCount=0;
mapName.addEventListener("tilesloaded",function(){//mapName是你的地图名称
    if(loadCount==1){
        mapName.setCenter(point);//point是设置的中心点
    }
    loadCount=loadCount+1
});

解决方案二

使用z-index

因为这个问题的原因是地图初始化时不显示导致,所以可以采取一种很笨拙的方法,就是把传统的tab切点击时设置div的display属性,改成设置div的z-index属性,注意此方法前提是设置div的position属性。这样一来,初始化时所有地图都是显示的,只是存在z-index的大小问题,也就是展示的前后问题,所以就不存在初始化时宽高为零导致的中心偏移问题了。

解决方法三

将初始化地图的事件放在tab切换时触发

这个方法只是我的设想,并没有去实践,但是理论应该可行,你们可以尝试一下,然后把是否可行留言给我,也算是一种备选方案吧

15 May 2018