Vue项目使用天地图的方法（Vue引入天地图，创建地图实例）

最近项目需要用到天地图，要引入到Vue项目中，鉴于官网没有相关的说明文档，在这里我记录一下我所使用的引入方法，可能不是很好，希望有更好的方法大佬能教一下我。

第一步，在Vue项目文件夹public下的index.html入口文件中加入天地图API JS文件。
引入天地图JavaScript API文件
```
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script>
```

创建VUE文件，实装第一个页面

<template><div><header>天地图</header><div id="yzMap" style="position: absolute; width: 85%; height: 80%"></div></div>
</template>
<script>
export default {name: 'tianditu',data() {return {};},mounted: () => {const a = new Promise((resolve, reject) => {console.log(reject);// 如果已加载直接返回if (window.T) {console.log('地图脚本初始化成功...');resolve(window.T);}});// 第一种方式显示// a.then((T) => {//   const imageURL = 'http://t0.tianditu.gov.cn/img_c/wmts?tk=5228a6fb6f451e191672532de0a03ad6';//   const lay = new T.TileLayer(imageURL, { minZoom: 1, maxZoom: 18 });//   const config = { layers: [lay], name: 'TMAP_SATELLITE_MAP' };//   const map = new T.Map('yzMap', config);//   const ctrl = new T.Control.MapType();//   map.addControl(ctrl);//   const map = new T.Map('yzMap');//   map.centerAndZoom(new T.LngLat(116.401003, 39.903117), 12);// }).catch();// 第二种方式显示const map = new window.T.Map('yzMap');map.centerAndZoom(new window.T.LngLat(116.401003, 39.903117), 12);console.log(a);},methods: {},
};</script>
<style scoped>
</style>

Vue项目使用天地图的方法（Vue引入天地图，创建地图实例）相关推荐

Swiper4.5在vue项目中的使用方法
一. 效果图 · 渐变式 · gif 动画演示: 二.首先,npm 安装 swiper 用swiper,所以要先在框架内npm install --save swiper安装它. 安装完成之后,你会在 ...
记一次升级node版本后，运行原vue项目报错问题解决方法
记一次升级node版本后,运行原vue项目报错问题解决方法参考文章: (1)记一次升级node版本后,运行原vue项目报错问题解决方法 (2)https://www.cnblogs.com/happ ...
vue 项目在index.html页面直接引入jq库，报错$ is not defined解决方案
近日在vue项目开发中遇到一个问题:vue 项目在index.html页面直接引入jq库,报错$ is not defined解决方案... 首先说一下为什么会出现这个错误,其实项目发布到线上是不会出 ...
将Vue项目methods中的方法暴露在window上
这座城市风很大,孤独的人总是晚回家. 我是一个H5,咱们在写APP的时候,也就是APP内部嵌套咱们H5代码的时候,肯定会遇到交互问题,如果使用普通html js css的话应该没有什么太大的问题,因为 ...
Vue.js教程-Vue项目的目录结构和.vue文件的构成
Vue.js教程-Vue项目的目录结构和.vue文件的构成前言 Vue项目的目录结构(Vue-cli3/4版本) .vue文件的构成 Html区域(template) script区域 export ...
Vue项目跨域解决方案与 vue.config.js 配置解析
为什么会出现跨域? 出于浏览器的同源策略限制.同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响.可以说 ...
vue项目结构php写哪里,Vue项目的创建,以及项目目录结构的分析
Vue项目环境搭建""" node ~~ python:node是用c++编写用来运行js代码的 npm(cnpm) ~~ pip:npm是一个终端应用商城,可以换国内源 ...
Vue项目定义js公用方法
1.使用脚手架搭建vue项目 2.创建一个新的js文件,文件位置根据个人习惯来放接下来编写这个js文件,我是用来去掉富文本编辑器自带的标签和样式 // 将获取的富文本编辑器转过来的html格式转文字 ...
创建Vue项目的两种方法(镜像和官网)
两种搭建方法: 安装node:brew install node 查看node版本:node -v 安装npm:brew install npm 查看npm版本:npm -v 使用淘宝镜像使用官网办 ...

Vue项目使用天地图的方法（Vue引入天地图，创建地图实例）

Vue项目使用天地图的方法（Vue引入天地图，创建地图实例）相关推荐

最新文章

热门文章