开发场景

获取以后地位信息或者某地的行政区划信息或者街道信息,实现相似电商平台填写收货地址性能。

技术选型

微信小程序JavaScript SDK

微信小程序插件

确定业务逻辑及页面设计

以简洁大气为主,款式抉择weui。

具体开发过程

1、首先注册小程序,我以前有就没从新申请。

2、注册腾讯位置服务开发者

须要留神的是:集体开发者接口调用数是有限额的,收费额度1W,并发数5,申请成为企业用户可收费晋升更大配额。

3、依据文档开发。

文档写的比拟全,很多中央都是例子,不过须要留神以下几个点:

1)reverseGeocoder接口返回数据和文档不统一,须要依据理论返回值编写,另外有些字段在返回值中不肯定有,最好用hasOwnProperty进行判断后赋值。

2)实际上文档有点乱,须要查看多个中央的文档。

文档参考地址:

https://developers.weixin.qq....

https://lbs.qq.com/miniProgra...

JS代码

//index.js//获取利用实例const app = getApp()const chooseLocation = requirePlugin('chooseLocation');var QQMapWX = require('../../utils/qqmap-wx-jssdk.min.js');var qqmapsdk = new QQMapWX({  key: '申请的Key'}); Page({  data: {    recommend:'无地址信息',    address:'无地址信息',    name:'无区划信息',    adcode:'无代码信息',    business_area_title:'无商圈信息',    crossroad_title:'无路口信息',    town:'无街道信息',    jingweidu:'无经纬度信息',    landmark:'无左近地标',  },  onShareAppMessage: function (res) {    if (res.from === 'button') {      // 来自页面内转发按钮      console.log(res.target)    }    return {      title: '行政区划、街道信息查问',      path: '/page/index/index'    }  },  onShareTimeline: function(){    return {      title: '行政区划、街道信息查问',    }  },  onLoad: function () {     // 实例化API外围类      wx.getSetting({        success: (res) => {          // res.authSetting['scope.userLocation'] == undefined    示意 初始化进入该页面          // res.authSetting['scope.userLocation'] == false    示意 非初始化进入该页面,且未受权          // res.authSetting['scope.userLocation'] == true    示意 地理位置受权          if (res.authSetting['scope.userLocation'] != undefined && res.authSetting['scope.userLocation'] != true) {            wx.showModal({              title: '申请受权以后地位',              content: '须要获取您的地理位置,请确认受权',              success: function (res) {                if (res.cancel) {                  wx.showToast({                    title: '回绝受权',                    icon: 'none',                    duration: 1000                  })                } else if (res.confirm) {                  wx.openSetting({                    success: function (dataAu) {                      if (dataAu.authSetting["scope.userLocation"] == true) {                        wx.showToast({                          title: '受权胜利',                          icon: 'success',                          duration: 1000                        })                        //再次受权,调用wx.getLocation的API                        this.getLocation();                      } else {                        wx.showToast({                          title: '受权失败',                          icon: 'none',                          duration: 1000                        })                      }                    }                  })                }              }            })          } else if (res.authSetting['scope.userLocation'] == undefined) {            //调用wx.getLocation的API            this.getLocation();          }          else {            //调用wx.getLocation的API            this.getLocation();          }        }      })  },  getLocation: function(){    var vm = this;    wx.getLocation({      type:'gcj02',      success: function(res){          app.globalData.latitude=res.latitude;          app.globalData.longitude=res.longitude;          vm.getaddressinfo();      },      fail:function(res){        console.log("获取经纬度失败"+JSON.stringify(res))      }    })  },  onShow: function(){    var vm = this;    const location = chooseLocation.getLocation();    if(location!=null){      app.globalData.latitude=location.latitude;      app.globalData.longitude=location.longitude;      this.getaddressinfo();    }  },  getaddressinfo: function(){    let vm = this;    qqmapsdk.reverseGeocoder({      location: {        latitude:  app.globalData.latitude,        longitude: app.globalData.longitude      },      get_poi: 1, //是否返回周边POI列表:1.返回;0不返回(默认),非必须参数      success: function(res) {//胜利后的回调        var result = res.result;        //举荐地址        app.globalData.recommend = result.formatted_addresses.recommend;        // 行政区划 name            app.globalData.name = result.ad_info.name;        //惯例地址 address         app.globalData.address = result.address;        //行政区划代码 adcode         app.globalData.adcode = result.ad_info.adcode;         if(result.address_reference.hasOwnProperty("business_area")){          //商圈 business_area_title          app.globalData.business_area_title = result.address_reference.business_area.title+" "+result.address_reference.business_area._dir_desc;        }         if(result.address_reference.hasOwnProperty("crossroad")){        //路口 crossroad_title          app.globalData.crossroad_title = result.address_reference.crossroad.title+" "+result.address_reference.crossroad._dir_desc;        }        //街道        if(result.address_reference.hasOwnProperty("town")){          //路口 crossroad_title            app.globalData.town = result.address_reference.town.title+" "+result.address_reference.town._dir_desc;          }        if(result.address_reference.hasOwnProperty("landmark_l2")){            app.globalData.landmark = result.address_reference.landmark_l2.title;        }        if(result.address_reference.hasOwnProperty("landmark_l1")){            app.globalData.landmark = result.address_reference.landmark_l1.title;        }        vm.setData({          recommend: result.formatted_addresses.recommend,          name: result.ad_info.name,          address: result.address,          adcode: result.ad_info.adcode,          business_area_title: app.globalData.business_area_title,          crossroad_title: app.globalData.crossroad_title,          town: app.globalData.town,          jingweidu: result.location.lat+", "+result.location.lng,          landmark: app.globalData.landmark,        });        },      fail: function(error) {        console.error(error);      },      complete: function(res) {       // console.log(res);      }    })  },  onUnload () {    // 页面卸载时设置插件选点数据为null,避免再次进入页面,geLocation返回的是上次选点后果    chooseLocation.setLocation(null);},  getUserInfo: function(e) {    console.log(e)    app.globalData.userInfo = e.detail.userInfo    this.setData({      userInfo: e.detail.userInfo,      hasUserInfo: true    })  },  change: function(){    const key = '应用在腾讯位置服务申请的key';     const referer = '这是哪'; //调用插件的app的名称    const location = JSON.stringify({      latitude: app.globalData.latitude,      longitude: app.globalData.longitude    });    const category = '生存服务,娱乐休闲';    wx.navigateTo({      url: 'plugin://chooseLocation/index?key=' + key + '&referer=' + referer + '&location=' + location + '&category=' + category    });  },})

成果

作者:w_boyang

链接:https://blog.csdn.net/qq_3413...

起源:CSDN

著作权归作者所有。商业转载请分割作者取得受权,非商业转载请注明出处。