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


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 相关文章推荐
JS面向对象编程 for Cookie
Sep 19 Javascript
JavaScript(js)设置默认输入焦点(focus)
Dec 28 Javascript
js中如何把字符串转化为对象、数组示例代码
Jul 17 Javascript
js操作输入框提示信息且响应鼠标事件
Mar 25 Javascript
兼容IE、firefox以及chrome的js获取时间(getFullYear)
Jul 04 Javascript
javascript实现rgb颜色转换成16进制格式
Jul 10 Javascript
使用 Javascript 实现浏览器推送提醒功能的示例
Nov 03 Javascript
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
React项目动态设置title标题的方法示例
Sep 26 Javascript
javascript json对象小技巧之键名作为变量用法分析
Nov 11 Javascript
Vue实现移动端拖拽交换位置
Jul 29 Javascript
如何使用three.js 制作一个三维的推箱子游戏
Jul 29 Javascript
使用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
ExtJS与PHP、MySQL实现存储的方法
2010/04/02 PHP
yii实现使用CUploadedFile上传文件的方法
2015/12/28 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
PHP 实现页面静态化的几种方法
2017/07/23 PHP
PHP实现QQ、微信和支付宝三合一收款码实例代码
2018/02/19 PHP
Laravel 中使用简单的方法跟踪用户是否在线(推荐)
2019/10/30 PHP
取得父标签
2006/11/14 Javascript
javascript 常用方法总结
2009/06/03 Javascript
js调用webservice中的方法实现思路及代码
2013/02/25 Javascript
javascript轻松实现当鼠标移开时已弹出子菜单自动消失
2013/12/29 Javascript
jQuery插件实现多级联动菜单效果
2015/12/01 Javascript
Express的路由详解
2015/12/10 Javascript
js实现对ajax请求面向对象的封装
2016/01/08 Javascript
如何在Linux上安装Node.js
2016/04/01 Javascript
多种jQuery绑定事件的实现方式
2016/06/13 Javascript
浅谈对Angular中的生命周期钩子的理解
2017/07/31 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
jquery.onoff实现简单的开关按钮功能(推荐)
2018/05/24 jQuery
js实现全选和全不选
2020/07/28 Javascript
在Python的Django框架中用流响应生成CSV文件的教程
2015/05/02 Python
讲解Python中if语句的嵌套用法
2015/05/14 Python
python结合opencv实现人脸检测与跟踪
2015/06/08 Python
Python常见异常分类与处理方法
2017/06/04 Python
python图像常规操作
2017/11/11 Python
Python查找两个有序列表中位数的方法【基于归并算法】
2018/04/20 Python
Python闭包执行时值的传递方式实例分析
2018/06/04 Python
python 遍历目录(包括子目录)下所有文件的实例
2018/07/11 Python
django-allauth入门学习和使用详解
2019/07/03 Python
深入浅析python3中的unicode和bytes问题
2019/07/03 Python
Python Selenium参数配置方法解析
2020/01/19 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
5个HTML5的常用本地存储方式详解与介绍
2021/03/27 HTML / CSS
工程建设实施方案
2014/03/14 职场文书
2014年旅游局法制宣传日活动总结
2014/11/01 职场文书
2014年保卫工作总结
2014/12/05 职场文书
创业计划书之校园超市
2019/09/12 职场文书