vue 获取当前位置 高德_中年大叔学编程-微信小程序使用坐标逆解析用户地理位置...

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

这次的需求是获取用户当前的地理位置，做过微信小程序的都知道，原生 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(() => {});  }

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

然后在运行

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

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