百度地图初始化中心点偏移问题

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

本博客所有博文作者 均为张敏。 所有文章除特别声明外，均采用 CC 3.0 License, 许可协议。转载请注明出处！ 博客源码可点击查看； 博客部分设计理念参考了羡辙杂俎。