微信小程序——根据当前定位查询附近商家

使用微信内置地图查看位置

项目需求： 根据当前的定位位置，查看附近有哪些商家，并可查看商家具体位置。

文章目录

使用微信内置地图查看位置
步骤
效果图
具体实现
- wxml
- js
- - 1. 初始数据及调用
  - 2. 获取用户当前设置
  - 3. 获取当前位置
  - 4. 获取附近商家列表
  - 5. 点击商家查看详情
  - 6. 使用`微信内置地图`查看商家具体位置
- 手动授权（用户拒绝后）
- 后端返回数据格式效果图
注意：
原码下载

步骤

首先：获取当前地理位置，调用前需要用户授权
通过 wx.openLocation(Object object) API内置地图查看位置
关于获取当前位置具体流程配置

效果图

说明：
1. 如图展示点击拒绝后，显示授权获取位置按钮，用户触发按钮时，拉起设置位置信息页面。
2. 点击允许授权，显示商家列表，点击某商家可查看具体位置

具体实现

说明： 这里分步骤说明，直接copy可使用。【注意：发送请求换成自己方法】

wxml

<view class="nearbyBizListWrap" style='margin-top: {{navH}}px'><block wx:if="{{postion}}"><view wx:if="{{!is_empty}}"><view class="media_list_Box"><view wx:for="{{nearbyListData}}" wx:key="" bindtap='distributionBIZTap' data-bizId='{{item.business_id}}'><view class='media_item'></view></view><view class="nullDataTips" wx:if="{{!hasMoreData}}"><text>没有更多数据了</text></view><view class="nullDataTips" wx:if="{{hiddenLoading}}"><text>正在加载中...</text></view></view></view><view class="nullBox clearfix" wx:else><view class="box"><view class="des">暂无附近场所</view></view></view></block><!-- 显示授权按钮 --><block wx:else><view class="authorizationBox"><button hidden="{{hideAuthBtn}}" open-type="openSetting" bindopensetting='handler' class="weui-btn btn-area" type="primary">点击授权并获取位置信息 </button></view></block>
</view>

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;//商家当前idvar 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"

原码下载

原码下载：请查看

微信小程序——根据当前定位查询附近商家相关推荐

微信小程序页面搜索框查询（无后台接口情况下）
微信小程序页面搜索框查询(无后台接口情况下) 效果图: wxml <view class="container"><view class="goodsl ...
微信小程序实现简单定位功能
微信小程序实现简单定位功能,简单易读,获取经纬度信息在pages下创建一个单页如local local.js如下 var app = getApp() Page({ data:{latitude:' ...
微信小程序云开发成绩查询小程序的制作过程。
微信小程序云开发成绩查询小程序的制作过程. 如果觉得我讲的好可以点个关注. 明确自己的目的,到底要做一个怎么样的小程序. 我先上效果图: 确定后就可以开始自己布局.主要是用css 1.先看首页,首页主 ...
uniapp 微信小程序，开启定位权限，permission ： scope.userLocation
uniapp 微信小程序,开启定位权限,scope.userLocation 问题在网上看了好多帖子,一言两语,想骂人, 解决注意uniapp项目在manifest.json 文件下配置,不要迷路 ...
微信小程序云数据库where查询语句字段名和字段值都可以是变量
微信小程序云数据库where查询语句字段名和字段值都可以是变量想要实现的功能遇到的问题 js代码想要实现的功能界面代码 // An highlighted block <view cla ...
浅谈微信小程序的功能定位和使用场景
作者主页:Designer 小郑作者简介:浙江某公司软件工程师,负责开发管理公司OA.CRM业务系统,全栈领域优质创作者,CSDN学院.蓝桥云课认证讲师,开发过20余个前后端分离实战项目,主要发展方 ...
微信小程序中实现定位以及逆地址解析
文章目录前言一.原理二.腾讯地图key 二.编码 1. App.json 2. JavaScript 3. 返回值总结前言在微信小程序开发中,我们可以提前获取用户的地理位置,为用户提供更好 ...
微信小程序开发-IP地址查询-例子
微信小程序开发小程序搜索框 IP地址查询搜索查询样例微信小程序开发参考 https://mp.weixin.qq.com/debug/wxadoc/dev/component/ ...
onenetsim定位功能吗_微信小程序新增后台定位功能，你会卸载地图APP用微信导航吗...
[PConline]8月8日,根据微信官方发布的消息显示,小程序新增后台定位功能,并对自动化测试功能进行了升级.据介绍,为了满足线路导航.路线记录等服务场景下,小程序需要长时间持续定位来提供服务.当用 ...
微信小程序实现地图定位
前言地图定位这个功能大家都很熟悉吧,那大家知道微信小程序中要怎么实现地图定位呢,其实非常简单,看完本篇文章,你也可以轻松实现这个小功能. 1.首先呢你要有一个方法去触发这个点击事件,下面已经写好啦, ...

微信小程序——根据当前定位查询附近商家

使用微信内置地图查看位置

文章目录

步骤

效果图

具体实现

wxml

js

1. 初始数据及调用

2. 获取用户当前设置

3. 获取当前位置

4. 获取附近商家列表

5. 点击商家查看详情

6. 使用`微信内置地图`查看商家具体位置

手动授权（用户拒绝后）

后端返回数据格式效果图

注意：

原码下载

微信小程序——根据当前定位查询附近商家相关推荐

最新文章

热门文章

微信小程序——根据当前定位查询附近商家

使用微信内置地图查看位置

文章目录

步骤

效果图

具体实现

wxml

js

1. 初始数据及调用

2. 获取用户当前设置

3. 获取当前位置

4. 获取附近商家列表

5. 点击商家查看详情

6. 使用微信内置地图查看商家具体位置

手动授权（用户拒绝后）

后端返回数据格式效果图

注意：

原码下载

微信小程序——根据当前定位查询附近商家相关推荐

最新文章

热门文章

6. 使用`微信内置地图`查看商家具体位置