步骤

  1. 使用 wx.getLocation来获取位置授权:获取到设备当前的地理位置信息,这个信息是当前位置的经纬度
  2. 使用其他第三方地图服务的API:获取当前位置是处于哪个国家,哪个城市等信息(eg:腾讯地图、百度地图)。
  3. 以腾讯地图为例 去腾讯地图开放平台注册一个账号,然后在它的管理后台创建一个密钥(key)。
  4. 在我们的代码中调用这个API。该API可以通过JSONP的方式调用,也可以在服务器端发起调用。
    具体步骤知识参考:https://lbs.qq.com/guides/startup.html

代码

(1)获取地理经纬度wx.getLocation
(2)下载微信小程序JavaScriptSDK
(3)安全域名设置,在“设置” -> “开发设置”中设置request合法域名,添加https://apis.map.qq.com
(4)小程序代码完整示例

注意:微信小程序使用的时候,WebServiceAPI 域名白名单不能配置,否则会报错
<text>经纬度:{{latitude}},{{longitude}}</text>
<view><text>位置:</text><text>{{province}} </text><text>{{city}} </text><text>{{district}} </text>
</view>
<button bindtap="getLocation">获取当前城市位置</button>var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({data: {province: '',city: '',district: '',latitude: '',longitude: '',},onLoad: function (options) {qqmapsdk = new QQMapWX({key: 'YRXBZ-42R3W-6XVRG-R3V7B-CAOE7-TQB43'});},getLocation () {let _this = thiswx.getSetting({success: (res) => {console.log(JSON.stringify(res))// res.authSetting['scope.userLocation'] == undefined    表示 初始化进入该页面// res.authSetting['scope.userLocation'] == false    表示 非初始化进入该页面,且未授权// res.authSetting['scope.userLocation'] == true    表示 地理位置授权if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {wx.showModal({title: '请求授权当前位置',content: '需要获取您的地理位置,请确认授权',success: function (res) {if (res.cancel) {wx.showToast({title: '拒绝授权',icon: 'none',duration: 1000})} else if (res.confirm) {wx.openSetting({success: function (dataAu) {if (dataAu.authSetting["scope.userLocation"] == true) {wx.showToast({title: '授权成功',icon: 'success',duration: 1000})//再次授权,调用wx.getLocation的API_this.getToLocation()} else {wx.showToast({title: '授权失败',icon: 'none',duration: 1000})}}})}}})} else if (res.authSetting['scope.userLocation'] == undefined) {//调用wx.getLocation的API_this.getToLocation()}else {//调用wx.getLocation的API_this.getToLocation()}}})},// 微信获得经纬度getToLocation: function () {let _this = this;wx.getLocation({type: 'wgs84',success: function (res) {console.log(JSON.stringify(res))var latitude = res.latitudevar longitude = res.longitudevar speed = res.speedvar accuracy = res.accuracy;_this.setData({latitude: res.latitude,longitude: res.longitude})_this.getLocal(latitude, longitude)},fail: function (res) {console.log('fail' + JSON.stringify(res))}})},// 获取当前地理位置getLocal: function (latitude, longitude) {let vm = this;qqmapsdk.reverseGeocoder({location: {latitude: latitude,longitude: longitude},success: function (res) {console.log(JSON.stringify(res));console.log(res.result);let province = res.result.ad_info.provincelet city = res.result.ad_info.citylet district = res.result.ad_info.districtvm.setData({province: province,city: city,district: district,latitude: latitude,longitude: longitude})},fail: function (res) {console.log(res);},complete: function (res) {// console.log(res);}});}
})

结果


小程序 获取当前用户城市信息(省市区)相关推荐

  1. 腾讯微搭小程序获取微信用户信息

    腾讯微搭小程序获取微信用户信息 无论你对低代码开发的爱与恨, 微信生态的强大毋庸置疑. 因此熟悉微搭技术还是很有必要的! 在大多数应用中, 都需要获取和跟踪用户信息. 本文就微搭中如何获取和存储用户信 ...

  2. 微信小程序获取当前所在城市(地区定位与切换)

    小程序地区定位与切换 添加链接描述 添加链接描述 添加链接描述 <text class="chengshi">{{citynames}}</text>< ...

  3. 微信小程序Ⅴ [获取登录用户信息,重点openID(详解)]

    ♩ 背景 其实这篇文章几个月前就写完了,但是这段时间,微信小程序官方文档有了更新,同事在我自己的实际操作过程中,发现之前写的过于繁杂,所以现在进行简化梳理,欢迎指摘. 语言框架:ThinkPHP3.2 ...

  4. uniapp授权登录微信支付宝小程序获取code和基础信息

    项目背景:采用uniapp框架开发微信和支付宝两端小程序,前端授权基础信息和code传给后端获取openid(微信)和user_id(支付宝)建立用户体系. 项目描述:之前分开用原生框架开发的时候,都 ...

  5. 小程序获取当前用户头像和昵称

    wx.showModal({title: '温馨提示',content: '是否允许小程序访问您的个人信息',success(res) {//如果用户点击了确定按钮if (res.confirm) { ...

  6. 从微信服务器获取用户信息,微信小程序Ⅴ [获取登陆用户信息,重点openID(详解)]...

    ♩ 背景 其实这篇文章几个月前就写完了,可是这段时间,微信小程序官方文档有了更新,同事在我本身的实际操做过程当中,发现以前写的过于繁杂,因此如今进行简化梳理,欢迎指摘. 语言框架:ThinkPHP3. ...

  7. 附解决方案,小程序获取的用户信息中昵称图然变成了“微信用户”,而且头像也显示不了?

    以下解决方案来自51CTO博客作者编程小石头的原创作品 最近好多小伙伴在使用getUserInfo获取小程序用户昵称和头像时,图然变成了下面这样. 错误图示 很多小伙伴肯定就疑虑了,明明我代码没有做任 ...

  8. uniapp - [最新] 超详细实现支付宝小程序获取手机号、个人信息,支付宝弹框授权拿到用户手机号与昵称头像等信息完整流程(详细示例源码与注释,一键复制快速应用到项目中)

    效果图 网上的文章乱七八糟的都不行,新手小白很难看懂,本篇文章通俗易懂. 本博客实现了在uniapp 支付宝小程序项目中,从 0-1 描述了如何授权获取用户的手机号和头像昵称信息,一看就能懂 你可以跟 ...

  9. 小程序获取城市经纬度_微信小程序获取当前所在城市的方法

    现在很多企业商家为了提供更准确的服务,基本都要获取用户当前所在的地理位置,城市是其中最基本的.而微信小程序官方提供的API只能获取当前地理位置的经纬度,需要经过第三方转换才可以得到我所需的城市名,经过 ...

最新文章

  1. R语言笔记3:提取R对象的子集
  2. 人民日报:人工智能,务实发展是正道
  3. LCDS与Blazeds区别与配置
  4. Keras functional API快速入门
  5. Python基础教程(四):循环语句
  6. RocketMQ消息的事务架构设计
  7. 如何从“点子”落地到“执行”?—完整解析1个手游传播类mini项目的进化
  8. 斯坦福大学面向Tensorflow深度学习研究课程(2018)
  9. 如何在java对象里访问Spring中已加载的property内容
  10. Spring Tool Suite 4(STS)的下载安装
  11. Android Studio 下载ndk
  12. mac下的svn工具——Versions使用详解
  13. php bin2hex park,PHP bin2hex()函数与示例
  14. mybatis报错:org.springframework.jdbc.CannotGetJdbcConnectionException: Failed to obtain JDBC
  15. Julia学习笔记(一)——入门
  16. python最终目标_Python晋级之路-工欲善其事必先利其器
  17. 存储容量单位GB GiB MB MiB
  18. Paper reading (七十九):A subset of the core rumen microbiome dictates cow productivity and emissions
  19. Day32 Web自动化进阶
  20. Makefile文件:Makefile介绍

热门文章

  1. Windows7休眠状态下载技巧攻略
  2. 海驾学车过程全揭秘——第九篇:科目三集训及考试
  3. Java的多进程运行模式分析
  4. 让模块支持“导入”“导出”功能
  5. jquery数据折叠_通过位折叠缩小大数据
  6. 分布分析和分组分析_如何通过群组分析对用户进行分组并获得可行的见解
  7. leetcode257. 二叉树的所有路径(回溯算法)
  8. Elastic Stack 安装
  9. Pycharm社区版配置Django
  10. python-3.6.2安装