微信小程序地图演示Demo / 坐标查地址 / 计算两个地址的距离

前言

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

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

功能说明

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

特别说明

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

wx.getLocation()
wx.chooseLocation()

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

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

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

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

wxml代码

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

js代码

const WXAPI = require('apifm-wxapi')

Page({

  data: {
    latitude: undefined,
    longitude: undefined
  },
  onLoad: function (options) {
    
  },
  onShow: function () {

  },
  queryAddress(){ // 读取当前定位坐标
    const _this = this
    wx.getLocation({
      type: 'wgs84',
      success(res) {
        console.log(res)
        _this.setData(res)
        _this.mapQQAddress(res)
      }
    })
  },
  mapQQAddress(e){ // 坐标查地址
    const location = e.latitude + ',' + e.longitude
    WXAPI.mapQQAddress(location, 1).then(res => {
      console.log('地址查看：', res)
      if (res.code == 0) {
        wx.showModal({
          title: '成功',
          content: res.data.result.address,
          showCancel: false
        })
      }
    })
  },
  selAddress(){ // 选择一个地址，读取坐标后计算距离
    const _this = this
    if (!this.data.latitude || !this.data.longitude) {
      wx.showToast({
        title: '请先读取当前地址',
        icon: 'none'
      })
      return
    }
    wx.chooseLocation({
      success: (e) => {
        console.log(e)
        WXAPI.mapDistance(_this.data.latitude, _this.data.longitude, e.latitude, e.longitude).then(res => {
          console.log(res)
          if (res.code == 0) {
            wx.showModal({
              title: '成功',
              content: '距离:' + res.data + '公里',
              showCancel: false
            })
          }
        })
      }
    })
  }
})

总结

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

WXAPI.mapDistance(lat1, lng1, lat2, lng2)
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程序》

期待你的进步！
感谢！