小程式定位

陌々發表於2019-04-16

做小程式有四個月的時間，對小程式的認知還是比較淺的，小程式已上線，正好有空餘時間總結一下。=.=

門店定位

門店定位用到了百度地圖，先說一下怎麼實現定位的，貼程式碼

var bmap = require('../libs/bmap-wx.min.js');
// 獲取定位資訊
getLocation() {
  let that = this;
  let BMap = new bmap.BMapWX({
    ak: that.$parent.globalData.appInfo.ak
  });
  //定位失敗或是拒絕定位授權
  let fail = function (data) {
    let _info = {
      title: '提示',
      content: "未定位到門店，請選擇門店",
      confirmText: '選擇門店',
      showCancel: false,
      success(res) {
        if (res.confirm) {
          wx.reLaunch({
            url: './location'
          })
        }
      }
    };
    wx.showModal(_info);
    //that.matchNearmall();
  };
  let success = function (data) {
    //返回資料內，已經包含經緯度 
    //使用wxMarkerData獲取資料
    let wxMarkerData = data.wxMarkerData;
    //把所有資料放在初始化data內 
    that.$parent.globalData.locationInfo = {
      latitude: wxMarkerData[0].latitude,
      longitude: wxMarkerData[0].longitude,
      address: wxMarkerData[0].address,
      cityInfo: data.originalData.result.addressComponent
    };
    if (data) {
      // 獲取到經緯度傳給後臺匹配最近門店並返回當前門店的資訊
      that.gthomeInfo(that.$parent.globalData.locationInfo);
    }
  }
  //發起regeocoding檢索請求   
  BMap.regeocoding({
    fail: fail,
    success: success
  });
}
複製程式碼

目前定位門店並獲取門店資訊的流程是
百度地圖api 下載連結

  1. 在百度api虎鯨資料手動新增對應門店資訊位置
  2. 引入百度地圖api
  3. 在檔案中引入var bmap = require('./libs/bmap-wx.min.js')
  4. 匹配附近門店
程式碼實現 
var bmap = require('./libs/bmap-wx.min.js')
getLocation () {
    // 
    let Bmap = new bmap.BMapWX({
      ak: this.globalData.appInfo.ak
    })
    Bmap.regeocoding({
      fail: res => {
        console.log(res)
      },
      success: res => {
        console.log(res)
        let wxMarkerData = res.wxMarkerData
        wx.setStorageSync('location', {
          longitude: wxMarkerData[0].longitude,
          latitude: wxMarkerData[0].latitude,
          address: wxMarkerData[0].address,
          addressComponent: res.originalData.result.addressComponent
        })
        this.nearLocationInfo()
      }
    })
  }
  // 匹配附近
  nearLocationInfo() {
    wx.request({
      url: 'http://api.map.baidu.com/geosearch/v3/nearby?ak=nqcYH1wuDwhloiynnROqx2jDAXdkBPln',
      data: {
        geotable_id: this.globalData.appInfo.geotable_id,
        location: wx.getStorageSync('location').longitude + ',' + wx.getStorageSync('location').latitude,
        radius: 1000000,
        sortby: 'distance:1',
        page_index: 0,
        page_size: 10
      },
      success: data => {
        console.log(data)
        // 呼叫成功之後獲取第一個資料就是附近的定位
        // 因為sortby給定順序
      }
    })
  }
  onLaunch() {
    this.getLocation()
  }
複製程式碼

不知道大家怎麼實現的，有比較好的意見，歡迎大家提議。

小程式定位
小程式我使用了wepy元件 使用過程中 也會遇到很多坑。有時跳轉有問題 在最終還是使用小程式原生元件。 問題說的比較籠統，下面我總結一下自己用到的功能展現。我也是初識小程式，在專案中也是不斷挖坑填坑，技術還不到家 有問題的話，希望大家指出~_~

微信小程式swiper輪播圖卡死來回瘋狂輪播

相關文章