因为之前做过微信小程序,对小程序稍微有一些了解,最近一个朋友叫我帮他在他们原有小程序的基础之上新增一些功能,本着学习的态度,那就应下来吧。
这次的需求是获取用户当前的地理位置,做过微信小程序的都知道,原生 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(() => {}); }在运行前要记得前往微信小程序后去把这两个地址加上

然后在运行

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

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
















