Vue项目中应用天地图

最新推荐文章于 2024-08-20 10:49:35 发布

原创

最新推荐文章于 2024-08-20 10:49:35 发布 · 5.4k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #街景地图

本文介绍了如何在Vue项目中引入和使用天地图，包括全局与按需引入地图JS库，创建DOM元素，添加标注点及信息窗口，以及实现地理编码功能。同时，注意到全局引入可能带来的性能损耗问题，并提出优化方案。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

引入天地图 js

首先到天地图官网获取服务许可key；国家地理信息公共服务平台天地图

全局引入地图 js 库

在Vue项目的index.html 文件中，全局引入天地图js库

<body>
    <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=申请的key" type="text/javascript"></script>
</body>

这种方法引入的地图 js，会导致项目的每一个组件都会加载该 js，尤其在不需要加载天地图的页面，会造成很大的性能损耗；而在首页不需要天地图时，天地图加载缓慢，会造成很长的白屏时间，因此需要优化一下引入地图 js 的方法；

创建dom元素并插入

在需要引入 js 的页面，创建script元素，设置 src 属性，并插入；这样就会只在该页面中引入天地图 js；

mounted() {
    let script = document.createElement('script')
    script.type = 'text/javascript'
    script.src = 'http://api.tianditu.gov.cn/api?v=4.0&tk=申请的key'
    document.body.appendChild(script)
},

应用天地图

<template>
    <di

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

saltlike

关注关注

4
点赞
踩
16

收藏

觉得还不错? 一键收藏
3
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

Vue中使用天地图

码农键盘上的梦

02-14

1万+

天地图JavaScript API 4.0是一套符合HTML5.0规范的的应用程序接口，以HTML 5.0的形式提供各种地图服务和数据，如。

Vue 3 使用OpenLayers7加载天地图

最新发布

zhong504989的博客

06-21

193

本文摘要：介绍了如何在Vue3项目中使用OpenLayers7集成天地图的方法。主要包括：1)创建Vue3项目并安装OpenLayers；2)申请天地图Key并创建tiandituLayer.ts文件配置WMTS图层；3)在App.vue中初始化地图，设置中心点和缩放级别；4)通过onMounted钩子加载地图。该方法实现了矢量底图与注记图层的叠加显示，采用EPSG:4326坐标系，支持18个缩放级别。最终效果将以深圳(114.1245,22.6043)为中心显示天地图服务。

3 条评论您还未登录，请先登录后发表或查看评论

【vue+cesium】加载三维天地图

ikariku的博客

09-26

3861

天地图及 CesiumJs 对 webpack 支持度差，步骤繁琐，因此采用脚本引入方式。事先注册好cesium和天地图的token <script src="./plugin/cesium/Cesium.js"></script> <script src="./plugin/cesium/cesiumTdt.js"></script> <link href="https://cesium.com/downloads/cesiumjs/rel

vue项目中使用天地图

01-08

1.首先打开天地图注册账号申请自己所用的key 网址：http://lbs.tianditu.gov.cn/home.html 2.创建自己的vue项目，这里就不说了 3.将引入到你项目中的index.html文件中 4.创建map.vue文件  export default { data(){ return{ } }, created(){ }, mounted(){ this.loadmap() },

vue中使用天地图

wch19960518的博客

03-14

1798

vue中使用天地图

在vue中使用天地图dome

05-31

在Vue项目中，我们需要在合适的地方引入天地图的API库，并根据需求调用相应的函数。 3. **轨迹图添加**：在地图上显示轨迹数据，通常需要将轨迹数据解析为坐标点数组，然后利用天地图API创建线图层或轨迹动画效果。...

Vue项目使用天地图

weixin_46607967的博客

05-29

3319

然后在项目的 public/index.html 文件内引入天地图官方提供的Script。

VUE中接入天地图

哦哦哦，这样吧！

08-29

1986

1.在public/index.html内引入js。

vue2使用天地图

请叫我欧皇！的博客

08-20

5593

需求：用vue2使用天地图展示对应点位数据以及开发中出现的问题等，其实天地图的写法和百度地图差不多注意！！！天地图的接口不稳定，时常报错418，官网也是一样的情况，推荐还是使用百度或者高德吧。以下是拷贝的网上的地图坐标系，仅作参考（1）天地图：CGCS2000，2000国家大地坐标系；我们其实很多时候直接用WGS84的坐标来代替CGCS2000坐标。因为CGCS2000的定义与WGS84实质一样。采用的参考椭球非常接近。扁率差异引起椭球面上的纬度和高度变化最大达0.1mm。

vue项目天地图使用

热门推荐

dnvtkhbn的博客

08-12

1万+

vue项目中天地图的引用和踩坑

vue引入天地图

qq_49552046的博客

03-07

2075

Vue项目引入天地图 一：在vue的静态资源目录下的index.html中引入天地图的底图 <script type="text/javascript" src="http://api.tianditu.gov.cn/api?v=4.0&tk=你申请的key"> 二： import MapInit from './MapInit.js' export default { data () { return :{

Vue 天地图

qq_59944654的博客

08-24

500

vue引入天地图

Vue项目中引入天地图

晓光同学的博客

04-27

2643

Vue项目中天地图的使用

Vue 引入天地图

Kne982895961的博客

07-06

2273

vue项目中使用天地图

天地图在vue中的使用

m0_46415203的博客

05-28

2449

天地图在vue中的使用，地标点、地图皮肤、自定义信息窗口

vue2项目中应用天地图

03-26

<think>嗯，用户想在Vue2项目中集成和使用天地图API，我需要一步步帮他们解决这个问题。首先，我得回想一下自己之前处理类似问题的经验。记得天地图的使用需要先申请Key，然后引入API的脚本，接着在Vue组件中初始化地图。不过具体步骤可能有些细节需要注意，比如在Vue中如何正确加载外部脚本，避免重复加载或者作用域的问题。首先，用户需要注册成为天地图开发者并获取Key。这一步应该没问题，但可能需要指导他们正确填写应用信息，特别是白名单的设置，避免Key被限制使用。然后，在Vue项目中引入天地图的API脚本。这时候可能会遇到问题，比如在Vue2中如何动态加载外部JS文件。我记得可以使用原生的document.createElement方法，或者使用一些第三方库，但为了简单起见，直接动态创建script标签可能更直接。接下来，在组件中初始化地图。这时候需要考虑组件的生命周期，比如在mounted钩子中初始化地图，确保DOM已经渲染完成。另外，地图容器需要设置宽度和高度，否则地图可能无法显示，这是一个常见的容易出错的地方。用户可能会忘记给容器添加样式，导致地图不显示，这时候需要提醒他们检查CSS。另外，天地图的API版本可能有变化，用户需要确认使用的是最新的或者适合的版本链接。在示例中，我使用的是4.0版本的API，但用户可能需要根据实际情况调整。同时，跨域问题也是需要注意的，如果出现加载错误，可能需要检查网络请求是否被阻止。还有，用户可能在Vue的响应式数据更新后，地图没有正确调整大小，这时候可能需要监听窗口变化，调用map对象的resize方法。不过基础示例中可能不需要这么复杂，但作为优化点可以提及。最后，测试和调试步骤也很重要。用户可能需要打开浏览器的开发者工具，查看控制台是否有错误，比如Key无效、脚本加载失败或者网络请求的问题。提供一些常见问题的解决方法，比如Key未通过验证时的提示，或者地图容器样式问题，能帮助用户更快地排查问题。现在，我需要把这些思考整理成步骤清晰的指南，确保用户能一步步跟着操作。同时，生成的相关问题要覆盖用户可能遇到的后续疑问，比如优化加载、组件化封装和跨组件控制地图，这些都能帮助用户更深入地使用天地图API。</think>在Vue2中集成天地图API可分为以下步骤： ### 一、申请天地图开发者Key 1. 访问[天地图官网](http://lbs.tianditu.gov.cn)注册账号 2. 进入「开发者资源」-「申请Key」 3. 填写应用信息时，推荐选择「浏览器端」类型，并设置IP白名单为`*`（开发阶段）[^1] ### 二、Vue项目配置 ```javascript // main.js import Vue from 'vue' const TMap_URL = "http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥"; // 动态加载天地图脚本 const loadScript = (url) => { return new Promise((resolve) => { const script = document.createElement('script') script.type = 'text/javascript' script.src = url script.onload = resolve document.head.appendChild(script) }) } Vue.prototype.$initTMap = async () => { if (!window.T) { await loadScript(TMap_URL) } return window.T } ``` ### 三、组件实现 ```vue <template> <div id="mapContainer" style="width:100%;height:600px"></div> </template> <script> export default { async mounted() { const T = await this.$initTMap() this.initMap(T) }, methods: { initMap(T) { const map = new T.Map('mapContainer', { projection: 'EPSG:4326' // 使用WGS84坐标系 }) map.centerAndZoom(new T.LngLat(116.4075, 39.9040), 12) // 设置北京中心点 // 添加控件 const ctrl = new T.Control.Zoom() map.addControl(ctrl) } } } </script> ``` ### 四、注意事项 1. 地图容器必须设置具体尺寸，否则无法渲染 2. 生产环境需配置具体的IP白名单 3. 建议使用HTTPS协议加载API（将URL改为`https://api.tianditu.gov.cn`） 4. 跨域问题需配置服务器CORS[^2]