前言

本教程是基于 “apifm-wxapi” 模块，教你快速实现小程序开发，所以你可能需要先了解以下知识点：

《创建 HelloWorld 项目》
《使用 “apifm-wxapi” 快速开发小程序》

功能说明

  1. 知道坐标，可以查询该坐标的地址
  2. 给定两个坐标，可以计算两点之间的距离(公里 / km)

特别说明

本案例中，使用到了微信小程序的2个官方接口：

  1. wx.getLocation()
  2. wx.chooseLocation()

为了保护用户隐私，微信有规定，必须要告诉用户使用定位的业务用途，以便帮助用户决策是否要允许小程序读取 TA 的定位信息:

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html#permission

所以，根据微信小程序官方的说明，本案例在 app.json 文件中加入了使用场景说明：

  1. "permission": {
  2.     "scope.userLocation": {
  3.       "desc": "微信规定必须要说明定位用途"
  4.     }
  5.   }

wxml代码

  1. <button type="primary" bindtap="queryAddress"> 读取当前地址坐标并查询地址 </button>
  2. <button type="warn" bindtap="selAddress"> 选地址计算距离 </button>

js代码

  1. const WXAPI = require('apifm-wxapi')
  3. Page({
  5.   data: {
  6.     latitude: undefined,
  7.     longitude: undefined
  8.   },
  9.   onLoad: function (options) {
  11.   },
  12.   onShow: function () {
  14.   },
  15.   queryAddress(){ // 读取当前定位坐标
  16.     const _this = this
  17.     wx.getLocation({
  18.       type: 'wgs84',
  19.       success(res) {
  20.         console.log(res)
  21.         _this.setData(res)
  22.         _this.mapQQAddress(res)
  23.       }
  24.     })
  25.   },
  26.   mapQQAddress(e){ // 坐标查地址
  27.     const location = e.latitude + ',' + e.longitude
  28.     WXAPI.mapQQAddress(location, 1).then(res => {
  29.       console.log('地址查看：', res)
  30.       if (res.code == 0) {
  31.         wx.showModal({
  32.           title: '成功',
  33.           content: res.data.result.address,
  34.           showCancel: false
  35.         })
  36.       }
  37.     })
  38.   },
  39.   selAddress(){ // 选择一个地址，读取坐标后计算距离
  40.     const _this = this
  41.     if (!this.data.latitude || !this.data.longitude) {
  42.       wx.showToast({
  43.         title: '请先读取当前地址',
  44.         icon: 'none'
  45.       })
  46.       return
  47.     }
  48.     wx.chooseLocation({
  49.       success: (e) => {
  50.         console.log(e)
  51.         WXAPI.mapDistance(_this.data.latitude, _this.data.longitude, e.latitude, e.longitude).then(res => {
  52.           console.log(res)
  53.           if (res.code == 0) {
  54.             wx.showModal({
  55.               title: '成功',
  56.               content: '距离:' + res.data + '公里',
  57.               showCancel: false
  58.             })
  59.           }
  60.         })
  61.       }
  62.     })
  63.   }
  64. })

总结

本案例主要使用了 apifm-wxapi 的以下方法：

  1. WXAPI.mapDistance(lat1, lng1, lat2, lng2)
  2. WXAPI.mapQQAddress(location, coord_type)

coord_type 参数： 1 GPS坐标 2 sogou经纬度 3 baidu经纬度 4 mapbar经纬度 5 [默认]腾讯、google、高德坐标 6 sogou墨卡托

关于 apifm-wxapi 更多的使用方法：

《apifm-wxapi使用说明》

本案例Demo代码下载：

《apifm-wxapi使用Demo程序》

期待你的进步！
感谢！