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

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

解决办法:刷新一下容器
map.checkResize() 方法用于在地图容器大小发生变化时调整地图的大小以适应新的容器大小

api地址:天地图API

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

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

使用后的效果如图所示: 

 在我的vue项目中遇到同样问题,用浏览器访问vue地图是没问题的,但是vue打包成Android的apk包安装到手机上时,在进入某些有搜索框的页面进行搜索时,或者调用的接口过多时,返回首页的地图就会出现只显示左上角的情况。

这个问题困扰了我好几天,不知道从哪个角度解决。后续查资料说是要给地图加上懒加载

   <keep-alive v-if="isLoggedIn"><router-view :reGid="reGid"></router-view></keep-alive>

但是我是整个项目加的,所有没效果。

还是得用天地图自带的map.checkResize()。

activated钩子函数中使用,每次加载都执行。

 activated: function () {this.map.checkResize();},

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/703508.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【永洪BI】管理系统

管理系统模块包括系统设置、认证授权、日志管理、监控预警、资源部署、VooltDB管理、数据库管理、企业应用配置、系统检查、应用管理模块。 系统设置界面&#xff1a; 可以进行清除系统缓存、配置系统主题、配置系统邮箱、配置门户主页、配置权限管理系统、配置密码策略、配置…

智能网红主播直播手机:助您轻松卖货、卖团购卷、拓客利器!

在当下快速发展的电商行业中&#xff0c;直播销售已经成为无可忽视的一大趋势。智能网红主播直播手机的出现&#xff0c;让人们无需拥有专业设备和经验&#xff0c;便可轻松参与直播销售&#xff0c;享受销售乐趣。本文将介绍智能网红主播直播手机的操作简单、易上手以及其在卖…

【全开源】国际版JAVA同城跑腿源码快递代取帮买帮送同城服务源码支持Android+IOS+H5

打造全球领先的即时配送解决方案 在数字化和智能化的浪潮中&#xff0c;即时配送服务已成为人们生活中不可或缺的一部分。随着全球化进程的加速&#xff0c;同城跑腿服务的需求也在全球范围内不断增长。为了满足这一市场需求&#xff0c;我们荣幸地推出了“国际版同城跑腿源码…

OpenHarmony标准设备应用开发实战(一)——HelloWorld

本文主要内容包括三个方面&#xff1a; 1. 应用编译环境准备&#xff1b; 2. Hello Openharmony 页面编写&#xff1b; 3. 安装应用到标准设备上面。下面就让我们从零开始学习 OpenHarmony 标准设备应用开发。 一、应用开发环境准备 1.1 下载 DevEco Studio 3.0 Beta2 版本 …

深度学习之卷积神经网络理论基础

深度学习之卷积神经网络理论基础 卷积层的操作&#xff08;Convolutional layer&#xff09; 在提出卷积层的概念之前首先引入图像识别的特点 图像识别的特点 特征具有局部性&#xff1a;老虎重要特征“王字”仅出现在头部区域特征可能出现在任何位置下采样图像&#xff0c…

在云服务器上运行StyleGAN3生成伪样本

首先是传入数据&#xff0c;这里我们不做赘述。 对于数据格式的裁剪&#xff0c;可以通过以下代码进行&#xff1a; from glob import glob from PIL import Image import os from tqdm import tqdm from tqdm.std import trangeimg_path glob(r"C:\Users\Administrato…

实验12:综合实验

1、实验目的及要求&#xff1a; 通过本次实验完成一个小型网络中配置设备。实现配置一个路由器、两个交换机和两台PC&#xff0c;以支持IPv4和IPv6连接&#xff1b;路由器和交换机必须安全管理&#xff0c;配置VLAN间路由、DHCP、以太网通道和端口安全。通过登录思科网络技术学…

直播预告 | 进入智能时代,你的公司准备好了吗?

在数字化浪潮的推动下&#xff0c;全球各行业和地区正经历着前所未有的转型。尽管数字化转型已成为发展的必然趋势&#xff0c;但许多企业仍面临着诸多挑战&#xff0c;比如&#xff1a;缺乏对前沿科技的战略洞察、难以将企业转型与国家战略相融合、缺少系统性规划的数字化思维…

程序员兼职引起的纠纷?

最近跟朋友聊天&#xff0c;说遇到一些因兼职工作而引发的争议&#xff0c;因为我本人也曾涉足过兼职领域&#xff0c;因此对程序员兼职时可能遇到的各种情况和应遵循的“套路”准则还有有一些发言权的&#xff0c;所以想和大家聊聊如何安全“兼职”的1/2事项~ ✅顺便内推个机会…

什么是用户画像?用户画像的作用是什么?

首先我们来说下什么是用户画像&#xff1f; 用户画像是指对目标用户进行详细描述和分类的方法。 它是根据用户的个人特征、行为习惯、兴趣爱好、消费习惯等信息进行分析和总结&#xff0c;以便更好地了解用户需求和行为模式。用户画像可以帮助企业或组织更好地了解他们的目标…

【LeetCode刷题】27. 移除元素

1. 题目链接2. 题目描述3. 解题方法4. 代码 1. 题目链接 27. 移除元素 2. 题目描述 3. 解题方法 暴力法直接解决&#xff0c;用双层for循环&#xff0c;外层for循环找val&#xff0c;内层for循环做删除操作。双指针法&#xff0c;fast和slow。fast找不是val的值&#xff0c;…

微信小程序如何使用weui组件库?

一、方法一&#xff1a;通过npm安装 通过npm构建方式引入weui组件库 &#xff08;找到.eslintrc.js 右键&#xff0c;在内件终端打开&#xff09;打开命令提示符后&#xff0c;输入 &#xff08;1&#xff09;npm init -y来快速生成一个默认的package.json文件 &#xff08;…