uniapp 获取定位（经纬度） 并且用腾讯地图api解析省市区门牌号

最新推荐文章于 2024-06-17 11:48:53 发布
最新推荐文章于 2024-06-17 11:48:53 发布
阅读量3.8k 收藏 3
点赞数
分类专栏： uniapp 文章标签： uniapp 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wangongchao/article/details/112691746
版权

1.首先去腾讯地图申请必要的key

https://lbs.qq.com/
根据项目需求勾选不同的方案，我写的是h5,如下
在这里插入图片描述

2.在项目中配置你的key

在这里插入图片描述

3.接下来就是代码了

必须引入腾讯的api，地址如下自己提取，放在项目static目录下
链接：https://pan.baidu.com/s/1m_mChu_1lIGVOtiqepvWvA
提取码：cipa
复制这段内容后打开百度网盘手机App，操作更方便哦

在这里插入图片描述
在全局声明一个变量 let qqma
在这里插入图片描述

onReady() {
qqmap = new QQMapWX({
// key: ‘PATBZ-EZURU-G***FU-GCBRO-LWFXC’
key: ‘JWRBZ-FGPRU-***JMXZ-IG6OO-QM

最低0.47元/天 解锁文章
世俗ゝ
关注
  • 0
    点赞
  • 踩
  • 3
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
专栏目录
uniapp - 最详细 H5 网页接入腾讯地图的完整流程，提供地图显示、IP 属地定位、地理位置名称、获取经纬度等超多功能示例（可一键复制并运行的功能源代码，详细的注释及常见问题汇总）小白直接上手！
王佳斌
03-16 4443
uniapp H5 网页引入腾讯地图详细教程，uni-app引入腾讯地图，uniapp公众号H5网站如何植入腾讯地图，uniappH5平台腾讯地图配置及使用详细教程，uniappH5 植入腾讯地图SDK，uniapp H5公众号项目怎么用腾讯地图，uniappH5网页IP属地定位，获取当前用户位置名称，uniapp h5网站如何使用腾讯地图获取用户的定位位置，uniapp H5腾讯地图怎么接入，uniapp H5项目中使用腾讯地图sdk，uni-app中使用腾讯地图，uniappH5网站集成腾讯地图功能，u
uni-app根据经纬度逆解析详细地址
Debug的博客
08-16 1922
注意填写的appid是你项目用的appid，如果是测试，则勾选域名白名单即可，如果是正式项目，则需要在文本框里填写具体，（可选项：勾选授权ip，并将你本机电脑的ip及测试环境和正式环境的域名ip填入其中，勾选serveiceApi，里面写入域名）
vue腾讯地图逆地址解析(经纬度到地名转换过程)
weixin_59685936的博客
08-23 470
vue腾讯地图逆地址解析(经纬度到地名转换过程)
uniapp根据获取到的经纬度获取详细地址信息
最新发布
weixin_52830464的博客
06-17 406
以下代码兼容H5、安卓App、微信小程序。在App和H5是调用百度地图。在微信小程序是调用腾讯地图。
vue仅使用腾讯地图根据城市名称获取经纬度
gb4215287的博客
08-03 1210
方式一: 下载插件 1.下载 npm install qqmap --save 1 2.使用 // 2.1引入 import maps from 'qqmap' export default { mounted () { // 方法调用 this.getLatitude('北京', '北京市', '通州区') }, methods: { // 2.2 获取经纬度方法 getLatitude (province, ...
【笔记】使用腾讯地图坐标转换
weixin_34128839的博客
08-26 519
首先是js的引用 <script charset="utf-8" src="http://map.qq.com/api/js?v=2.exp&key=YOUR_KEY"></script> 腾讯地图js除了提供基本的功能库外，还提供了一些有用的附加库,下面这个是引用了坐标转换库的js引用 <script type="text/ja...
腾讯地图位置和经纬度的转换工具类
weixin_41438423的博客
12-12 616
最近开发遇到经纬度和地理位置的转换问题，就简单的写了个工具类来使用。key自己去腾讯地图开放平台申请一个就行了，有很多的免费次数。
H5根据腾讯地图Api来获取地理位置经纬度
qq_51196135的博客
09-01 4206
H5根据腾讯地图Api来获取地理位置经纬度
uni-app使用uni.chooseLocation打开地图选取位置并将位置截取成省市区
2301_77940797的博客
11-03 2366
开发 — 开发管理 — 接口设置 点击去开通，开通之后才可以使用。
uniapp利用高德api接口将getLocation经纬度转化到省市区街道信息
12-01 1847
微信的getLocation接口可以获取到用户的经纬度信息，但是没有办法拿到省市县街道信息，所以就需要用到高德的api接口将经纬度转换为省市县这种信息，在对接的时候，有两种方式可以对接这个接口，一个是使用高德的web服务，一个是微信小程序sdk，因为sdk会增加小程序的体积，所以我选择web服务。
HTML5 定位功能（配合腾讯地图API）
热门推荐
chenjineng的博客
07-18 1万+
参考教程：W3C HTML5 地理定位 学习博客：基于浏览器的HTML5地理定位 HTML5 地理定位 HTML5 Geolocation（地理定位）用于定位用户的位置，浏览器的限制较大，在手机上体验更好 代码逻辑 1.判断浏览器是否支持地理定位功能 2.运行getCurrentPosition (showPosition, showError)，showPosition方法...
html调用腾讯地图定位当前位置,vue web项目中调用腾讯地图API获取当前位置的经纬度...
weixin_39633171的博客
06-04 1511
vue web项目中调用腾讯地图API获取当前位置的经纬度vue web项目中调用腾讯地图API获取当前位置的经纬度在main.js 中添加一下代码import axios from 'axios'axios.defaults.baseURL='#'Vue.prototype.$http = axios//这里学过vue使用过axios的人应该都可以看懂，就不做过多解释了之后需要去腾讯地图位置服务...
uniapp 小程序使用腾讯地图搜索位置地点，获取省、市、县地区码的方法
m0_46647799的博客
04-18 3565
一、调用uni.authorize（）方法获取用户授权 二、调用官方uni.chooseLocation（）方法获取当前地址的名称和经纬度 uni.chooseLocation({ success: (res) => { console.log(res.latitude) console.log(res.longitude)
获取用户当前位置信息的两种方法——H5、微信
diaocheng9093的博客
06-15 2321
在之前的调用百度地图API的总结中获取当前位置信息我用的是 H5 ，其实微信也提供了获取用户地理位置的方法，现将这两种方法都贴出来，看情况选择使用。 一、H5 获取当前地理位置得到经纬度 // H5 获取当前位置经纬度 var location_lon = '',location_lat = ''; // 经度,纬度 if (navigator.ge...
【前端】【H5 API】地理定位（获取经纬度）
萌狼蓝天の技术栈
03-15 1万+
H5 API 地理定位 地理定位在日常生活中应用比较广泛，例如，互联网打车、在线地图等。在HTML 5的规范中，增加了获取用户地理位置信息的接口Geolocation，开发者可以通过经纬度来获取用户的地理位置信息，Geolocation接口的特点如下。 Geolocation接口封装了获取位置信息的技术细节。 开发者不需要关心信息的来源，只需关注如何使用即可，这极大地简化了开发的难度。 目前...
uniapp的map地图组件介绍
weixin_67490903的博客
07-27 1万+
由之前描述可知，markers属性类型为Array，表示标记点用于在地图上显示标记的位置。这个数组属性，它里面有它的对象配置属性，分别是。
uniapp 微信小程序获取当前位置 根据经纬度获取省市区
在北风吹起的时候加入我们的队伍 在秋雨到来的时候成为彼此的温暖
03-17 2134
uni.getLocation({ type: 'gcj02', //返回可以用于uni.openLocation的经纬度 success:(res)=>{ let that=this const latitude = res.latitude; const longitude = res.longitude; console.log(res) uni.request({ header:{ "Content-Type
uni-app微信小程序结合腾讯地图获取定位导航以及城市选择器
weixin_46324536的博客
11-29 7017
uni-app微信小程序结合腾讯地图获取定位导航以及城市选择器
vue 高德地图获取点标记经纬度后解析所在省市区
06-09
可以通过高德地图的 JavaScript API 提供的逆地理编码服务来获取点标记所在的省市区信息。具体步骤如下： 1. 在 Vue 组件中引入高德地图 JavaScript API： ```javascript <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=您申请的key值"></script> ``` 2. 初始化地图对象，并创建点标记： ```javascript mounted() { // 初始化地图对象 this.map = new AMap.Map('map-container', { zoom: 10, center: [116.397428, 39.90923] }) // 创建点标记 this.marker = new AMap.Marker({ position: [116.397428, 39.90923], map: this.map }) // 监听点标记点击事件 this.marker.on('click', this.handleMarkerClick) }, ``` 3. 在点标记点击事件处理函数中获取经纬度，并调用逆地理编码服务解析省市区信息： ```javascript methods: { handleMarkerClick() { // 获取点标记经纬度 const position = this.marker.getPosition() // 调用逆地理编码服务解析省市区信息 AMap.plugin('AMap.Geocoder', () => { const geocoder = new AMap.Geocoder({ city: '全国', radius: 1000 }) geocoder.getAddress(position, (status, result) => { if (status === 'complete' && result.regeocode) { const { province, city, district } = result.regeocode.addressComponent console.log(`省份：${province}，城市：${city}，区县：${district}`) } else { console.log('获取地址失败') } }) }) } } ``` 在逆地理编码服务的回调函数中，可以通过 `result.regeocode.addressComponent` 对象获取到省市区信息。 需要注意的是，如果点标记所在的位置距离城市边界比较远，有可能会出现获取不到地址信息的情况，此时需要调整 `radius` 参数的值来扩大逆地理编码服务的范围。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值