uni-app app引入天地图

news2024/9/21 16:46:21

话不多说咸鱼来了

<template>
	<view>
		<div class="mapBox" style="width: 100%; height: 100vh;background: #ddc0c0;" id="mapId" >
			
		</div>
	</view>
</template>
<script module="test" lang="renderjs">
	var map
	export default {
		created() {
			const charset = 'utf-8'
			const script = document.createElement('script')
			    script.setAttribute('type','text/javascript')
			    script.setAttribute('charset',charset)
			    script.setAttribute('src','http://api.tianditu.gov.cn/api?v=4.0&tk=xxxxxxxxxxxxxxxxxxxxxxxxxx')
				document.getElementsByTagName('head')[0].appendChild(script)
			setTimeout(() => {
			        this.initMap();
			}, 500)
		},
		methods: {
		    //初始化地图
		    initMap() {
				const a = new Promise((resolve, reject) => {
					if (window.T) {
						console.log('地图脚本初始化成功...');
						resolve(window.T);
					}
				});
				map = new window.T.Map('mapId');
				map.centerAndZoom(new window.T.LngLat( 102.682491, 25.051102), [12]);
				map.setMapType(window.TMAP_HYBRID_MAP); // 设置地图位地星混合图层
		    },
		}
	}
</script>

重点:
1.module=“test” lang=“renderjs” 必须加上,否则报Error in created hook: "TypeError: Cannot read property ‘createElement’ of undefined,TypeError: Cannot read property ‘createElement’ of undefined错误。加上后手机浏览器也可以使用,目前没打包,不知道打包会不会出错。

2.你天地图申请的key
目前存在的问题:
1.一根手指头没法滑动地图,需要两根筷子
2.会出现:Uncaught TypeError: Cannot read property ‘x’ of undefined at http://api.tianditu.gov.cn/api?v=4.0&tk=xxxxxxxxxxx
3.等遇到在补充八哈

结果:在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

vue使用antv-x6 绘制流程图DAG图(二)

代码&#xff1a; <template><div class"graph-wrap" click.stop"hideFn"><Toobar :graph"graph"></Toobar><!-- 小地图 --><div id"minimap" class"mini-map-container"></div>…

Security ❀ TCP异常报文详解

文章目录 1. TCP Out-Of-Order2. TCP Previous Segment Lost3. TCP Retransmission4. TCP Dup Ack XXX#X5. TCP Windows Update6. TCP Previous segment not captured7. 异常案例分析 TCP协议中seq和ack seq的联系&#xff1a; id4的http请求报文由客户端发向服务器&#xff0…

C++ 数论相关题目 台阶-Nim游戏

现在&#xff0c;有一个 n 级台阶的楼梯&#xff0c;每级台阶上都有若干个石子&#xff0c;其中第 i 级台阶上有 ai 个石子(i≥1 )。 两位玩家轮流操作&#xff0c;每次操作可以从任意一级台阶上拿若干个石子放到下一级台阶中&#xff08;不能不拿&#xff09;。 已经拿到地面…

JAVA处理类似饼状图占比和100%问题,采用最大余额法

前言&#xff1a; 在做数据统计报表的时候&#xff0c;有两种方式解决占比总和达不到100%或者超过100%问题。 第一种方式是前端echart图自带的算分框架。 第二种方式是java后端取处理这个问题。 现存问题&#xff1a; 前端通过饼状图的方式去展示各个分类的占比累加和为100%问题…

vue前端页面时间显示问题解决方法

解决方法&#xff0c; <template slot-scope"scope"><span>{{ parseTime(scope.row.boxClosingOnlineTime, {y}-{m}-{d} {h}:{i}:{s}) }}</span> </template> 刷新页面&#xff1a; 此外&#xff0c;使用JsonFormat(pattern "yyyy-M…

Kaggle竞赛系列_SpaceshipTitanic金牌方案分析_数据分析

文章目录 【文章系列】【前言】【比赛简介】【正文】&#xff08;一&#xff09;数据获取&#xff08;二&#xff09;数据分析1. 缺失值2. 重复值3. 属性类型分析4. 类别分析5. 分析目标数值占比 &#xff08;三&#xff09;属性分析1. 对年龄Age分析&#xff08;1&#xff09;…

OpenHarmony—环境准备

JS SDK安装失败处理指导 问题现象 下载JS SDK时&#xff0c;下载失败&#xff0c;提示“Install Js dependencies failed”。解决措施 JS SDK下载失败&#xff0c;一般情况下&#xff0c;主要是由于npm代理配置问题&#xff0c;或未清理npm缓存信息导致&#xff0c;可按照如…

如何更新github上fork的项目(需要一定git基础)

如何更新Fork的项目(需要一定git基础) 前言&#xff1a;本文记录一下自己在github上fork了大佬的开源博客项目https://github.com/tangly1024/NotionNext&#xff0c;如何使用git克隆以及自定义开发和同步合并原项目更新迭代内容的的步骤 如何更新fork的项目(进阶版) 首先你…

MyBatis 源码系列:MyBatis 解析配置文件、二级缓存、SQL

文章目录 解析全局配置文件二级缓存解析解析二级缓存缓存中的调用过程缓存中使用的设计模式 解析SQL 解析全局配置文件 启动流程分析 String resource "mybatis-config.xml"; //将XML配置文件构建为Configuration配置类 reader Resources.getResourceAsReader(re…

华天动力OA ntkodownload.jsp 任意文件读取漏洞复现

0x01 产品简介 华天动力OA是一款将先进的管理思想、 管理模式和软件技术、网络技术相结合,为用户提供了低成本、 高效能的协同办公和管理平台。 0x02 漏洞概述 华天动力OA ntkodownload.jsp接口处存在任意文件读取漏洞,未经身份认证的攻击者可利用此漏洞获取服务器内部敏感…

条款32:确定你的public继承塑模出 is-a 关系

如果你编写类D(“派生类”)public继承类B(“基类”)&#xff0c;就是在告诉C编译器(以及代码的读者)每个类型D的对象都是类型B的对象&#xff0c;但反之则不然。 class Person {...}; class Student: public Person {...}; void eat(const Person& p); // 素有的Person都…

笔记本从零安装ubuntu server系统+环境配置

文章目录 前言相关链接ubuntu Server 安装教程屏幕自动息屏关上盖子不休眠MobaXterm外网SSH内网穿透IPV6远程 为什么我要笔记本装Linux为什么要换ubuntu Server版能否连接wifi之后Linux 配置清单总结 前言 之前装了个ubuntu desktop 版&#xff0c;发现没有命令行&#xff0c;…

FLUENT Meshing Watertight Geometry工作流入门 - 3 BOI FOI

本视频中学到的内容&#xff1a; 如何使用和设置 “Body Of Influence”&#xff08;BOI&#xff09;、“Face Of Influence”&#xff08;FOI&#xff09;。 视频链接&#xff1a; 【FLUENT Meshing入门教程-局部尺寸控制3-BOI&FOI-哔哩哔哩】 https://b23.tv/UHYY828 在…

【React】前端项目引入阿里图标

【React】前端项目引入阿里图标 1、登录自己的iconfont-阿里巴巴矢量图标库&#xff0c;把需要的图标加入到自己的项目中去&#xff1b;2、加入并进入到项目中去选择Symbol点击复制代码3、安装ant-design/icons4. 新建一个MyIcon.js文件内容如下5、在项目中使用 1、登录自己的i…

【Linux笔记】文件描述符与重定向

一、Linux关于文件操作的一些系统调用 1、open和close 我们在C语言阶段已经学过很多文件操作的函数&#xff0c;今天我们要来看看操作系统中对于文件是怎么操作的。 1.1、open与close的用法 C语言的库函数中有很多关于文件操作的接口&#xff0c;包括fopen、fclose、fprint…

《Docker技术革命:从虚拟机到容器化,全面解析Docker的原理与应用-上篇》

文章目录 Docker为什么会出现总结 Docker的思想Docker历史总结 Docker能干嘛虚拟机技术虚拟机技术的缺点 容器化技术Docker和虚拟机技术的区别 Docker概念Docker的基本组成镜像&#xff08;image)容器&#xff08;container&#xff09;仓科&#xff08;repository&#xff09;…

基于大数据的B站数据分析系统的设计与实现

摘要&#xff1a;随着B站&#xff08;哔哩哔哩网&#xff09;在国内视频分享平台的崛起&#xff0c;用户规模和数据量不断增加。为了更好地理解和利用这些海量的B站数据&#xff0c;设计并实现了一套基于Python的B站数据分析系统。该系统采用了layui作为前端框架、Flask作为后端…

防火墙综合拓扑(NAT、双机热备)

实验需求 拓扑 实验注意点&#xff1a; 先配置双机热备&#xff0c;再来配置安全策略和NAT两台双机热备的防火墙的接口号必须一致如果其中一台防火墙有过配置&#xff0c;最好清空或重启&#xff0c;不然配置会同步失败两台防火墙同步完成后&#xff0c;可以直接在主状态防火墙…

逻辑回归与感知机详解

一逻辑回归 采用log函数作为代价函数 1 用于二分类问题 2 cost成本函数定义 3 求最小值&#xff0c;链式求导法则 4 梯度下降法 5 结构图表示 二 感知机 样本点到超平面距离法 1 线性二分类问题 2 点到直线距离 3 更新w 和b 参数 4 算法流程 5 例子

真机调试,微信小程序,uniapp项目在微信开发者工具中真机调试,手机和电脑要连同一个wifi,先清空缓存,页面从登录页进入,再点真机调试,这样就不会报错了

微信小程序如何本地进行真机调试&#xff1f;_unity生成的微信小程序怎么在电脑上真机测试-CSDN博客 微信小程序 真机调试 注意事项 uniapp项目在微信开发者工具中真机调试&#xff0c;手机和电脑要连同一个wifi&#xff0c;先清空缓存&#xff0c;页面从登录页进入&#xf…