天地图使用踩坑选项卡里面装地图样式问题显示不全

原创已于 2023-10-08 11:14:49 修改 · 833 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5 #javascript #前端

于 2023-10-08 11:11:12 首次发布

文章讨论了在选项卡内嵌地图时遇到的样式问题，导致地图显示不全。解决方案包括使用`map.checkResize()`在容器大小变化时自动调整，以及延迟2秒后调用此方法确保地图加载完成后再刷新。作者寻求更高效的方法来优化体验。

选项卡里面装地图

样式问题导致地图只显示了一小块。

解决办法：刷新一下容器

map.checkResize() 方法用于在地图容器大小发生变化时调整地图的大小以适应新的容器大小。

解决思路：当整个页面加载之后 2秒中后刷新地图容器，地图加载完，刷新才有用

setTimeout(function() {map.checkResize();}, 2000);

解决后的效果

寻找更聪明的办法

期待您的回复

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

上班不迟到

关注关注

7
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

天地图显示不全，只显示一部分或者一半

qq_920189602的博客

10-08

6783

本人是第一次在项目开发中使用天地图，在使用天地图工程中，遇到很多问题，比如：地图第一次渲染的时候显示不全、添加覆盖物后地图只能进行缩放不能进行拖拽、添加覆盖物后中心点怎么确认、怎么把数据单位米转化为经纬度坐标数据等问题，不过这些提到的问题在开发中都一一解决了。不过这篇博文中我们要讲的问题是第一个“地图第一次渲染的时候显示不全”。这个问题浪费了我一个下午的时间，不过还好，还可以接受。网上找了几篇博主的文章，自己也试了他们的方法，可能是自己在参考的时候写错了（自己能力问题），...

小程序踩坑之地图定位不精准的问题

qq_42181069的博客

01-20

3446

最近做了一个小程序，需要获取用户的地理位置，用户授权后将地理位置逆解析后带到下一个页面上进行展示。但逆解析出来的结果与实际位置大概差了600m左右，一开始查了很多资料，都以为是经纬度获取就不精准，导致了后面的逆解析出现了问题，真的是抠破头的想解决办法，最后疲惫的时候无心扫过地图文档才找到了解决办法，分享出来给大家，愿2021大家头发健在～～～ 1、关于获取用户授权得到地理位置的代码： <view bindtap="scanCode"> 点击按钮 </view&...

1 条评论您还未登录，请先登录后发表或查看评论

arcgis 天地图风格style

08-15

arcgis 天地图风格style，包含：字体库；矢量地图符号库_V2.0 for ArcGIS10；影像地图符号库__V2.0 for ArcGIS10；晕渲地图符号库__V2.0 for ArcGIS10

天地图 地图展示不全解决方案(代码)

最新发布

08-21

天地图 地图展示不全解决方案(代码) 打开只展示左上角解决方案按12又能展示全的解决方案这是我碰到问题的解决代码,亲测可用

vue使用天地图显示不全问题解决

weixin_51609337的博客

05-15

1565

在vue项目中，使用天地图出现了地图只显示左上角的情况。

天地图显示不全，只显示一部分或者一半_vue 天地图 初始显示一部分

2401_84411822的博客

04-27

1513

自己第一次在vue项目开发中使用天地图，在使用天地图过程中，遇到很多问题，比如：地图第一次渲染的时候显示不全、添加覆盖物后地图只能进行缩放不能进行拖拽、添加覆盖物后中心点怎么确认、怎么把数据单位米转化为经纬度坐标数据等问题，不过这些提到的问题在开发中都一一解决了。但这篇博文我们要讲的问题是第一个“这个问题耗了我差不多一个上午的时间，不过还好，还可以接受。网上找了几篇博主的文章，自己也试了他们的方法，可能是自己在参考的时候写错了（自己能力问题），导致达不到自己想要的结果。

解决天地图全屏div后，地图只显示一半的问题！

终于杨帆起航

02-26

8538

我的全屏方法是，隐藏所有的除了包含地图意外所有显示的控件，然后将地图div设为屏幕大小，结果发现出现地图只显示一半的情况。查了一下api发现有一个修改地图状态的方法checkResize()。在触发全屏的方法上使用它就可以了。

精选资源

百度地图javascriptAPI踩坑及使用记录

01-08

登录百度地图开发平台，在应用管理>我的应用>创建应用，根据自己的需求设置相关参数，会生成一个ak，后续可直接使用。 2.在需要使用百度地图的页面引入api： 3.创建地图容器：地图大小及位置可根据需求自由调整 ...

vue项目使用高德地图的定位及关键字搜索功能的实例代码(踩坑经验)

10-15

在实际开发过程中，可能会遇到一些坑点，例如地图功能无法正常使用，这可能是秘钥配置不正确或未加载必要的插件导致的。另外，由于Vue和高德地图的事件机制不同，需要注意在事件处理函数中保存`this`的引用，以便在...

netfuke 使用及踩坑注意网卡选择!!!

06-11

netfuke 使用及踩坑注意网卡选择!!!

天地图电子地图符号与注记样式

04-23

国家基础地理信息中心初版天地图电子地图符号与注记样式，包含注记分级显示内容、矢量地图符号与注记样式、影像地图符号与注记样式

天地图显示定位显示图层

11-27

本人亲测，非常好用的天地图，可以直接运行，支持地图显示，图层定位，覆盖物的点击

天地图显示不全的问题

sjn0815的博客

09-15

2633

问题背景：天地图关联的div默认状态是隐藏的时候解决办法：在div显示的时候，使用show()的时候，添加map.checkResize();方法 $('#patrolDetail').show(100,function(){ map.checkResize(); })

2024年前端最新swift4(1)，一个前端妹子的面试笔记

2401_84447328的博客

05-07

795

为了帮助大家更好温习重点知识、更高效的准备面试，特别整理了《前端工程师面试手册》电子稿文件。内容包括html，css，JavaScript，ES6，计算机网络，浏览器，工程化，模块化，Node.js，框架，数据结构，性能优化，项目等等。包含了腾讯、字节跳动、小米、阿里、滴滴、美团、58、拼多多、360、新浪、搜狐等一线互联网公司面试被问到的题目，涵盖了初中级前端技术点。前端面试题汇总开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】JavaScript性能linux。

解决vue中引入天地图显示不全问题，设置setTimeout即可解决！

番茄Salad

11-21

2037

index.html中引入天地图api

天地图 地图海量点单图层下多种颜色多种样式设置

SummerGao

02-08

1489

天地图 地图海量点单图层下多种颜色多种样式设置之前是多个图层的所以用了图层容器，后来需要每一层都加点击事件，图层太多就只能点到最上边图...

天地图之地图类型

不靠谱的作曲家

01-31

1965

地图使用场景各异，官方提供了以下几种类型：普通街道视图、卫星视图、卫星和路网的混合视图、地形视图、地形和路网的混合视图

天地图电子地图矢量地图底图结合图像学实现风格底图地图

weixin_42496466的博客

08-01

4928

天地图（TianDiTu），全称为“国家地理信息公共服务平台”，是中国国家测绘地理信息局主导建设的国家级地理信息服务平台。它提供了一系列的地图服务和地理信息数据，包括基础地理信息、专题地理信息、地理编码、地名地址查询、三维地图浏览等功能。天地图的目标是为政府决策、社会管理和公众生活提供权威、统一、标准的地理信息服务。数据来源于国家测绘地理信息局，确保了数据的权威性和准确性。提供全国范围的基础地理信息和专题地理信息。提供Web API和SDK，便于第三方开发人员集成地理信息服务。

天地图自定义地图类型

优快云susu的博客

03-08

1678

天地图提供了几种类型参考API，我们只需要初始化后添加一行代码。

Vue.js使用踩坑指南：路由刷新与异步问题解决方案

"Vue.js使用常见问题与解决策略" 在Vue.js的开发过程中，开发者往往会遇到各种各样的问题。以下是对这些常见问题的详细解析和解决办法，旨在帮助开发者更好地理解和应对Vue应用中的陷阱。 1. 路由变化页面数据不...