微信小程序——根据当前定位查询附近商家
使用微信内置地图查看位置
项目需求： 根据当前的定位位置，查看附近有哪些商家，并可查看商家具体位置。
文章目录
使用微信内置地图查看位置步骤效果图具体实现wxmljs1. 初始数据及调用2. 获取用户当前设置3. 获取当前位置4. 获取附近商家列表5. 点击商家查看详情6. 使用`微信内置地图`查看商家具体位置
手动授权（用户拒绝后）后端返回数据格式效果图
注意：原码下载
步骤
首先： 获取当前地理位置， 调用前需要 用户授权
通过 wx.openLocation(Object object) API内置地图查看位置
关于获取当前位置具体流程配置
效果图
说明： 1. 如图展示 点击拒绝后，显示授权获取位置按钮， 用户触发按钮时，拉起设置位置信息页面。 2. 点击允许授权，显示商家列表，点击某商家可查看具体位置
具体实现
说明： 这里分步骤说明，直接copy可使用。【注意：发送请求换成自己方法】
wxml
js
1. 初始数据及调用
data: {
p: 1,
page_size: 8,
is_empty: false,
hasMoreData: true,
hiddenLoading: true,
lng: 0.00, //经度
lat: 0.00, //纬度
hideAuthBtn: true，//控制是否显示 手动授权按钮
postion: true, //是否授权, 已授权展示商家列表
}
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
// 检查当前用户设置权限状态
this.check_Authorization();
},
2. 获取用户当前设置
说明： 首先检查用户是否授权状态， 只有授权成功会执行获取当前地理位置信息。方可以查看附近商家列表。
/**
* 获取用户当前设置
*/
check_Authorization: function() {
var that = this;
wx.getSetting({
success: (res) => {
if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] == true) {
that.setData({
postion: true,
})
//获取当前位置
that.getLocation();
} else {
//未授权
that.setData({
postion: false
})
//获取当前位置
that.getLocation();
}
},
fail(res) {
console.log(res)
}
})
},
3. 获取当前位置
/**
* 调用wx.getLocation系统API,获取当前地理位置
*/
getLocation: function() {
var that = this;
//获取位置
wx.getLocation({
type: 'gcj02', //默认为 wgs84 返回 gps 坐标，gcj02 返回可用于wx.openLocation的坐标
success: function(res) {
that.setData({
postion: true,
})
// 保存经纬度
that.setData({
lng: res.longitude,
lat: res.latitude,
})
// 获取附近商家列表
that.getnearbyList(true);
},
fail: function(e) {
//首次弹窗提示授权，点击取消后，显示手动授权按钮
that.setData({
hideAuthBtn: false
})
}
});
},
4. 获取附近商家列表
发送请求，获取数据。个人所需，这里直接copy项目里代码，包含分页功能。注意： 下面的url地址仅供参考，需修改为实际所用的如需测试数据，请看后台返回数据格式效果图
getnearbyList: function(type = true) {
var that = this;
var params = 'p=' + that.data.p + '&page_size=' + that.data.page_size + '&lng=' + that.data.lng + '&lat=' + that.data.lat;
// 发送请求
http.getReq("Nearby/nearbyList?" + params, function(res) {
if (res.code != 200) {
feedbackApi.showToast({
title: res.msg,
mask: false
})
return
}
var datas = res.data.list;
var dataList = that.data.nearbyListData.concat(datas);
that.setData({
nearbyListData: dataList,
hiddenLoading: true,
p: that.data.p + 1
})
if ((datas.length != that.data.page_size) && (datas.length > 0)) {
//全部加载完成，显示没有更多数据
that.setData({
hasMoreData: false,
hiddenLoading: false
});
}
// 处理显示加载中
if (datas.length == 0) {
that.setData({
hiddenLoading: false,
hasMoreData: false,
});
}
if (dataList.length == 0) {
that.setData({
is_empty: true,
});
}
}, type)
},
5. 点击商家查看详情
根据列表中数据，获取当前点击商家并得到对应信息
/**
* 查看具体商家信息
*/
distributionBIZTap: function(e) {
var that = this;
//商家当前id
var bizid = e.currentTarget.dataset.bizid;
this.data.nearbyListData.forEach((item, i) => {
if (item.business_id == bizid) {
// 调用打开目标位置（打开地图）
that.openLocation(item);
}
})
},
6. 使用微信内置地图查看商家具体位置
注意： 经、纬度只接收Number类型， 因得到是String类型，这里需要转换下。
/**
* 使用微信内置地图查看商家位置
*/
openLocation: function(item) {
// console.log(item);
var that = this;
wx.getLocation({ //获取当前经纬度
type: 'gcj02', //返回可以用于wx.openLocation的经纬度，官方提示bug: iOS 6.3.30 type 参数不生效，只会返回 wgs84 类型的坐标信息
success: function(res) {
wx.openLocation({ //使用微信内置地图查看位置。
latitude: Number(item.lat), //目标纬度
longitude: Number(item.lng), //目标经度
name: item.shop_name, //店铺名
address: item.address //详细地址
})
}
})
},
手动授权（用户拒绝后）
用户取消了授权， 短时间内不会再弹窗的， 为会更好体验，再次进入页面时显示按钮，让用户触发。
通过button按钮，并设置open-type="openSetting"，调起设置允许使得我的地理位置
/**
* 手动授权
*/
handler: function(e) {
var that = this;
if (!e.detail.authSetting['scope.userLocation']) {
that.setData({
postion: false
})
} else {
that.setData({
postion: true,
})
}
},
后端返回数据格式效果图
上面第4点获取附近商家列表，接口返回的数据格式，仅供参考
注意：
这时，如果直接运行代码会提示需声明permission字段。那就按照提示操作吧~~~
需配置permission弹窗提示
在app.json中声明permission字段， 如下
"permission": {
"scope.userLocation": {
"desc": "需要获取您的地理位置，请确认授权，否则地图定位功能将无法使用"
}
},
"sitemapLocation": "sitemap.json"
原码下载
原码下载： 请查看