微信小程序怎么获取用户地理位置（中年大叔学编程-微信小程序使用坐标逆解析用户地理位置）
微信小程序怎么获取用户地理位置（中年大叔学编程-微信小程序使用坐标逆解析用户地理位置）const Config = { qqMapKey: 'VJYBZ-B2Q35-7XVIU-QFBM3-NDV77-FTFBO' AMapkey:'bdd6ce34b877d456eb16370a8b129964' } module.exports = Config; 在utils文件夹下新家一个util.js文件 这就开始撸代码现在就来一起编码啦 这里我的根目录有一个小小的配置文件 名叫config.json我们继续来看看腾讯地图 方式和高德其实也是类似，需要去申请 key 这里需要按照文档中的说明，勾选webserviceAPI，然后也是下载相应的 js sdk，
因为之前做过微信小程序，对小程序稍微有一些了解，最近一个朋友叫我帮他在他们原有小程序的基础之上新增一些功能，本着学习的态度，那就应下来吧。
这次的需求是获取用户当前的地理位置，做过微信小程序的都知道，原生 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(() => {});
}
在运行前要记得前往微信小程序后去把这两个地址加上
然后在运行
因为这是在电脑上运行的，所以离我的位置偏差比较大，我们用手机来看看
我只是记录我的学习过程，由于书读得少，可能很多地方表述或者是理解得不对，请轻喷并指正。
