uniapp - 超详细 H5 网站接入国家 “天地图“ 完整流程，提供显示地图、IP 属地定位 / 用户定位的城市名称、用户定位的经纬度等超多功能（可复制运行示例代码，详细注释及常见问题）

已于 2025-01-19 16:10:02 修改
阅读量1w 收藏 19
点赞数 6
CC 4.0 BY-SA版权
分类专栏： + UniApp + Uniapp 开发问题汇总 文章标签： uni-app uniapp 网页使用天地图 国家天地图API uniapp公众号h5天地图 uniapp网站植入天地图
于 2023-04-18 21:34:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/130204553
本文详述uniapp H5项目接入国家天地图的完整过程，包括申请Key、配置及代码示例，提供地图显示、IP定位、城市名称及经纬度获取等功能。针对可能出现的错误，如白屏问题，给出了解决方案，同时分享了更多资源和SEO相关关键词。

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

前言

如果您需要兼容小程序、App、nvue等平台，请访问 这篇文章

关于天地图的配置及使用教程的文章几乎没有，本文站在小白的角度从 0-1 进行配置和使用。

本文实现了 uniapp H5 网页项目，详细天地图申请key及配置教程，提供了地图显示及标点、用户当前 IP 属性定位、获取用户定位城市名称、经纬度等诸多示例，

支持 uniapp v2 / v3 版本，按照教程完成配置，复制示例源码运行即可，

如下图所示，详细引入地图的流程及全部示例源代码，各种常见功能。

代码干净整洁，超级详细的注释，除了核心功能无任何乱七八糟的代码！

在这里插入图片描述

申请 Key

要想使用天地图 API，就必须先注册申请 Key。

了解本专栏 订阅专栏 解锁全文
Vue - 【支持Nuxt.js】超详细网站接入国家 “天地图“ 完整流程，提供显示地图、IP 属地定位 / 用户定位的城市名称、用户定位的经纬度等超多功能（可复制运行示例代码，详细注释及常见问题）
资深程序员
04-18 2744
vue2，vue3，nuxt，天地图，使用教程，vue接入国家天地图，定位api，ip属地定位，获取用户当前位置数据，省市区，地图不显示，白屏，报错，如何使用天地图，地图选点，cors跨域，白名单设置了还是不行，天地图申请密钥key教程，经纬度，经纬度不准确，一直定位北京，定位在北京不准怎么办，nuxt项目天地图，vue使用天地图获取当前定位，vue天地图API，vue中使用天地图api教程，vuenuxt天地图使用教程，nuxt项目如何使用天地图，nuxt使用国家天地图详细教程，vuenux
uniapp - [微信小程序 | 安卓苹果app] 详细实现接入天地图完整流程，提供显示地图、IP 属地定位 / 用户定位的城市名称、用户定位的经纬度超多功能（复制运行示例代码，详细注释及常见问题）
热门推荐
资深程序员
05-02 1万+
uni-app，微信小程序，安卓app，苹果app，App端，支付宝小程序，nvue，天地图，国家天地图api，接入使用天地图，uniApp小程序端接入天地图，uniapp安卓苹果app端接入天地图，微信小程序平台如何引入天地图，天地图Api使用教程，如何在uniapp里集成天地图，使用天地图获取当前定位，天地图api教程，天地图官方文档，天地图详细使用教程，Uniapp项目如何使用天地图，项目引入天地图配置及使用教程，使用天地图获取用户定位，天地图获取用户当前位置信息(经纬度)，如何通过天地图拿到用户定位
uni-app app引入天地图
qq_1521514763的博客
01-30 1701
1.module=“test” lang=“renderjs” 必须加上，否则报Error in created hook: "TypeError: Cannot read property ‘createElement’ of undefined，TypeError: Cannot read property ‘createElement’ of undefined错误。加上后手机浏览器也可以使用，目前没打包，不知道打包会不会出错。3.等遇到在补充八哈。
uniapp使用renderjs引入天地图实现地图选点以及搜索附近poi点
最新发布
qq_43950630的博客
07-01 422
APP自定义地图选点，可换底图，可换图标，可自定义样式。要实现下面设计图需求，但要求地图底图是天地图，使用了renderjs进行引入。不罗嗦，下边是具体实现步骤。
uniapp引入天地图
weixin_60011293的博客
11-03 4251
uniapp引入天地图
uniapp实现天地图实时定位巡查、轨迹绘制功能，以及注意点
m0_67790636的博客
07-10 3583
大家应该都知道，现在这三大地图运营商(高德、百度、腾讯)的商业授权是收费的，全国统一标准 5万/年，所以你想在uniapp中使用地图组件（map），或者使用gcj02 坐标系都是要先给人家钱的，本来我们公司也用了高德地图，奈何甲方没钱了，不愿意一年交5万块钱了，哎，就得把我们公司后台，以及app所有有关高德地图的东西换成天地图，因为天地图是免费的,开源的，地址（）这么倒霉事就落在我头上~。
uniapp 中使用天地图，安卓端、h5
qq_36762151的博客
02-22 2276
uniapp 中使用天地图，安卓端、h5
uni-app如何引入天地图并兼容app
weixin_43309426的博客
12-31 7385
uni-app如何引入天地图并兼容app
uniapp H5 加载天地图，实现打点，画地块测亩
lisaihang96的博客
04-20 2579
可在微信小程序中打开，1. 创建uniapp 项目 或者 vue2 项目。Vue项目可以通用，不止再uniapp项目上。1. 在h5页面中给uniapp发送消息通信。uniapp编译的h5页面操作，2. index.html文件。2. 跳转uniapp中的组件。
Vue2 - 最新详细实现接入天地图详细配置流程及示例代码教程，提供获取用户当前定位的城市名称及省市区数据、精准经纬度信息、IP属地定位、地图搜索标点等示例，解决天地图跨域报错/页面白屏/定位不准问题
资深程序员
08-06 4554
vue2，nuxt2，天地图，使用教程，vue接入国家天地图，定位api，ip属地定位，获取用户当前位置数据，省市区，地图不显示，白屏，报错，vue2如何使用天地图，地图选点，cors跨域，白名单设置了还是不行，vue项目调用天地图api实现定位，Vue2中使用天地图，详细教程，天地图申请密钥key教程，经纬度，经纬度不准确，一直定位北京，定位在北京不准怎么办，nuxt项目天地图，网站，网页，h5页面，地图显示不全，获取当前定位，如何使用天地图，拿到客户ip地址定位城市名称，距离计算，实时搜索地址逆解析，天
在app中使用天地图（uniapp）
qq_52630125的博客
03-22 4034
以上示例是显示的江西省内，如果需要其他省份数据，可以去阿里云数据可视化平台下载指定的json文件即可，还是通过 renderjs 渲染出地图，操作地图也是在里面。，下载到本地后替换上面的导入即可。
利用html5技术加载天地图
09-16
利用H5前端技术加载天地图
uni-app 引用地图
梦寻汝的博客
04-06 1984
插件市场引用为https://ext.dcloud.net.cn/plugin?id=615 目录 index页面 组件页面 【创建nvue文件】 生成高德地图Key index页面 <template> <div> <hchPosition :storeData="storeData" :markers="markers"></hchPosition> </div> <!-- <div cl...
uniapp [全端兼容] - 实现接入使用天地图及卫星视图切换功能，在国家天地图上自由切换地图显示类型（卫星视图/地形视图/卫星混合/地形混合/普通视图）天地图切换视图显示改成卫星风格，切换地图图层
资深程序员
09-11 1万+
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，天地图，视图，卫星，地图类型切换，uniAPP天地图，改成卫星视角，在线地图切换，来回切换卫星图，天地图如何实现来回切换卫星图，地形图，卫星视图，VUE3引入天地图卫星版，详细教程示例源码代码，天地图切换卫星用什么api，卫星视角API方法，vue3卫星天地图，能改地图的显示方式，vue3中使用天地图自定义样式切换地图图层，切换报错，加载出错，卫星图太卡，地图图层更换，vue3安装集成天地图详细示例源
uniapp+h5混合开发实现天地图手机加载
jia_huining的博客
02-08 1072
uniapp+h5+leaflet 加载天地图
天地图（uniapp）搜索、定位自己、获取标记点的经纬度
mmmmmmmmzw的博客
02-12 2932
https://blog.csdn.net/m0_67350312/article/details/138578174 https://blog.csdn.net/weixin_36152801/article/details/145037991 天地图接口文档1、获取某个位置经纬度 2、这个位置，可以通过搜索获取。例如搜索“天安门”，打点并获取其坐标 3、允许手动打点，因为天地图的搜索并不全面 4、可以导航到指定点（能用就行，天地图不好做实时导航，只能弄个样子） 5、之所以用天地图，就是因为免费。公司没有
uniapp 加载天地图 入门指导
克里斯蒂亚诺更新的博客
01-09 593
【代码】uniapp 加载天地图 入门指导。
uniapp 使用leaflet加载天地图 app端
m0_56104994的博客
03-23 4260
uniapp 使用leaflet加载天地图 app端
天地图h5定位
sunyanchun的专栏
02-08 1143
天地图h5定位
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端开发大师鸭

请作者喝杯咖啡 :)

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值