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

最近做的项目涉及到了很多数据可视化的操作,所以用到了大量的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切换时触发

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

阅读更多
版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/Seven521m/article/details/80318836
文章标签: 百度地图 point偏移
上一篇ECharts 参数设置参考
下一篇百度地图自定义覆盖物手机端添加点击事件无效
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

关闭
关闭
关闭