资讯专栏INFORMATION COLUMN

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

LoftySoul / 2687人阅读

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

在最近的项目遇到一问题,不管是在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;这样就不会被覆盖了。

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/80496.html

相关文章

  • 移动地图时自动获取当前地图中心地区

    摘要:原文链接的博客问题来源使用百度地图时,移动地图我们发现百度地图右上角的地区名称是随当前地图显示区域自动变化的。分析当前屏幕每个区域的面积占比即可获取当前地图区域。 原文链接:Bougie的博客 问题来源 使用百度地图时,移动地图,我们发现百度地图右上角的地区名称是随当前地图显示区域自动变化的。对此,我仿写了一个计算地图当前区域的方法。showImg(https://segmentfau...

    YancyYe 评论0 收藏0
  • 移动地图时自动获取当前地图中心地区

    摘要:原文链接的博客问题来源使用百度地图时,移动地图我们发现百度地图右上角的地区名称是随当前地图显示区域自动变化的。分析当前屏幕每个区域的面积占比即可获取当前地图区域。 原文链接:Bougie的博客 问题来源 使用百度地图时,移动地图,我们发现百度地图右上角的地区名称是随当前地图显示区域自动变化的。对此,我仿写了一个计算地图当前区域的方法。showImg(https://segmentfau...

    xingpingz 评论0 收藏0
  • leaflet常用功能

    摘要:简介纯在地图上进行操作坐标点路径曲线等的一个库只提供操作地图实际加载某个地图由开发者决定创建地图对象页面创建设置属性撑满整个屏幕设置中属性使用初始化地图对象为名字参数地图中心坐标位置参数地图加载级别数字越大地图加载越近为地图加载瓦片图层常用 简介 纯JavaScript,在地图上进行操作(坐标点,路径,曲线等)的一个库,只提供操作地图API,实际加载某个地图,由开发者决定 创建地图对象...

    derek_334892 评论0 收藏0
  • 基于RestOn智能睡眠监测器的睡眠监测系统

    摘要:一项目地址为二项目功能概述该项目实现的是一个基于智能睡眠监测器的睡眠监测系统。我们可以在个人中心的设置中心进行报警阈值的设定。睡眠自测试页面如下图所示用户可以在该页面进行睡眠自测试,点击提交按钮后,便可以在弹出框当中查看自己的睡眠质量等级。 一、项目地址为: https://github.com/linqian123... 二、项目功能概述: 该项目实现的是一个基于RestOn智能睡眠...

    Java_oldboy 评论0 收藏0
  • 基于RestOn智能睡眠监测器的睡眠监测系统

    摘要:一项目地址为二项目功能概述该项目实现的是一个基于智能睡眠监测器的睡眠监测系统。我们可以在个人中心的设置中心进行报警阈值的设定。睡眠自测试页面如下图所示用户可以在该页面进行睡眠自测试,点击提交按钮后,便可以在弹出框当中查看自己的睡眠质量等级。 一、项目地址为: https://github.com/linqian123... 二、项目功能概述: 该项目实现的是一个基于RestOn智能睡眠...

    JayChen 评论0 收藏0

发表评论

0条评论

LoftySoul

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<