网络编程 Asp编程 Php编程 CodeIgniter .Net编程 Xml编程 VB编程 asp.net(c#) 支付接口 PayPal 支付宝 iOS开发 Android Xamarin.Android Android Studio ORM Dapper 其他 IbatisNet MVC WCF 微信开发 微信小程序 WPF Solr SignalR CMD xarmin.android Tesseract ASP.NET Core Vue VsCode JAVA Tomcat spring mvc MyBatis JDBCTemplate Dubbo swagger IDEA HSSFWorkbook Spring Cloud HBuilderX AI .net core AutoMapper SqlSugar IdentityServer4 Razor Blazor Redis Quartz NPOI HSSFWorkbook DevExpress 分布式存储技术 LINQ RabbitMQ 淘宝客 Dockerfile cron表达式 阿里云OSS服务 JWT SolrNet AngleSharp Elasticsearch perl Golang AutoJs adb appium python bat c Smobiler Power apps Power Bi 开发PCF RTSP视频推流服务器 OutSystems echarts 服务器 Web服务器 Ftp服务器 Mail服务器 Dns服务器 Win服务器 Linux服务器 安全防护 系统激活 wifi SVN服务器 虚拟机 Flash Media Server IIS服务器 ngrok服务器 分布式系统 版本控制系统 Git 监控系统 Nginx zookeeper SolrCloud node Nacos Docker PHP服务器 Web前端 Jquery js AJAX EasyUI CSS HTML 自适应/响应式 HTML5 地图API MP3 编辑器 UEditor 插件 highcharts SVG Bootstrap layer Element React Ant Design Nextjs yarn 软件开发 winform BAT编程 项目管理 数据模型工具 PowerDesigner PDMan UML流程图 物联网 开发工具 Flash工具 VS2010 VS2012 VS2017 VS2019 wget 抓包工具 Eclipse IntelliJ Idea VS2022 cmder 网络攻击 CC攻击 数据库 Access Mssql Mysql SQLite php_sqlsrv Oracle MongoDB NOSql Redis 设计在线 酷站推荐 网页设计 WEB标准 视频处理 设计活动 网站运营 建站经验 策划盈利 SEO优化 网站推广 淘宝秘籍 短信通道 新闻资讯 业界动态 收购融资 门户动态 搜索引擎 网络游戏 电子商务 广告传媒 厂商开发 手机应用 各业合同 法律法规 名词解释 钓鱼技巧 百科知识 理财 生肖星座 操作系统 windows xp sp3 windows server 2008 win10 windows server 2016 windows11 Linux 图形图像 Photoshop教程 illustrator教程 CAD设计教程 开放平台 腾讯 新浪 手机应用 小米手机 魅族手机 装修 壁纸施工 防水技术 室内平面设计 蹲便器 卫生间 CAD室内三维图形 装修知识 学生学习资料库 小学生学习资料库 初中生学习资料库 高中生学习资料库 搜索引擎 百度 360 搜狗 神马 头条 集群搭建 Hadoop集群 k8s集群 平台架构 SaaS 测试工具 JMeter 大数据 站长在线 好站推荐 联盟资讯 联盟新闻 联盟介绍 联盟点评 网赚技巧
隐藏

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

发布:2018/10/28 21:52:52作者:管理员 来源:本站 浏览次数:1607

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

   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>