Vue - 超详细网站接入腾讯地图的完整流程，提供地图显示、IP 属地定位、地理位置名称、获取经纬度等超多功能示例（可一键复制并运行的功能源代码，详细的注释及常见问题汇总）Nuxt.js 也能用！

已于 2024-02-02 12:53:32 修改
阅读量2k 收藏
点赞数 3
分类专栏： + Vue 文章标签： vue.js nuxt.js vue植入腾讯地图详细教程 vue腾讯地图获取位置 vue IP属地功能实现 vue腾讯地图拿到位置名称
于 2023-03-17 22:06:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44198965/article/details/129611200
版权
+ Vue 专栏收录该内容
156 篇文章 1110 订阅 ¥9.90 ¥99.00
订阅专栏

前言

如果您需要 uniapp 教程，请访问：uniapp - H5 网页接入腾讯地图。

本文站在小白的角度，实现了 Vue2 / Vue3 / Nuxt.js 网站，集成腾讯地图的详细流程及使用方法教程，提供了地图显示、IP 属地定位、当前定位的地理位置名称、当前定位的经纬度等等 “基础示例”，基于它保证您后续想做什么功能都能直接上手！

您可以按照教程简单有序的完成配置，最后复制示例源码运行起来稍微改改就能用了，

如下图所示（真实请求地图 API，建议放大查看），本文提供详细引入地图的流程及全部示例源代码，可直接复制代码运行：

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

在这里插入图片描述

第一步

要用腾讯地

了解本专栏 订阅专栏 解锁全文
王佳斌
关注
  • 3
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
专栏目录
订阅专栏
vue使用elementui结合高德地图的定位以及位置显示
11-25
里面包含了elementui结合高德地图的定位已经位置标记相关的资料，里面的定位组件下载就可使用，包含组件和说明文档。
vue中加载腾讯地图（html形式）
LavaStrom
10-30 1488
vue中引入腾讯地图，目前根据网上的方式有一种 qqmap组件，但是本人才疏学浅，未能探究如何使用，于是乎，就曲线救国，用另一种方式实现了，在vue中引入iframe，然后在iframe中引入html的url路径，来及加载腾讯地图。 准备工作 1、html编写的腾讯地图（基本上照抄官网就ok的） 2、vue中引入iframe标签 3、iframe标签中引入html文件 4、vue与html的交互，用了一种最笨的方法，通过监听localstorage 来实现的 HTML代码如下，建议直接放到项目中publi
vue使用腾讯地图
最新发布
GDNLQ的博客
03-29 587
先来展示效果图（输入框、文字就不管了自己写就行）
在vue中使用腾讯地图
lll19960406的博客
05-29 1865
在vue中使用腾讯地图， 1、首先去申请一个key，可以在https://lbs.qq.com/这个网站里申请。打开是下图这个样子的。 2、点击登录，绑定一些信息，手机号之类的，随后点进开发者信息里，如下图 3、点击key管理，创建新密钥，填写相应信息即可 4、申请成功后是这样的-(五位一组，共六组) 5、在vue中引用腾讯地图 即在index.html文件中引入 <sc...
VUE接入腾讯地图
weixin_46288115的博客
06-06 5065
vue接入腾讯地图(一)【点击事件】 - 腾讯位置服务 -
vue3+腾讯地图TMap
yangxiaoman123的博客
11-22 8709
在vue3中使用腾讯地图TMap 前提：在使用前 需要到腾讯地图官网去注册申请 申请通过官方会给一个key值作为标识； 使用腾讯地图目的是获取位置信息也就是经纬度，下面来看下腾讯地图的使用 一、功能分析 可以根据关键字模糊搜索 点击地图可以获取到具体的位置也就是经纬度 刚进入地图获取到当前的地址位置 知道了具体需要哪些功能了 就开始代码了 1.要在项目下的public中的index.html中引入腾讯地图 这个是因为腾讯地图没有同步vue 所以在index.html中引入 其中的key 是上面说的 申
腾讯地图小demo（vue）.rar
04-28
vue版本--腾讯地图demo，可搜索关键字和经纬度，显示地图和搜索结果列表。下载改key即可用。vue版本--腾讯地图demo，可搜索关键字和经纬度，显示地图和搜索结果列表。下载改key即可用。
Vue引入腾讯地图（搜索获取定位）
sinat_41273766的博客
06-09 5363
2.进入控制台，点击左侧菜单应用管理—我的应用，点击右上方创建应用，填写内容如下。以Vue项目为例，在index.html文件中添加。WebServiceAPI里根据自己的情况填写。保存后显示刚刚的应用即可使用腾讯地图。新建map.vue 腾讯地图组件。
vue引入腾讯地图
qq_41207700的博客
08-03 856
index.html引入。
vue项目中使用腾讯地图(1.地图显示)
z980498059的博客
07-11 2321
腾讯地图文档：https://lbs.qq.com/webApi/javascriptGL/glGuide/glBasic。1.2服务控制台 ——应用管理——我的应用——创建应用——主要需要用到key。2.在index.html文件中引入腾讯地图。在页面中定义地图显示容器。//设置地图中心点坐标。2.1 创建地图组件。//设置地图缩放级别。
vue腾讯地图
u011147054的博客
03-30 356
vue腾讯地图 index.html引入腾讯地图 <!-- 引入api --> <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=你的key"></script> <!-- 引入这段拓展，以便应用后面Geolocation --> <script type="text/javascript" src="https://3gimg.qq.com/lightmap/c
腾讯位置服务
06-11
腾讯位置服务
js-vue-高德-实时定位.zip vue集成高德地图，实时定位用户当前位置经纬度，并在高德地图上显示具体位置
06-24
js-vue-高德-实时定位.zip vue集成高德地图，实时定位用户当前位置经纬度，并在高德地图上显示具体位置 方法简便，丢入即可使用 vue集成高德地图，实时获取用户的位置经纬度，并在地图显示具体位置
flutter + SpringBoot + MySql 实现高德地图定位获取位置信息插入数据库并计算出经纬度之间的距离
08-30
flutter + SpringBoot + MySql 实现高德地图定位获取位置信息插入数据库并计算出经纬度之间的距离
vue 实现Web端的定位功能 获取经纬度
10-16
主要介绍了vue 实现Web端的定位功能获取经纬度，本文通过实例代码给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
记录在Vue项目里面使用腾讯地图
热门推荐
m0_60835161的博客
03-29 1万+
Vue使用腾讯地图
VUE 引用腾讯地图
meng_xiaoxiao的博客
06-16 2113
腾讯地图选址，搜索
vue2引入腾讯地图并实现地图类型切换、2D、3D视图切换
im_api的博客
02-24 1593
vue2引入腾讯地图并实现地图类型切换、2D、3D视图切换
html调用腾讯地图定位当前位置,vue web项目中调用腾讯地图API获取当前位置的经纬度...
05-26
可以使用腾讯地图的JavaScript API来获取当前位置的经纬度。以下是一个使用Vue.js编写的示例代码： 1. 在`index.html`中引入腾讯地图的JavaScript API： ```html <script src="https://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script> ``` 其中，`YOUR_KEY`需要替换成你自己的腾讯地图API密钥。 2. 在Vue组件中添加一个地图容器： ```html <template> <div ref="mapContainer" style="width: 100%; height: 400px;"></div> </template> ``` 3. 在Vue组件的`mounted`生命周期钩子中初始化地图，并获取当前位置的经纬度： ```js mounted() { // 初始化地图 this.initMap(); }, methods: { initMap() { // 创建地图实例 const map = new qq.maps.Map(this.$refs.mapContainer, { center: new qq.maps.LatLng(39.916527, 116.397128), // 默认北京市中心 zoom: 13, }); // 获取当前位置的经纬度 const geolocation = new qq.maps.Geolocation(); geolocation.getLocation( (position) => { const latLng = new qq.maps.LatLng( position.lat, position.lng ); // 将地图中心设置为当前位置 map.setCenter(latLng); }, () => { console.error("定位失败"); } ); }, } ``` 在上面的代码中，我们首先创建了一个地图实例，并将地图容器绑定到Vue组件的`$refs`属性中。然后，我们使用腾讯地图的Geolocation类来获取当前位置的经纬度，并将地图中心设置为当前位置。如果定位失败，则会在控制台输出错误信息。 注意：在使用腾讯地图API时，需要先在腾讯云上开通地图API服务，并申请密钥。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

打赏作者

王佳斌

请作者喝杯咖啡 :)

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

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

打赏作者

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

抵扣说明：

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

余额充值