最近项目需要用到天地图，要引入到Vue项目中，鉴于官网没有相关的说明文档，在这里我记录一下我所使用的引入方法，可能不是很好，希望有更好的方法大佬能教一下我。
首先获取key
这个里面应用类型记得选择用浏览器端
第一步，在Vue项目文件夹public下的index.html入口文件中加入天地图API JS文件。
引入天地图JavaScript API文件
<script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></script>
2.创建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>
