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

这次的需求是获取用户当前的地理位置,做过微信小程序的都知道,原生 API 只给我们提供了wx.getLocation来获取用户当前经纬度,那么要获取地理位置的话,就需要把我们获取到的经纬拿去调用地图服务接口,这里就比较多了,如腾讯、百度、高德、谷歌等,这里我们来对比一下高德和腾讯这种的实现方式。 这里先看看高德怎么给我们说的




android高德地图获取中心点周围地址_vue 获取当前位置 高德


其他的就不说了,我们还是先去申请一个 key 吧


android高德地图获取中心点周围地址_vue 获取当前位置 高德_02


然后按照官网说的,下载相应的 js sdk 解压放置对应的目录中

我们继续来看看腾讯地图


android高德地图获取中心点周围地址_微信小程序_03


方式和高德其实也是类似,需要去申请 key


android高德地图获取中心点周围地址_vue 获取当前位置 高德_04


这里需要按照文档中的说明,勾选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(() => {});  }

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


android高德地图获取中心点周围地址_vue 获取当前位置 高德_05


然后在运行


android高德地图获取中心点周围地址_git_06


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


android高德地图获取中心点周围地址_git_07


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