当前位置: 首页 > news >正文

解决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进行物体轮廓排序】

文章目录 概要读取图像获取轮廓轮廓排序小结 概要 在图像处理中&#xff0c;经常需要进行与物体轮廓相关的操作&#xff0c;比如计算目标轮廓的周长、面积等。为了获取目标轮廓的信息&#xff0c;通常使用OpenCV的findContours函数。然而&#xff0c;一旦获得轮廓信息后&#…...

【8】Spring Boot 3 集成组件:安全组件 spring security【官网概念篇】

目录 【8】Spring Boot 3 集成组件&#xff1a;安全组件 spring securitySpring Security 简介先决条件引入依赖身份验证密码存储密码存储历史DelegatingPasswordEncoder密码存储格式密码加解密类自定义密码存储 体系结构 ArchitectureServlet 过滤器DelegatingFilterProxyFilt…...

UDP中connect的作用

udpclientNoConnect.c里边的内容如下&#xff1a; #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文件

以下是一个示例代码&#xff0c;读取一个 Excel 文件并打印其中的所有单元格值&#xff1a; package mainimport ("fmt""github.com/30x/go-excelize" )func main() {// 打开 Excel 文件f, err : excelize.OpenFile("yourfile.xlsx")if err ! n…...

软件测试个人求职简历该怎么写,模板在这里

1、个人资料 姓名&#xff1a;xxx性别&#xff1a;x 手机号码&#xff1a;138888888xx邮箱&#xff1a;xxx 学历&#xff1a;本科专业&#xff1a;电子商务 英语&#xff1a;四级当前工作&#xff1a;测试工程师 从业时间&#xff1a;4年期望薪资&#xff1a;面议 求职意向软件…...

opencv-Hough 圆环变换

Hough 圆环变换&#xff08;Hough Circle Transform&#xff09;是一种用于在图像中检测圆环的技术。与 Hough 直线变换类似&#xff0c;它通过在参数空间中表示图像中的圆环&#xff0c;将圆环检测问题转换为参数空间的累加问题。OpenCV 提供了 cv2.HoughCircles() 函数来执行…...

福州大学《嵌入式系统综合设计》实验五:图像裁剪及尺寸变换

一、实验目的 在深度学习中&#xff0c;往往需要从一张大图中裁剪出一张张小图&#xff0c;以便适应网络输入图像的尺寸&#xff0c;这可以通过bmcv_image_crop函数实现。 实践中&#xff0c;经常需要对输入图像的尺寸进行调整&#xff0c;以适用于网络输入图片尺寸&#xff0…...

LLM之Prompt(二):清华提出Prompt 对齐优化技术BPO

论文题目&#xff1a;《Black-Box Prompt Optimization: Aligning Large Language Models without Model Training》 论文链接&#xff1a;https://arxiv.org/abs/2311.04155 github地址&#xff1a;https://github.com/thu-coai/BPO BPO背景介绍 最近&#xff0c;大型语言模…...

chatglm3部署使用

chatglm3部署使用 1.部署2.使用3.接入微信4.vue前端 1.部署 1.首先去github下载chatglm3代码。Huggingface下载模型一直失败&#xff0c;所以用阿里的魔塔社区下载。 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求解)

时间&#xff1a;2023年11月23日14:00:16&#xff1a; 直接上代码&#xff08;辛苦两天才改出来的&#xff09; 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中&#xff0c;有两种路由模式可供选择&#xff1a;hash模式和history模式。它们各自有一些优点和缺点&#xff0c;下面是它们的简要介绍&#xff1a; hash模式的原理是通过hashchange事件&#xff0c;通过监听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.概要 很多时候需要用到行专列的方式做数据分析。比如对通讯数据的采集 数据采集结果如下&#xff1a; 变量值采集周期131251132272 我想要看的结果 变量1变量2采集周期351372 就是我想看到相关数据的周期变化情况。 2.试验 2.1创建数据如下&#xff08;表名 tb5&…...

HarmonyOS元服务开发实战—端云一体化开发

还记得我第一次接触arkui还是在22年的9月份&#xff0c;当时arkui还在一个比较初试的阶段。时隔一年再见方舟框架&#xff0c;它已经发生了令人瞩目的变化&#xff0c;不得不说华为方舟框架在更新迭代的速度已经遥遥领先。新的功能和性能优化让这个框架更加强大和灵活&#xff…...

【搭环境】装Python3.8 open3d

先装Python3.8 方法一试了找不到Python3.8的库&#xff0c;所以用方法二装上了。 Python3加入环境变量 更改Python默认指向 open3d需要Python3.6以上&#xff0c;最好用Ubuntu18版本&#xff0c;我用的16版本。。...

【C语言】深入解开指针(四)

&#x1f308;write in front :&#x1f50d;个人主页 &#xff1a; 啊森要自信的主页 ✏️真正相信奇迹的家伙&#xff0c;本身和奇迹一样了不起啊&#xff01; 欢迎大家关注&#x1f50d;点赞&#x1f44d;收藏⭐️留言&#x1f4dd;>希望看完我的文章对你有小小的帮助&am…...

AMEYA360:瑞萨面向高端工业传感器系统推出高精度模拟前端的32位RX MCU

全球半导体解决方案供应商瑞萨电子&#xff08;TSE&#xff1a;6723&#xff09;宣布面向高端工业传感器系统推出一款全新RX产品——RX23E-B&#xff0c;扩展32位微控制器&#xff08;MCU&#xff09;产品线。新产品作为广受欢迎的RX产品家族的一员&#xff0c;具有高精度模拟前…...

机器学习赋能软件质量保障:从Bug自动分类到智能缺陷管理实战

1. 项目概述&#xff1a;当机器学习遇见软件质量保障在软件开发的日常里&#xff0c;Bug&#xff08;缺陷&#xff09;的识别、分类和处理&#xff0c;是每个工程师和测试人员绕不开的“日常任务”。想象一下&#xff0c;一个大型开源项目&#xff0c;每天有成百上千个新的Bug报…...

ESP8266 AT指令连接阿里云MQTT全流程实测:从串口调试到物模型数据收发

ESP8266 AT指令连接阿里云MQTT全流程实测&#xff1a;从串口调试到物模型数据收发 在物联网开发中&#xff0c;ESP8266凭借其低廉的价格和稳定的性能&#xff0c;成为了连接云端服务的首选模块之一。而通过AT指令直接操作ESP8266&#xff0c;更是让开发者能够快速实现设备上云&…...

Windows热键冲突终极指南:Hotkey Detective一键定位占用程序

Windows热键冲突终极指南&#xff1a;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小时热切换方案

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;PHP支付系统国密改造的背景与合规要求 随着《密码法》正式施行及《金融行业信息系统商用密码应用基本要求》&#xff08;JR/T 0092—2021&#xff09;等监管文件落地&#xff0c;面向金融级业务的PHP支…...

实战派指南:在嵌入式Camera项目里,你的Gamma校正曲线到底该怎么调?

实战派指南&#xff1a;在嵌入式Camera项目里&#xff0c;你的Gamma校正曲线到底该怎么调&#xff1f; 当你第一次拿到一颗新的图像传感器时&#xff0c;最令人头疼的往往不是硬件连接&#xff0c;而是那个看似简单却暗藏玄机的Gamma校正表。上周在调试一款工业检测相机时&…...

AI伦理官2026认证路线:软件测试从业者的专业转型指南

在人工智能技术飞速发展的2026年&#xff0c;AI伦理官已成为全球科技领域的关键角色&#xff0c;负责确保算法决策的公平性、透明性和合规性。随着各国监管框架&#xff08;如欧盟AI法案和中国《人工智能科技伦理审查与服务办法》&#xff09;的强制执行&#xff0c;企业对AI伦…...

详解C++中动态内存管理和泛型编程

一、C/C内存区域划分1. 栈又叫堆栈--非静态局部变量/函数参数/返回值等等&#xff0c;栈是向下增长的。2. 内存映射段是高效的I/O映射方式&#xff0c;用于装载一个共享的动态内存库。用户可使用系统接口创建共享共享内存&#xff0c;做进程间通信。3. 堆用于程序运行时动态内存…...

你的LaTeX参考文献引用对了吗?详解\cite, \citet, \citep的区别与选用场景

LaTeX参考文献引用权威指南&#xff1a;从基础语法到期刊规范实战 第一次用LaTeX写论文时&#xff0c;我被参考文献引用折磨得差点放弃学术生涯。导师批注的"引用格式不统一"像魔咒一样出现在每一页——有时是"(作者, 年份)"&#xff0c;有时变成"作者…...

【2025必学核心能力】:PHP 8.9 Error Handling精准管控——ZEND引擎级错误分流技术首次公开

更多请点击&#xff1a; https://intelliparadigm.com 第一章&#xff1a;PHP 8.9错误处理范式革命&#xff1a;从全局捕获到ZEND级精准分流 PHP 8.9 引入了全新的 zend_error_dispatcher 机制&#xff0c;允许开发者在 Zend Engine 层直接注册错误分流回调&#xff0c;绕过传…...

别再只写Hello World了!用CH32V307和W25Qxx做个离线数据记录仪

从零构建CH32V307环境数据记录仪&#xff1a;SPI Flash实战指南 每次看到"Hello World"在串口终端闪烁时&#xff0c;你是否想过让单片机做些更有意义的事&#xff1f;环境监测、工业控制、智能家居等领域都离不开数据记录功能&#xff0c;而SPI Flash芯片正是实现离…...