微信小程序——根據當前定位查詢附近商家

使用微信內置地圖查看位置

項目需求： 根據當前的定位位置，查看附近有哪些商家，並可查看商傢俱體位置。

步驟

• 首先： 獲取當前地理位置， 調用前需要 用戶授權

• 通過 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() {
    // 調用wx.getLocation系統API, 獲取並設置當前位置經緯度
    this.check_Authorization();
},

2. 獲取用戶當前設置

說明： 首先檢查用戶是否授權狀態， 只有授權纔可以查看附近商家列表。

/**
* 獲取用戶當前設置
*/
check_Authorization: function() {
    var that = this;
    wx.getSetting({
        success: (res) => {
            // console.log('res.authSetting', res.authSetting);
            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) {
            // console.log(res);
            that.setData({
                postion: true,
            })
            that.setData({
                lng: res.longitude,
                lat: res.latitude,
            })

            // 獲取附近商家列表
            that.getnearbyList(true);
        },
        fail: function(e) {
            // console.log(e);
			
            //首次彈窗提示授權，點擊取消後，顯示手動授權按鈕
            that.setData({
                hideAuthBtn: false
            })
        }
    });
},

4. 獲取附近商家列表

• 發送請求，獲取數據。個人所需，這裏直接copy項目裏代碼，包含分頁功能。

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) {
            //console.log('沒有數據');
            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,
        })
    }
},