小程序：位置信息(Location)及微信小程序LBS解決方案實踐

時間 2019-11-17

標籤程序位置信息 location 微信 lbs 解決方案實踐简体版

原文原文鏈接

目前在作的小程序須要使用到map組件以及小程序個性地圖，涉及到的功能以下：javascript

1# 獲取用戶當前位置，返回對應的省市區html

2# 根據目的地的具體地址，顯示在地圖中的位置java

3# 根據用戶當前位置，計算出與接口返回的目的地數組中每條地址的相距距離git

如下是具體實現過程：小程序

1：申請開通個性化地圖能力微信小程序

個性化地圖能力可在小程序後臺「設置-開發者工具-騰訊位置服務」申請開通api

對應的小程序後臺的截圖（已申請成功）:數組

2：申請開發者key及所需騰訊位置服務相關產品安全

微信小程序LBS解決方案地址：https://lbs.qq.com/product/miniapp/home/index.html微信

2.1 申請申請開發者key（https://lbs.qq.com/console/key.html)

如下填寫數據僅爲演示，開發時請按照相關規範填寫!

建立成功後,就會看到key：

點擊【進入：key設置】按鈕，就會進入選擇啓用產品頁面

這裏須要注意兩點：

1：確認本身須要啓用哪些API，可根據微信小程序JavaScript SDK https://lbs.qq.com/qqmap_wx_jssdk/index.html 自行查看

2：安全域名設置，在「設置」 -> 「開發設置」中設置request合法域名，添加https://apis.map.qq.com

3：需求功能實現

3.1 ：獲取用戶當前位置，返回對應的省市區

思路：經過wx.getLocation獲取用戶當前的經緯度，而後經過逆地址解析（座標位置描述），從而獲取所在位置的文字描述

逆地址解析（座標位置描述）Api : https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html

let QQMapWX = require('../../../vendors/qqmap-wx-jssdk.min.js');
let qqmapsdk;
Page({
    data: {
        receiver: '',
        area: ''
    },
    onLoad: function() {
        // 實例化API核心類
        qqmapsdk = new QQMapWX({
            key: 'B65BZ-V4GCD-****-****-ZGFR2-M4BGY'
        });
    },
    getLocation() {
        let self = this;
        wx.showLoading({
            title: '正在獲取，請稍後...',
            mask: true,
        });
        wx.getLocation({
            type: 'gcj02',
            success(res) {
                //逆地址解析
                self.getReverseGeo(res.latitude, res.longitude)
            },
            fail() {
                wx.showToast({
                    title: '獲取位置信息失敗，請稍後再試',
                    icon: 'none',
                    duration: 1500,
                    mask: true
                })
            }
        })
    },
    getReverseGeo(latitude, longitude) {
        let self = this;
        let addressComponent = '';
        //本接口提供由座標到座標所在位置的文字描述的轉換，輸入座標返回地理位置信息和附近poi列表。
        //api:https://lbs.qq.com/qqmap_wx_jssdk/method-reverseGeocoder.html
        qqmapsdk.reverseGeocoder({
            location: {
                latitude: latitude,
                longitude: longitude
            },
            get_poi: 1, //是否返回周邊POI列表：1.返回；0不返回(默認),非必須參數
            success: function(res) {
                let adInfoName = res.result.ad_info.name.split(',').join('');
                wx.showToast({
                    title: '獲取成功',
                    icon: 'success',
                    duration: 1000,
                    mask: true
                })
                self.setData({
                    area: adInfoName
                })
            },
            fail: function(error) {
                console.error(error);
                wx.showToast({
                    title: '獲取位置信息失敗，請稍後再試',
                    icon: 'none',
                    duration: 1500,
                    mask: true
                })
            },
            complete: function() {
                wx.hideLoading();
            }
        })
    }
})

　　3.2: 根據目的地的具體地址，顯示在地圖中的位置

思路：經過地址解析（地址轉座標），而後經過調用wx.openLocation 在微信內置地圖查看位置

地址解析（地址轉座標）Api : https://lbs.qq.com/qqmap_wx_jssdk/method-geocoder.html

      let address = '杭州西湖風景區';
        qqmapsdk.geocoder({
            address: address, //地址參數
            success: function(res) {
                let latitude = res.result.location.lat;
                let longitude = res.result.location.lng;
                //經過經緯度打開地圖頁面
                wx.openLocation({
                    latitude,
                    longitude,
                    scale: 18
                })
            },
            fail: function(error) {
                wx.showToast({
                    title: error.message,
                    icon: 'none',
                    duration: 1500,
                    mask: true
                })
            },
            complete: function(res) {
                console.log(res);
            }
        })

開發工具調試效果：

　　3.3: 根據用戶當前位置，計算出與接口返回的目的地數組中每條地址的相距距離

思路：調用wx.getLocation獲取用戶當前的經緯度，存起來；而後遍歷目的地數組，經過地址解析（地址轉座標）獲取對應的經緯度，而後經過距離計算api (calculateDistance(options:Object)) 計算出距離

距離計算Api : https://lbs.qq.com/qqmap_wx_jssdk/method-calculatedistance.html

let QQMapWX = require('../../vendors/qqmap-wx-jssdk.min.js');
let qqmapsdk;
Page({
    data: {
        areas: ['北京故宮博物院', '杭州西湖風景區', '蘇州拙政園', '南京明孝陵'],
        userLocation: '',
        distance: []
    },
    onLoad() {
        qqmapsdk = new QQMapWX({
            key: 'B65BZ-V4GCD-****-****-ZGFR2-M4BGY'
        });
        //獲取用戶當前位置
        this.getUserPos();
    },
    getUserPos() {
        let self = this;
        wx.getLocation({
            type: 'wgs84',
            success(res) {
                self.data.userLocation = res.latitude + "," + res.longitude
                self.traverDistance() //遍歷地址，算距離
            }
        })
    },
    traverDistance() {
        let self = this;
        let areas = self.data.areas;
        areas.forEach((item, index) => {
            qqmapsdk.geocoder({
                address: item, //地址參數
                success: function(res) {
                    let pos = res.result.location.lat + ',' + res.result.location.lng
                    self.calculateDistance(pos, index)
                },
                fail: function(error) {
                    console.error(error);
                    wx.showToast({
                        title: error.message,
                        icon: 'none',
                        duration: 1500,
                        mask: true
                    })
                },
                complete: function(res) {
                    console.log(res);
                }
            })
        });
    },
    calculateDistance(dest, index) {
        let self = this;
        qqmapsdk.calculateDistance({
            //mode: 'driving',//可選值：'driving'（駕車）、'walking'（步行），不填默認：'walking',可不填
            //from參數不填默認當前地址
            //獲取表單提交的經緯度並設置from和to參數（示例爲string格式）
            from: self.data.userLocation || '', //若起點有數據則採用起點座標，若爲空默認當前地址
            to: dest, //終點座標
            success: function(res) { //成功後的回調
                let res = res.result;
                for (let i = 0; i < res.elements.length; i++) {
                    self.data.distance[index] = res.elements[i].distance
                }
                self.setData({ //設置並更新distance數據
                    distance: self.data.distance
                });
            },
            fail: function(error) {
                console.error(error);
            },
            complete: function(res) {
                console.log(res);
            }
        });
    }
})

開發工具調試效果：