小程序地图学习之获取位置 获取经纬度 获取地名 获取地址

咱们在作小程序开发时，不免会遇到地图相关的开发，而小程序已经为咱们提供的比较完善的地图组件。咱们只须要调用相关的api就能够实现大体的功能。如：获取经纬度，获取位置，获取地址，获取地名。结下来就具体给你们讲解。

老规矩先看效果图

接下来咱们就来看看具体实现步骤

一，定义一个按钮来调用位置获取的api

<!--index.wxml-->
<button bindtap='getLocation'>获取位置信息</button>
<text>{{jingwei}}</text>
<text>{{address}}</text>
<text>{{name}}</text>
复制代码

二，调用获取地理位置的方法

//index.js

Page({
 getLocation() {
  let that = this;
  wx.chooseLocation({
   success: function(res) {
    console.log(res)
    var latitude = res.latitude
    var longitude = res.longitude;
    that.setData({
     jingwei: "经纬度：" + longitude + ", " + latitude,
     address: " 地址：" + res.address,
     name: " 地名：" + res.name
    })
   }
  });
 }
})
复制代码

其实到这里咱们就能够实现获取经纬度，获取位置信息的功能了。 可是呢？？如今小程序调用用户位置信息时，须要用户受权，以下图，若是用户点击了拒绝，咱们就没有办法调用地图获取位置信息了。

因此呢，咱们要想实现一个完整的获取用户位置信息的功能，就要在监测到用户拒绝的位置权限时，引导用户去从新受权。这样才是一个友好的健壮的程序。下面就来教你们如何引导用户去打开受权。

三，在app.json里注册位置权限

上图红色框里就是咱们的位置权限的注册代码,app.json的完整代码以下。

{
 "pages": [
  "pages/index/index",
  "pages/setting/setting"
 ],
 "window": {
  "backgroundTextStyle": "light",
  "navigationBarBackgroundColor": "#fff",
  "navigationBarTitleText": "WeChat",
  "navigationBarTextStyle": "black"
 },
 "permission": {
  "scope.userLocation": {
   "desc": "你的位置信息将用于小程序位置接口的效果展现"
  }
 },
 "sitemapLocation": "sitemap.json"
}
复制代码

四，定义检查位置权限是否打开的方法

//校验位置权限是否打开
 checkLocation() {
  let that = this;
  //选择位置，须要用户受权
  wx.getSetting({
   success(res) {
    if (!res.authSetting['scope.userLocation']) {
     wx.authorize({
      scope: 'scope.userLocation',
      success() {
       wx.showToast({ //这里提示失败缘由
        title: '受权成功！',
        duration: 1500
       })
      },
      fail() {
       that.showSettingToast('须要受权位置信息');
      }
     })
    }
   }
  })
 },
复制代码

这个方法就是来检查用户的位置权限是否受权，若是没有受权，就弹窗提示用户去受权页受权。弹窗代码以下：

// 打开权限设置页提示框
 showSettingToast: function(e) {
  wx.showModal({
   title: '提示！',
   confirmText: '去设置',
   showCancel: false,
   content: e,
   success: function(res) {
    if (res.confirm) {
     wx.navigateTo({
      url: '../setting/setting',
     })
    }
   }
  })
 },
复制代码

至此就能够实现一个完整的获取用户位置信息的小程序了，index.js完整代码以下

//index.js

Page({
 getLocation() {
  this.checkLocation();
  let that = this;
  wx.chooseLocation({
   success: function(res) {
    console.log(res)
    var latitude = res.latitude
    var longitude = res.longitude;
    that.setData({
     jingwei: "经纬度：" + longitude + ", " + latitude,
     address: " 地址：" + res.address,
     name: " 地名：" + res.name
    })
   }
  });
 },
 //校验位置权限是否打开
 checkLocation() {
  let that = this;
  //选择位置，须要用户受权
  wx.getSetting({
   success(res) {
    if (!res.authSetting['scope.userLocation']) {
     wx.authorize({
      scope: 'scope.userLocation',
      success() {
       wx.showToast({ //这里提示失败缘由
        title: '受权成功！',
        duration: 1500
       })
      },
      fail() {
       that.showSettingToast('须要受权位置信息');
      }
     })
    }
   }
  })
 },
 // 打开权限设置页提示框
 showSettingToast: function(e) {
  wx.showModal({
   title: '提示！',
   confirmText: '去设置',
   showCancel: false,
   content: e,
   success: function(res) {
    if (res.confirm) {
     wx.navigateTo({
      url: '../setting/setting',
     })
    }
   }
  })
 },
})
复制代码

从代码中能够看到，咱们在用户拒绝受权时的提示框，点击会跳转到setting页，setting也是咱们本身的页面，可是这个页面特别简单。就定义一个button。

<!--pages/setting/setting.wxml-->
  <button class="button" 
open-type="openSetting" type='primary'>
打开受权设置页
</button>
复制代码

为何要这么作呢，由于微信不容许咱们直接打开权限设置页，必须经过button组件提供的开发能力去到设置页，这里的开放能力就是open-type="openSetting" 中的openSetting。咱们点击按钮后就到了权限设置页。

这样就能够引导用户再次受权了。

有任何关于编程的问题均可以加我微信2501902696（备注编程开发）

编程小石头，码农一枚，非著名全栈开发人员。分享本身的一些经验，学习心得，但愿后来人少走弯路，少填坑。

完整的源码能够加老师微信获取，也能够关注下面老师公号，回复“地图源码” 获取。