地图问题:中心点左上角等

在最近的项目遇到一问题,不管是在leaflet.js中引用google地图还是引用百度地图总会遇到相同的一个问题,经过不断尝试与找资料最后终于解决了。
当地图区域刚开始为display:none,时,地图的中心点会往其他地方偏移,造成地图不能完全在目标区域显示,经过不断地发掘最后得出如下结论:

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

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

**Root Cause: map对象保存在global Object中**
**Solution:在初始化之前移除map对象**
**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;这样就不会被覆盖了。

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值