uni-app app引入天地图

话不多说咸鱼来了

<template><view><div class="mapBox" style="width: 100%; height: 100vh;background: #ddc0c0;" id="mapId" ></div></view>
</template>
<script module="test" lang="renderjs">var mapexport 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.等遇到在补充八哈

结果:在这里插入图片描述
补充一下:数据交互有的没法在两个之间进行,不过可以借助vuex和监听来实现。

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

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

相关文章

不废话的将ts一篇文章写完

写在前面 网上很多写ts的教程的&#xff0c;但是我觉得写的太繁琐了&#xff0c;这里我直接将基础用法写上&#xff0c;包括编译后的js代码&#xff0c;以便于你们进行对比&#xff0c; 包括一些常见的报错信息&#xff0c;你们可以对比一下报错信息&#xff0c; 我尽量不废话的…

【模型微调】| 各类微调模型总结 P-Tuning,Prefix,P-tuning v2,LoRA

文章目录 1 微调背景1.1 Full fine-tuning 全参数微调&#xff08;FFT&#xff09;1.2 parameter-Efficient-fine-tuning 部分参数微调&#xff08;PEFT&#xff09; 2 提示词调整训练法2.1 P-Tuning2.2 Prefix2.3 P-Tuning v2 3 结构调整训练法3.1 Adapter tuning3.2 LoRA 微调…

PySimpleGUI 综合应用|英语文本朗读以及转换为语音Mp3

PySimpleGUI 综合应用 目录 PySimpleGUI 综合应用 应用界面 完整代码 所需模块 PySimpleGUI pyttsx3 pyaudio rapidfuzz 字典格式 应用界面 完整代码 英语朗读器.pyw import PySimpleGUI as sg import pyttsx3,pyaudio,pyperclip import os,re,datetime,wave,threa…

java基础(面试用)

一、基本语法 1. 注释有哪几种形式&#xff1f; //单行注释&#xff1a;通常用于解释方法内某单行代码的作用。 //int i 0;//多行注释&#xff1a;通常用于解释一段代码的作用。 //int i 0; //int i 0;//文档注释&#xff1a;通常用于生成 Java 开发文档。 /* *int i 0; …

springboot139华强北商城二手手机管理系统

简介 【毕设源码推荐 javaweb 项目】基于springbootvue 的 适用于计算机类毕业设计&#xff0c;课程设计参考与学习用途。仅供学习参考&#xff0c; 不得用于商业或者非法用途&#xff0c;否则&#xff0c;一切后果请用户自负。 看运行截图看 第五章 第四章 获取资料方式 **项…

静态时序分析:时序弧以及其时序敏感(单调性)

相关阅读 静态时序分析https://blog.csdn.net/weixin_45791458/category_12567571.html?spm1001.2014.3001.5482 在静态时序分析中&#xff0c;不管是组合逻辑单元&#xff08;如与门、或门、与非门等&#xff09;还是时序逻辑&#xff08;D触发器等&#xff09;在时序建模时…

如何提高工业数据采集的效率和准确性-天拓四方

随着工业4.0和智能制造的兴起&#xff0c;工业数据采集的重要性日益凸显。通过数据采集&#xff0c;企业能够实时监控生产过程&#xff0c;优化资源配置&#xff0c;提高生产效率。在实时监控、生产优化、质量控制等方面&#xff0c;有效的数据采集系统能够为企业提供宝贵的洞察…

幻兽帕鲁服务器多少钱一台?腾讯云新版报价

腾讯云幻兽帕鲁服务器4核16G、8核32G和16核64G配置可选&#xff0c;4核16G14M带宽66元一个月、277元3个月&#xff0c;8核32G22M配置115元1个月、345元3个月&#xff0c;16核64G35M配置580元年1个月、1740元3个月、6960元一年&#xff0c;腾讯云百科txybk.com分享腾讯云幻兽帕鲁…

MongoDB安装以及卸载,通过Navicat 15 for MongoDB连接MongoDB

查询id&#xff1a; docker ps [rootlocalhost ~]# docker stop c7a8c4ac9346 c7a8c4ac9346 [rootlocalhost ~]# docker rm c7a8c4ac9346 c7a8c4ac9346 [rootlocalhost ~]# docker rmi mongo sudo docker pull mongo:4.4 sudo docker images 卸载旧的 sudo docker stop mong…

线上品牌展厅有哪些优点,如何打造线上品牌展厅

引言&#xff1a; 在当今数字化时代&#xff0c;品牌展示的方式也在不断演变&#xff0c;线上品牌展厅作为一种新型的展示方式&#xff0c;正逐渐成为品牌宣传的新宠。但是为什么需要线上品牌展厅&#xff0c;线上品牌展厅有哪些优势呢&#xff1f; 一&#xff0e;为什么需要线…

各品牌主板快速启动热键对照表及CMOS进入方法

各品牌主板快速启动热键对照表 主板品牌 启动按键 笔记本品牌 启动按键 主机品牌 启动按键 华硕主板 F8 联想笔记本 F12 联想台式机 F12 技嘉主板 F12 宏碁笔记本 F12 惠普台式机 F12 微星主板 F11 华硕笔记本 ESC 宏碁台式机 F12 梅捷主板 F9 惠普笔…

elementui 开始结束时间可以选择同一天不同时间段

先在main.js中导入 import moment from moment <el-row><el-col :span"12"><el-form-item label"考试开始时间" prop"startTime"><el-date-picker v-model"shiJuanXinXiForm.startTime" style"width: 100…

异步解耦之RabbitMQ(二)__RabbitMQ架构及交换机

异步解耦之RabbitMQ(一) RabbitMQ架构 RabbitMQ是一个基于AMQP&#xff08;Advanced Message Queuing Protocol&#xff09;协议的消息代理中间件&#xff0c;它通过交换机和队列实现消息的路由和分发。以下是RabbitMQ的架构图&#xff1a; Producer&#xff08;生产者&#…

孪生卷积神经网络(Siamese Convolutional Neural Network)的设计思路

孪生卷积神经网络&#xff08;Siamese Convolutional Neural Network&#xff09;是一种特殊类型的卷积神经网络&#xff0c;主要用于处理需要成对比较的数据&#xff0c;例如判断两个输入是否相似。 以下是孪生卷积神经网络的基本结构&#xff1a; 输入层&#xff1a;这一层…

019代码结构

什么是顺序结构&#xff1f; 什么是选择结构&#xff1f; boolean flag true; // 结果为true会执行大括号内的代码&#xff0c;否则不执行直接跳过 if(flag true){System.out.println("flag为真"); } 双if选择结构 if(flag true){// 结果为true会执行大括号内的代…

Vue3-Composition-API(二)

一、computed函数使用 1.computed 在前面我们讲解过计算属性computed&#xff1a;当我们的某些属性是依赖其他状态时&#xff0c;我们可以使用计算属性来处理 在前面的Options API中&#xff0c;我们是使用computed选项来完成的&#xff1b; 在Composition API中&#xff0c…

有哪些好用的洗地机推荐?洗地机品牌推荐

在如今快节奏的生活中&#xff0c;人们对于家居清洁的需求也越来越高。洗地机无疑成为了很多家庭清洁的得力助手。然而&#xff0c;在众多品牌和型号中&#xff0c;到底哪款洗地机值得入手呢&#xff0c;这可能是很多人都会发出的疑问&#xff0c;下面&#xff0c;我们接下来一…

JDBC - 结构优化1

JDBC - 结构优化1 文章目录 JDBC - 结构优化1三层架构1 什么是三层架构2 三层架构项目搭建 结构优化1 - 学生信息管理1 封装工具类2 ORM3 DAO 三层架构 1 什么是三层架构 **三层架构&#xff1a;**将程序划分为表示层, 业务逻辑层, 数据访问层三层&#xff0c;各层之间采用接…

vit细粒度图像分类(七)TBNet学习笔记

1.摘要 细粒度鸟类图像识别致力于实现鸟类图像的准确分类&#xff0c;是机器人视觉跟踪中的一项基础性工作。鉴于濒危鸟类的监测和保护对保护濒危鸟类具有重要意义&#xff0c;需要采用自动化方法来促进鸟类的监测。在这项工作中&#xff0c;我们提出了一种新的基于机器人视觉…

代码随想录算法训练营29期|day36任务以及具体安排

第八章 贪心算法 part05 435. 无重叠区间 class Solution {public int eraseOverlapIntervals(int[][] intervals) {Arrays.sort(intervals, (a,b)-> {return Integer.compare(a[0],b[0]);});if(intervals.length 1) return 0;int result 0;for(int i 1 ; i < interva…