解决vue中引入天地图显示不全问题,设置setTimeout即可解决!
index.html中引入天地图api
<script type="text/javascript" src="https://api.tianditu.gov.cn/api?v=4.0&tk=你的key"></script>
map.vue中初始化天地图
//初始化天地图
initTMap() {const T = window.T;// 3.初始化地图对象this.tMap = new T.Map("containerT", {});// 4.设置显示地图的中心点和级别this.tMap.centerAndZoom(new T.LngLat(116.397590, 39.908776), 13);// 5.创建地图类型控件const ctrl = new T.Control.MapType([{title: '地图',icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', //地图控件上所要显示的图层图标(默认图标大小80x80)layer: window.TMAP_NORMAL_MAP}, {title: '卫星',icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',layer: window.TMAP_SATELLITE_MAP}]);// 6.将控件添加到地图,一个控件实例只能向地图中添加一次。this.tMap.addControl(ctrl);// 7.创建坐标,通常是调取接口获得经纬度const point = new T.LngLat(116.397590, 39.908776);// 8.创建覆盖使用的图标const icon = new T.Icon({iconUrl: '../marker-red.png',iconSize: new T.Point(27, 27),iconAnchor: new T.Point(10, 25)});// 9. 创建在该坐标上的一个图像标注实例const marker = new T.Marker(point, icon);// 10.将覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次this.tMap.addOverLay(marker);
}
出现问题:

解决方法:
直接用延迟包裹即可
setTimeout(()=>{初始化地图代码
},1500) //延迟多久随你调
如下:
最好加个element-ui的loading加载的时候好看点
//初始化天地图
initTMap() {setTimeout(()=>{const T = window.T;// 3.初始化地图对象this.tMap = new T.Map("containerT", {});// 4.设置显示地图的中心点和级别this.tMap.centerAndZoom(new T.LngLat(116.397590, 39.908776), 13);// 5.创建地图类型控件const ctrl = new T.Control.MapType([{title: '地图',icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/vector.png', //地图控件上所要显示的图层图标(默认图标大小80x80)layer: window.TMAP_NORMAL_MAP}, {title: '卫星',icon: 'http://api.tianditu.gov.cn/v4.0/image/map/maptype/satellite.png',layer: window.TMAP_SATELLITE_MAP}]);// 6.将控件添加到地图,一个控件实例只能向地图中添加一次。this.tMap.addControl(ctrl);// 7.创建坐标,通常是调取接口获得经纬度const point = new T.LngLat(116.397590, 39.908776);// 8.创建覆盖使用的图标const icon = new T.Icon({iconUrl: '../marker-red.png',iconSize: new T.Point(27, 27),iconAnchor: new T.Point(10, 25)});// 9. 创建在该坐标上的一个图像标注实例const marker = new T.Marker(point, icon);// 10.将覆盖物添加到地图中,一个覆盖物实例只能向地图中添加一次this.tMap.addOverLay(marker);this.tMap.checkResize()},1500)
}
已解决

相关文章:
解决vue中引入天地图显示不全问题,设置setTimeout即可解决!
index.html中引入天地图api <script type"text/javascript" src"https://api.tianditu.gov.cn/api?v4.0&tk你的key"></script>map.vue中初始化天地图 //初始化天地图 initTMap() {const T window.T;// 3.初始化地图对象this.tMap new…...
【OpenCV实现图像:使用OpenCV进行物体轮廓排序】
文章目录 概要读取图像获取轮廓轮廓排序小结 概要 在图像处理中,经常需要进行与物体轮廓相关的操作,比如计算目标轮廓的周长、面积等。为了获取目标轮廓的信息,通常使用OpenCV的findContours函数。然而,一旦获得轮廓信息后&#…...
【8】Spring Boot 3 集成组件:安全组件 spring security【官网概念篇】
目录 【8】Spring Boot 3 集成组件:安全组件 spring securitySpring Security 简介先决条件引入依赖身份验证密码存储密码存储历史DelegatingPasswordEncoder密码存储格式密码加解密类自定义密码存储 体系结构 ArchitectureServlet 过滤器DelegatingFilterProxyFilt…...
UDP中connect的作用
udpclientNoConnect.c里边的内容如下: #include<stdio.h> #include<stdlib.h> #include<string.h> #include<unistd.h> #include<arpa/inet.h> #include<sys/socket.h> #include <errno.h> #include <syslog.h…...
Go使用开源库go-excelize操作Excel文件
以下是一个示例代码,读取一个 Excel 文件并打印其中的所有单元格值: package mainimport ("fmt""github.com/30x/go-excelize" )func main() {// 打开 Excel 文件f, err : excelize.OpenFile("yourfile.xlsx")if err ! n…...
软件测试个人求职简历该怎么写,模板在这里
1、个人资料 姓名:xxx性别:x 手机号码:138888888xx邮箱:xxx 学历:本科专业:电子商务 英语:四级当前工作:测试工程师 从业时间:4年期望薪资:面议 求职意向软件…...
opencv-Hough 圆环变换
Hough 圆环变换(Hough Circle Transform)是一种用于在图像中检测圆环的技术。与 Hough 直线变换类似,它通过在参数空间中表示图像中的圆环,将圆环检测问题转换为参数空间的累加问题。OpenCV 提供了 cv2.HoughCircles() 函数来执行…...
福州大学《嵌入式系统综合设计》实验五:图像裁剪及尺寸变换
一、实验目的 在深度学习中,往往需要从一张大图中裁剪出一张张小图,以便适应网络输入图像的尺寸,这可以通过bmcv_image_crop函数实现。 实践中,经常需要对输入图像的尺寸进行调整,以适用于网络输入图片尺寸࿰…...
LLM之Prompt(二):清华提出Prompt 对齐优化技术BPO
论文题目:《Black-Box Prompt Optimization: Aligning Large Language Models without Model Training》 论文链接:https://arxiv.org/abs/2311.04155 github地址:https://github.com/thu-coai/BPO BPO背景介绍 最近,大型语言模…...
chatglm3部署使用
chatglm3部署使用 1.部署2.使用3.接入微信4.vue前端 1.部署 1.首先去github下载chatglm3代码。Huggingface下载模型一直失败,所以用阿里的魔塔社区下载。 git clone https://github.com/THUDM/ChatGLM3.git git clone https://www.modelscope.cn/ZhipuAI/chatglm3…...
Android扫码ZXing
1. 获取权限 请注意动态申请及重写申请结果返回方法。 <uses-permission android:name"android.permission.CAMERA"/> 2. 添加依赖 //Gradle Scripts -> build.gradle(Module:app) implementation com.google.zxing:core:3.4.1 implementation com.jour…...
求解Beamforming-SOCP(CVX求解)
时间:2023年11月23日14:00:16: 直接上代码(辛苦两天才改出来的) clear all; K 4; %user number N4; %base station number var1e-9; H []; %initialize H matrix for i1:Kh 1/sqrt(2*K)*mvnrnd(zeros(N,1),eye(N),1)1i/sqrt(2*…...
解决Vue项目的runtime-only转为runtime-compiler
我们在vue.config.js中添加上 runtimeCompiler: true,然后再将main.js入口文件中的Vue实例改为以下即可 //修改前 new Vue({router,store,render: (h) > h(App) }).$mount(#app) //修改后 new Vue({el:#app,router,store, components:{App}, template:<App/>})...
hash模式和history模式
在Vue Router中,有两种路由模式可供选择:hash模式和history模式。它们各自有一些优点和缺点,下面是它们的简要介绍: hash模式的原理是通过hashchange事件,通过监听hash变化来驱动界面变化。它的url中有 # 号 1、监听…...
聊聊logback的LevelFilter
序 本文主要研究一下logback的LevelFilter AbstractMatcherFilter ch/qos/logback/core/filter/AbstractMatcherFilter.java public abstract class AbstractMatcherFilter<E> extends Filter<E> {protected FilterReply onMatch FilterReply.NEUTRAL;protect…...
mysql 行转列 GROUP_CONCAT 试验
1.概要 很多时候需要用到行专列的方式做数据分析。比如对通讯数据的采集 数据采集结果如下: 变量值采集周期131251132272 我想要看的结果 变量1变量2采集周期351372 就是我想看到相关数据的周期变化情况。 2.试验 2.1创建数据如下(表名 tb5&…...
HarmonyOS元服务开发实战—端云一体化开发
还记得我第一次接触arkui还是在22年的9月份,当时arkui还在一个比较初试的阶段。时隔一年再见方舟框架,它已经发生了令人瞩目的变化,不得不说华为方舟框架在更新迭代的速度已经遥遥领先。新的功能和性能优化让这个框架更加强大和灵活ÿ…...
【搭环境】装Python3.8 open3d
先装Python3.8 方法一试了找不到Python3.8的库,所以用方法二装上了。 Python3加入环境变量 更改Python默认指向 open3d需要Python3.6以上,最好用Ubuntu18版本,我用的16版本。。...
【C语言】深入解开指针(四)
🌈write in front :🔍个人主页 : 啊森要自信的主页 ✏️真正相信奇迹的家伙,本身和奇迹一样了不起啊! 欢迎大家关注🔍点赞👍收藏⭐️留言📝>希望看完我的文章对你有小小的帮助&am…...
AMEYA360:瑞萨面向高端工业传感器系统推出高精度模拟前端的32位RX MCU
全球半导体解决方案供应商瑞萨电子(TSE:6723)宣布面向高端工业传感器系统推出一款全新RX产品——RX23E-B,扩展32位微控制器(MCU)产品线。新产品作为广受欢迎的RX产品家族的一员,具有高精度模拟前…...
机器学习赋能软件质量保障:从Bug自动分类到智能缺陷管理实战
1. 项目概述:当机器学习遇见软件质量保障在软件开发的日常里,Bug(缺陷)的识别、分类和处理,是每个工程师和测试人员绕不开的“日常任务”。想象一下,一个大型开源项目,每天有成百上千个新的Bug报…...
ESP8266 AT指令连接阿里云MQTT全流程实测:从串口调试到物模型数据收发
ESP8266 AT指令连接阿里云MQTT全流程实测:从串口调试到物模型数据收发 在物联网开发中,ESP8266凭借其低廉的价格和稳定的性能,成为了连接云端服务的首选模块之一。而通过AT指令直接操作ESP8266,更是让开发者能够快速实现设备上云&…...
Windows热键冲突终极指南:Hotkey Detective一键定位占用程序
Windows热键冲突终极指南:Hotkey Detective一键定位占用程序 【免费下载链接】hotkey-detective A small program for investigating stolen key combinations under Windows 7 and later. 项目地址: https://gitcode.com/gh_mirrors/ho/hotkey-detective 你…...
PHP支付系统国密改造实录:从OpenSSL到GMSSL的7大断点排查与3小时热切换方案
更多请点击: https://intelliparadigm.com 第一章:PHP支付系统国密改造的背景与合规要求 随着《密码法》正式施行及《金融行业信息系统商用密码应用基本要求》(JR/T 0092—2021)等监管文件落地,面向金融级业务的PHP支…...
实战派指南:在嵌入式Camera项目里,你的Gamma校正曲线到底该怎么调?
实战派指南:在嵌入式Camera项目里,你的Gamma校正曲线到底该怎么调? 当你第一次拿到一颗新的图像传感器时,最令人头疼的往往不是硬件连接,而是那个看似简单却暗藏玄机的Gamma校正表。上周在调试一款工业检测相机时&…...
AI伦理官2026认证路线:软件测试从业者的专业转型指南
在人工智能技术飞速发展的2026年,AI伦理官已成为全球科技领域的关键角色,负责确保算法决策的公平性、透明性和合规性。随着各国监管框架(如欧盟AI法案和中国《人工智能科技伦理审查与服务办法》)的强制执行,企业对AI伦…...
详解C++中动态内存管理和泛型编程
一、C/C内存区域划分1. 栈又叫堆栈--非静态局部变量/函数参数/返回值等等,栈是向下增长的。2. 内存映射段是高效的I/O映射方式,用于装载一个共享的动态内存库。用户可使用系统接口创建共享共享内存,做进程间通信。3. 堆用于程序运行时动态内存…...
你的LaTeX参考文献引用对了吗?详解\cite, \citet, \citep的区别与选用场景
LaTeX参考文献引用权威指南:从基础语法到期刊规范实战 第一次用LaTeX写论文时,我被参考文献引用折磨得差点放弃学术生涯。导师批注的"引用格式不统一"像魔咒一样出现在每一页——有时是"(作者, 年份)",有时变成"作者…...
【2025必学核心能力】:PHP 8.9 Error Handling精准管控——ZEND引擎级错误分流技术首次公开
更多请点击: https://intelliparadigm.com 第一章:PHP 8.9错误处理范式革命:从全局捕获到ZEND级精准分流 PHP 8.9 引入了全新的 zend_error_dispatcher 机制,允许开发者在 Zend Engine 层直接注册错误分流回调,绕过传…...
别再只写Hello World了!用CH32V307和W25Qxx做个离线数据记录仪
从零构建CH32V307环境数据记录仪:SPI Flash实战指南 每次看到"Hello World"在串口终端闪烁时,你是否想过让单片机做些更有意义的事?环境监测、工业控制、智能家居等领域都离不开数据记录功能,而SPI Flash芯片正是实现离…...
