基于Vue的天地图专题(一)

最新推荐文章于 2026-04-17 09:03:25 发布
原创 最新推荐文章于 2026-04-17 09:03:25 发布 · 1.3k 阅读 · 5
标签
#vue.js #前端 #javascript #前端框架 #vue

基于Vue的天地图专题(一)

写在前面

工作之余想写点博客，毕竟还没毕业就参加工作，至此已经一年多了。经手的一个项目，主要承担的前端开发，其中由很多模块都是我自己独立开发的，这次就想把天地图这个模块拿出来记录总结一下。天地图这块也比较熟悉，也是我本科毕设题目，想想第一个博客也得心应手一点。^^_

天地图组件的引用

  1. 首先去天地图官网，登录或者注册。在这里插入图片描述

  2. 依次点击开发资源-网页Api-新弹出页面右上角控制台在这里插入图片描述

  3. 在控制台页面，单击右上角创建新应用，随便填一填巴拉巴拉。在这里插入图片描述

  4. 申请成功后记住你的key。

  5. 我新建了一个vue项目，这个项目啥也没有，像丁真一样纯真。

  6. 找到 index.html 这个文件 把下列代码复制进去，实现全局引入 （当然你也可以粘贴在某个vue页面上来实现按需引入）

最低0.47元/天 解锁文章
Vue + OpenLayers: 实现天地图示例
laugh666的博客
09-04 747
接下来，我们创建了两个 TileLayer 层，分别加载天地图的矢量图层和注记图层。通过以上步骤，我们成功地在 Vue 中使用了 OpenLayers 加载天地图，并展示了一个示例应用。现在，我们需要在 App.vue 文件中使用 Map.vue 组件。在该文件中，我们可以创建一个简单的界面，并引入 Map.vue 组件。在 initMap 方法中，我们创建了一个新的 Map 对象，并将其绑定到页面上的 div 元素。通过在 App.vue 中引入 Map.vue 组件，并在模板中使用。
VUE中接入天地图
哦哦哦，这样吧！
08-29 2193
1.在public/index.html内引入js。
Vue中使用天地图
热门推荐
码农键盘上的梦
02-14 1万+
天地图JavaScript API 4.0是一套符合HTML5.0规范的的应用程序接口，以HTML 5.0的形式提供各种地图服务和数据，如。
【前端】VUE + 天地图
qq_41597232的博客
08-05 3451
vue天地图使用
Vue3项目里用天地图API做个地图功能，从配置到覆盖物完整流程
最新发布
weixin_26798991的博客
04-17 355
本文详细介绍了在Vue3项目中集成天地图API的全流程，包括环境配置、核心地图组件构建、高级覆盖物实现及性能优化技巧。通过TypeScript深度集成和实战案例，帮助开发者快速实现地图标记点、信息窗口等功能，提升Web应用的地理数据可视化能力。
Vue项目使用天地图
weixin_46607967的博客
05-29 3508
然后在项目的 public/index.html 文件内 引入天地图官方提供的Script。
Vue项目嵌入天地图专题一：加载天地图
ss_dsd的博客
12-29 3551
公司近期的项目有用到天地图，之前接触过百度地图没有接触过天地图。所以根据项目的要求写一个专题来记录下 1.我们用的是南京天地图，首先是引入天地图所需的各种文件,因为我们的项目是vue的项目所以，引入的这些文件我放到了public目录下的html文件里。如图： 2.引入天地图所需文件，这样我们就可以在项目中使用天地吐了 3.加载一个基本的天地图，在methods中新建方法，输入token,定义地图初始化参数，和底图、注记. 4.加载底图成功。 ...
vue项目天地图使用
dnvtkhbn的博客
08-12 1万+
vue项目中天地图的引用和踩坑
Vue项目使用天地图的方法（Vue引入天地图，创建地图实例）
qq_40748812的博客
12-07 3499
最近项目需要用到天地图，要引入到Vue项目中，鉴于官网没有相关的说明文档，在这里我记录一下我所使用的引入方法，可能不是很好，希望有更好的方法大佬能教一下我。 第一步，在Vue项目文件夹public下的index.html入口文件中加入天地图API JS文件。 引入天地图JavaScript API文件 <script src="http://api.tianditu.gov.cn/api?v=4.0&tk=您的密钥" type="text/javascript"></scr
vue 实现天地图，集合数据坐标显示，坐标图片自定义，事件指定位置，地图类型切换
hui_54520的博客
07-11 6535
vue 实现天地图，集合数据坐标显示，坐标图片自定义，事件指定位置，地图类型切换
vue2使用天地图
请叫我欧皇！的博客
08-20 7254
需求：用vue2使用天地图展示对应点位数据以及开发中出现的问题等，其实天地图的写法和百度地图差不多注意！！！天地图的接口不稳定，时常报错418，官网也是一样的情况，推荐还是使用百度或者高德吧。以下是拷贝的网上的地图坐标系，仅作参考（1）天地图：CGCS2000，2000国家大地坐标系；我们其实很多时候直接用WGS84的坐标来代替CGCS2000坐标。因为CGCS2000的定义与WGS84实质一样。采用的参考椭球非常接近。扁率差异引起椭球面上的纬度和高度变化最大达0.1mm。
vue 使用天地图实现描点、信息窗口、历史轨迹回放以及地图自适应容器
weixin_44082271的博客
04-26 3813
在Vue项目文件夹public下的index.html入口文件中引入天地图JavaScript API文件。map.checkResize()方法来自适应容器，需要配合定时器使用才有效。创建一个Vue中初始化的天地图的JS文件，用于指向天地图类。
Vue项目天地图集成实现逆地址解析、点聚合、高效搜索...
luhanglh的博客
03-05 2973
3. 获取Key 4. 引入天地图api服务 引入天地图api服务 实现点聚合 是天地图的点标记组件，如果希望导航或者点击地图更改中心点并标记，直接修改position属性即可。其中icon是标记的图片，需要我们自己去找，官方文档上的图片在网络不好时会不显示。 是天地图实现点聚合的组件，markers属性就是标记的聚合点，style是聚合点的样式。 是当用户点击标记点时显示的文字信息。可供用户进行自定义显示。 设置当前位置为地图中心点 开启位置信息： 提示:
Vue中加载天地图的离线地图
前端-尔嵘
06-17 5604
在上述代码中，我们引入了Leaflet.js和天地图离线地图插件的依赖。在initMap方法中，我们创建了一个地图实例，并使用L.tileLayer.wmts方法来添加天地图离线地图瓦片图层。请将'path/to/offline/tiles/{TileMatrixSet}/{TileMatrix}/{TileRow}/{TileCol}.png'替换为实际的离线瓦片文件的路径。要在Vue中加载天地图的离线地图，你可以使用L.TileLayer.WMTS插件来实现。
前端大屏展示可视化-地图的绘制（天地图）
aBingNa的博客
03-11 1879
大屏可视化、天地图、背景色、飞地、多边形联动、信息窗口
vue中使用天地图
wch19960518的博客
03-14 2020
vue中使用天地图
Vue加载天地图
分享GIS, .Net
12-28 1161
天地图；Vue
vue3+arcgis/core学习实践（三）加载天地图
qq_40639686的博客
02-03 2074
argis/core使用天地图作为底图，并且实现矢量和影像切换
vue3 集成天地图，完美实例
cesske的博客
07-18 4912
在Vue 3中，你可以使用天地图JavaScript API进行集成。以下是一个基本的例子，展示了如何在Vue 3组件中集成天地图并添加一个地图实例： 1、首先，确保你已经在你的项目中包含了天地图的JavaScript API。你可以通过以下方式添加： <!-- 在你的index.html或者相应的模板文件中 --> <script src="http://api.tianditu.gov.cn/api?v=4.0&tk==你的天地图key"></script>
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值