当前位置: 首页 > 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;具有高精度模拟前…...

【快手拥抱开源】通过快手团队开源的 KwaiCoder-AutoThink-preview 解锁大语言模型的潜力

引言&#xff1a; 在人工智能快速发展的浪潮中&#xff0c;快手Kwaipilot团队推出的 KwaiCoder-AutoThink-preview 具有里程碑意义——这是首个公开的AutoThink大语言模型&#xff08;LLM&#xff09;。该模型代表着该领域的重大突破&#xff0c;通过独特方式融合思考与非思考…...

什么是库存周转?如何用进销存系统提高库存周转率?

你可能听说过这样一句话&#xff1a; “利润不是赚出来的&#xff0c;是管出来的。” 尤其是在制造业、批发零售、电商这类“货堆成山”的行业&#xff0c;很多企业看着销售不错&#xff0c;账上却没钱、利润也不见了&#xff0c;一翻库存才发现&#xff1a; 一堆卖不动的旧货…...

MVC 数据库

MVC 数据库 引言 在软件开发领域,Model-View-Controller(MVC)是一种流行的软件架构模式,它将应用程序分为三个核心组件:模型(Model)、视图(View)和控制器(Controller)。这种模式有助于提高代码的可维护性和可扩展性。本文将深入探讨MVC架构与数据库之间的关系,以…...

质量体系的重要

质量体系是为确保产品、服务或过程质量满足规定要求&#xff0c;由相互关联的要素构成的有机整体。其核心内容可归纳为以下五个方面&#xff1a; &#x1f3db;️ 一、组织架构与职责 质量体系明确组织内各部门、岗位的职责与权限&#xff0c;形成层级清晰的管理网络&#xf…...

【项目实战】通过多模态+LangGraph实现PPT生成助手

PPT自动生成系统 基于LangGraph的PPT自动生成系统&#xff0c;可以将Markdown文档自动转换为PPT演示文稿。 功能特点 Markdown解析&#xff1a;自动解析Markdown文档结构PPT模板分析&#xff1a;分析PPT模板的布局和风格智能布局决策&#xff1a;匹配内容与合适的PPT布局自动…...

前端开发面试题总结-JavaScript篇(一)

文章目录 JavaScript高频问答一、作用域与闭包1.什么是闭包&#xff08;Closure&#xff09;&#xff1f;闭包有什么应用场景和潜在问题&#xff1f;2.解释 JavaScript 的作用域链&#xff08;Scope Chain&#xff09; 二、原型与继承3.原型链是什么&#xff1f;如何实现继承&a…...

全志A40i android7.1 调试信息打印串口由uart0改为uart3

一&#xff0c;概述 1. 目的 将调试信息打印串口由uart0改为uart3。 2. 版本信息 Uboot版本&#xff1a;2014.07&#xff1b; Kernel版本&#xff1a;Linux-3.10&#xff1b; 二&#xff0c;Uboot 1. sys_config.fex改动 使能uart3(TX:PH00 RX:PH01)&#xff0c;并让boo…...

短视频矩阵系统文案创作功能开发实践,定制化开发

在短视频行业迅猛发展的当下&#xff0c;企业和个人创作者为了扩大影响力、提升传播效果&#xff0c;纷纷采用短视频矩阵运营策略&#xff0c;同时管理多个平台、多个账号的内容发布。然而&#xff0c;频繁的文案创作需求让运营者疲于应对&#xff0c;如何高效产出高质量文案成…...

MySQL 知识小结(一)

一、my.cnf配置详解 我们知道安装MySQL有两种方式来安装咱们的MySQL数据库&#xff0c;分别是二进制安装编译数据库或者使用三方yum来进行安装,第三方yum的安装相对于二进制压缩包的安装更快捷&#xff0c;但是文件存放起来数据比较冗余&#xff0c;用二进制能够更好管理咱们M…...

无人机侦测与反制技术的进展与应用

国家电网无人机侦测与反制技术的进展与应用 引言 随着无人机&#xff08;无人驾驶飞行器&#xff0c;UAV&#xff09;技术的快速发展&#xff0c;其在商业、娱乐和军事领域的广泛应用带来了新的安全挑战。特别是对于关键基础设施如电力系统&#xff0c;无人机的“黑飞”&…...