微信小程序获取当前位置和城市名


Posted in Javascript onNovember 13, 2019

   1, 获取当前地理位置,首先要拿到用户的授权wx.openSetting;

    2,微信的getLocation接口,获取当前用户的地理位置(微信返回的是经纬度,速度等参数);

    3,微信没有将经纬度直接转换为地理位置,借用腾讯位置服务中关于微信小程序的地理转换JS SDK 的API(返回信息中包括国家,省,市,区,经纬度等地理位置)
步骤描述清楚以后,下面就开始按步骤操作了;(本文仅仅讲述如何获取用户地理位置的授权)

图示为获取用户地理位置授权弹窗

微信小程序获取当前位置和城市名

在用户首次进入某页面(需要地理位置授权)时候,在页面进行onLoad,onShow时候,进行调用wx.getLocation要求用户进行授权;以后每次进入该页面时,通过wx.getSetting接口,返回用户授权具体信息。

wx.getSetting接口具体API地址链接为点击打开链接

微信小程序获取当前位置和城市名

 上图中scope.userLocation就是地理授权的标志;

当该标志是underfind,表示用户初次进入该页面,当该标志是false,表示用户初次进入该页面拒绝了地理授权,应进行重新要求获取授权。

wx.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
          } else {
           wx.showToast({
            title: '授权失败',
            icon: 'none',
            duration: 1000
           })
          }
         }
        })
       }
      }
     })
    } else if (res.authSetting['scope.userLocation'] == undefined) {
     //调用wx.getLocation的API
    }
    else {
     //调用wx.getLocation的API
    }
   }
  })

在拿到用户授权以后,使用微信的API获取当前位置的经纬度微信获取位置API

微信小程序获取当前位置和城市名

这里,我们进行使用的是腾讯位置服务;专为小程序开发者提供LBS数据服务工具包,可以在小程序中调用腾讯位置服务的POI检索、关键词输入提示、地址解析、逆地址解析、行政区划和距离计算等数据。 

    1,得到开发者秘钥

    2,下载微信小程序javaScriptSDK,

    3,安全域名设置,在“设置” -> “开发设置”中设置request合法域名,添加http://api.map.qq.com

在文件中引入对应的javaScriptSDK文件

var QQMapWX = require('../../../utils/qqmap-wx-jssdk.js');
var qqmapsdk;

在文件中进行js调用

微信小程序获取当前位置和城市名

 最后的结果就是可以获得自己所在城市的具体位置了

微信小程序获取当前位置和城市名

index.js部分的代码

//index.js
//获取应用实例
const app = getApp();
var QQMapWX = require('../../../utils/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 data: {
  province: '',
  city: '',
  latitude: '',
  longitude: ''
 },
 onLoad: function () {
  qqmapsdk = new QQMapWX({
   key: 'XXXX-XXXX-XXXX-XXXX' //这里自己的key秘钥进行填充
  });
 },
 onShow: function () {
  let vm = this;
  vm.getUserLocation();
 },
 getUserLocation: function () {
  let vm = this;
  wx.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
           vm.getLocation();
          } else {
           wx.showToast({
            title: '授权失败',
            icon: 'none',
            duration: 1000
           })
          }
         }
        })
       }
      }
     })
    } else if (res.authSetting['scope.userLocation'] == undefined) {
     //调用wx.getLocation的API
     vm.getLocation();
    }
    else {
     //调用wx.getLocation的API
     vm.getLocation();
    }
   }
  })
 },
 // 微信获得经纬度
 getLocation: function () {
  let vm = this;
  wx.getLocation({
   type: 'wgs84',
   success: function (res) {
    console.log(JSON.stringify(res))
    var latitude = res.latitude
    var longitude = res.longitude
    var speed = res.speed
    var accuracy = res.accuracy;
    vm.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));
    let province = res.result.ad_info.province
    let city = res.result.ad_info.city
    vm.setData({
     province: province,
     city: city,
     latitude: latitude,
     longitude: longitude
    })
   },
   fail: function (res) {
    console.log(res);
   },
   complete: function (res) {
    // console.log(res);
   }
  });
 }
})

页面展示部分的代码

<!--index.wxml-->
<view class="retailStore">
  <view class="cnaps borderBottom">
  <text>所在城市</text>
  <input class='m-bbt' placeholder-class='plhStyle' type='number' maxlength='50' placeholder='' bindinput="bindKeyInput" value='{{province}} {{city}}' disabled></input>
 </view>
</view>

总结

以上所述是小编给大家介绍的微信小程序获取当前位置和城市名,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
jquery HotKeys轻松搞定键盘事件代码
Aug 30 Javascript
随鼠标上下滚动的jquery代码
Dec 05 Javascript
javascript实现多级联动下拉菜单的方法
Feb 06 Javascript
easyui Droppable组件实现放置特效
Aug 19 Javascript
JQuery Mobile实现导航栏和页脚
Mar 09 Javascript
JS不用正则验证输入的字符串是否为空(包含空格)的实现代码
Jun 14 Javascript
Bootstrap源码解读按钮(5)
Dec 23 Javascript
基于jQuery实现选项卡效果
Jan 04 Javascript
JavaScript实现的冒泡排序法及统计相邻数交换次数示例
Apr 26 Javascript
浅谈Angular2 ng-content 指令在组件中嵌入内容
Aug 18 Javascript
react实现同页面三级跳转路由布局
Sep 26 Javascript
Vue中computed和watch有哪些区别
Dec 19 Vue.js
使用Promise封装小程序wx.request的实现方法
Nov 13 #Javascript
微信小程序wx.request的简单封装
Nov 13 #Javascript
vue使用prop可以渲染但是打印台报错的解决方式
Nov 13 #Javascript
highcharts.js数据绑定方式代码实例
Nov 13 #Javascript
vue prop属性传值与传引用示例
Nov 13 #Javascript
Vue 使用Props属性实现父子组件的动态传值详解
Nov 13 #Javascript
浅谈vue 锚点指令v-anchor的使用
Nov 13 #Javascript
You might like
PHP5在Apache下的两种模式的安装
2006/09/05 PHP
PHP最常用的ini函数分析 针对PHP.ini配置文件
2010/04/22 PHP
PHP中判断变量为空的几种方法小结
2013/11/12 PHP
php中sprintf与printf函数用法区别解析
2014/02/17 PHP
PHP静态成员变量
2017/02/14 PHP
php使用ftp实现文件上传与下载功能
2017/07/21 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
一个简单的js鼠标划过切换效果
2010/06/30 Javascript
js中关于String对象的replace使用详解
2011/05/24 Javascript
document.createElement()用法
2013/03/13 Javascript
JavaScript实现计算字符串中出现次数最多的字符和出现的次数
2015/03/12 Javascript
JavaScript使用ActiveXObject访问Access和SQL Server数据库
2015/04/02 Javascript
jQuery+AJAX实现无刷新下拉加载更多
2015/07/03 Javascript
javascript实现控制div颜色
2015/07/07 Javascript
jQuery Real Person验证码插件防止表单自动提交
2015/11/06 Javascript
Highcharts学习之数据列
2016/08/03 Javascript
AngularJs  Understanding Angular Templates
2016/09/02 Javascript
详解Vue方法与事件
2017/03/09 Javascript
NodeJS爬虫实例之糗事百科
2017/12/14 NodeJs
vue全局使用axios的方法实例详解
2018/11/22 Javascript
基于Express框架使用POST传递Form数据
2019/08/10 Javascript
基于vue、react实现倒计时效果
2019/08/26 Javascript
Layui数据表格跳转到指定页的实现方法
2019/09/05 Javascript
javascript Canvas动态粒子连线
2020/01/01 Javascript
解决angular 使用原生拖拽页面卡顿及表单控件输入延迟问题
2020/04/21 Javascript
React服务端渲染原理解析与实践
2021/03/04 Javascript
python实现可将字符转换成大写的tcp服务器实例
2015/04/29 Python
如何安装并使用conda指令管理python环境
2019/07/10 Python
python障碍式期权定价公式
2019/07/19 Python
执行Django数据迁移时报 1091错误及解决方法
2019/10/14 Python
判断单链表中是否存在环
2012/07/16 面试题
业务经理的岗位职责
2013/11/16 职场文书
技能竞赛活动方案
2014/02/21 职场文书
商务英语求职信范文
2015/03/19 职场文书
教你怎么用Python selenium操作浏览器对象的基础API
2021/06/23 Python
python3 字符串str和bytes相互转换
2022/03/23 Python