地图(百度、Goolge) 中心点偏移

    在最近的项目遇到一问题,不管是在leaflet.js中引用google地图还是引用百度地图总会遇到相同的一个问题,经过不断尝试与找资料最后终于解决了。

     当地图区域刚开始为display:none,时,地图的中心点会往其他地方偏移,造成地图不能完全在目标区域显示,经过不断地发掘最后得出如下结论:

** Root Cause: 当地图区域刚开始为display:none;时,地图默认的中心点为可视区域的中心点,页面左上角开始,从而造成了地图偏移;<br/>
** Solution:在地图初始化之前,将隐藏区域显示出来:display:block;<br/>
** Ex: document.getElementById("mapBox").css("display","block");

在地图再次加载显示的时候报错地图已经初始化

** Root Cause: map 对象已经保存在global Objec中; <br/>
** Solution: 在初始化之前检测是否有map对象,如果有则移除map对象;<br/>
** Ex:
var map = window.map;
if(map) {
map.remove();
}
var map = new L.map("mapId");//采用leaflet.js
window.map = map

另外一个在Bootstrap中的定位,利用z-index:比如要把一个div框的内容在class=col-xs-12的div之上,采用position:absolute;已经会被覆盖,那么采用什么好呢?笔者采用的是position:relative;并同时设置一个较大的z-index;这样就不会被覆盖了。