因为之前做过微信小程序，对小程序稍微有一些了解，最近一个朋友叫我帮他在他们原有小程序的基础之上新增一些功能，本着学习的态度，那就应下来吧。

这次的需求是获取用户当前的地理位置，做过微信小程序的都知道，原生 API 只给我们提供了wx.getLocation来获取用户当前经纬度，那么要获取地理位置的话，就需要把我们获取到的经纬拿去调用地图服务接口，这里就比较多了，如腾讯、百度、高德、谷歌等，这里我们来对比一下高德和腾讯这种的实现方式。 这里先看看高德怎么给我们说的 其他的就不说了，我们还是先去申请一个 key 吧 然后按照官网说的，下载相应的 js sdk 解压放置对应的目录中

我们继续来看看腾讯地图 方式和高德其实也是类似，需要去申请 key 这里需要按照文档中的说明，勾选webserviceAPI，然后也是下载相应的 js sdk，

现在就来一起编码啦,这里我的根目录有一个小小的配置文件,名叫config.json

const Config = {
qqMapKey: 'VJYBZ-B2Q35-7XVIU-QFBM3-NDV77-FTFBO',
AMapkey:'bdd6ce34b877d456eb16370a8b129964'
}
module.exports = Config;

在utils文件夹下新家一个util.js文件,这就开始撸代码

const Config = require('../config.js');
const QQMapWX = require("./qqmap-wx-jssdk.min.js");
const AMap=require("./amap-wx.js");

const getAddressByCoord = (lng, lat) => {
    let qqmapsdk = new QQMapWX({
        key: Config.qqMapKey // 必填
    });
    return new Promise((resolve, reject) => {
        qqmapsdk.reverseGeocoder({
            location: {
                latitude: lat,
                longitude: lng
            },
            success: (addressRes) => {
                if (addressRes.status !== 0) {
                    reject(addressRes);
                    return;
                }
                resolve(addressRes);
            },
            fail: (err) => {
                reject(err);
                console.error(err);
            }
        })
    })
}

const getAmapAddress=() => {
    console.log(Config.AMapkey);
    let amapsdk = new AMap.AMapWX({key: Config.AMapkey});
    return new Promise((resolve, reject) => {
        amapsdk.getRegeo({
            success: (addressRes) => {
                resolve(addressRes);
            },
            fail: (err) => {
                reject(err);
                console.error(err);
            }
        })
    })
}

module.exports = {
    getCoordinate,
    getAmapAddress
}

这里我把amap-wx.js和qqmap-wx-jssdk.min.js文件都放在utils文件夹中，接下来新建一个页面来调用两个地图

onLoad: function (options) {
    let that = this;
    /**腾讯接口需要先获取经纬度 */
    wx.getLocation({
      type: 'wgs84',
      success: res => {
        utils.getAddressByCoord(res.longitude, res.latitude).then(addressRes => {
          let address = addressRes.result.address_component;
          console.log(address);
          that.setData({
            qqAddress: address.street_number
          });
        }).catch(err => {
          wx.showToast({
            title: '经纬度转换地址失败',
            icon: 'none',
          })
        })
      },
      fail: res => {
        wx.showModal({
          title: '提示',
          content: '授权获取地理位置失败',
        })
      }
    });

    /**高德地图直接获取 */
    utils.getAmapAddress().then(addrData => {
      console.log(addrData)
      that.setData({
        amapAddress: addrData[0].name
      });
    }).catch(() => {});
  }

在运行前要记得前往微信小程序后去把这两个地址加上

然后在运行 因为这是在电脑上运行的，所以离我的位置偏差比较大，我们用手机来看看

我只是记录我的学习过程，由于书读得少，可能很多地方表述或者是理解得不对，请轻喷并指正。