微信小程序開發--當前位置的詳細地址獲取&&&&城市列表獲取-具體到:省--市--區、縣級市---鄉鎮、街道

1. 申請開發者密鑰(key):申請密鑰

2. 下載微信小程序JavaScriptSDK,微信小程序JavaScriptSDK v1.0

3. 安全域名設置,在“設置” -> “開發設置”中設置request合法域名,添加https://apis.map.qq.com

4.在覈心類介紹中查看(http://lbs.qq.com/qqmap_wx_jssdk/qqmapwx.html)getCityList()、getDistrictByCityId(options:Object)方法

5.注意在pages頁面創建一個文件夾,文件夾內只有js文件,把wxml,wxss,json文件都刪了,把qqmap-wx-jssdk.js文件放入到相應文件夾中,導入文件的語句爲:

var QQMapWX = require('../libs/qqmap-wx-jssdk.js');

剛開始使用時,總是出錯,文件位置放不對,文件裏面的wxml,wxss,json文件沒有刪,文件路徑也不斷嘗試導入路徑前是寫 '../ '或'../../',還是不寫'../'和'../../',
而且在app.json中把剛纔創建用來存api,js文件的路徑刪了,當時運行時總是報錯,後來就把路徑刪了
總之測試了各種寫法,花了幾個小時,都崩潰了,好在最後摸索出來了,最後纔沒有報錯,所以想寫這篇文章,可以幫助大家,快速的設置,避免出現各種錯誤。

實例:代碼如下:

var QQMapWX = require('../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
  data: {
  },
  onLoad: function (options) {
    qqmapsdk = new QQMapWX({
      key:'your_key'//開發者的key
    });
  },
  onReady: function () {
    var that = this;
    var num;
    var num2;
    var num3;
    //獲取當前位置的詳細信息
    wx.getLocation({ 
      type: 'wgs84',
      success: function (res) {
       // console.log(res)
       // wx.getLocation 獲取當前的地理位置,latitude(維度)  longitude(經度)
        var latitude1 = res.latitude
        var longitude1 = res.longitude
        qqmapsdk.reverseGeocoder({////騰訊地圖api 逆解析方法,傳入參數爲經緯度
          location: {
            latitude: latitude1,
            longitude: longitude1
          },
          success: function (res) {//逆解析成功時回調函數,res包含地理位置信息
            //console.log(res); 
            console.log('res');   
          }
        });
      }
    });
    /*直轄市如:北京:市(一級)、區(二級)id都是六位,(街道)第三級id是九位*/
    /*省-如:陝西:省(一級)、市(二級)、縣級市、區(三級)id都是六位,(鄉鎮、街道)第四級id是九位*/
    /*由於直轄市、和省層級數目不同,不方便統一處理,可以藉助id是六位還是九位,進行判斷然後統一處理*/
    qqmapsdk.getCityList({//獲取城市列表
      success: function (ress) {
        
        console.log(ress)//城市列表全部信息
       
        num=ress.result[0][3].id//獲取34個省,直轄市的id對應的id,1級行政單位(此處只是獲取34中的一個)
        console.log('....1......')
        console.log(num)
        console.log(ress.result[0][0].name)
        console.log('....1-end......')
        qqmapsdk.getDistrictByCityId({
          id:num,//
          success: function (resss) {
            console.log(resss)//獲取省,直轄市下轄的市(省),區(直轄市所屬),2級行政單位
            console.log('....2......')
            console.log(resss.result[0][0].name)//1級行政單位(此處只是獲取其中中的一個)
            console.log('....2-end......')
            num2=resss.result[0][0].id
            qqmapsdk.getDistrictByCityId({
              id: num2,//
              success: function (ressss) {
                console.log(ressss)//縣級市、區(2級行政單位所屬),街道(直轄市的區所屬),3級行政單位
                num3 = ressss.result[0][0].id;
                console.log('....3......')
                console.log(ressss.result[0][0].fullname)//注:從三級行政單位開始,三、四級都沒有name屬性,只有fullname屬性
                console.log(ressss.result[0][0].id)
                console.log('....3-end......')
                qqmapsdk.getDistrictByCityId({
                  id: num3,//
                  success: function (resssss) {
                    if(resssss==null){
                      console.log('false')//類似於北京市,沒有四級行政,當前所在函數不執行
                    }else{//省份有四級行政單位,下面代碼可以執行
                    console.log('....4......')
                    console.log(resssss)
                    console.log('....4-end......')
                    }
                  }
                })
              },
            })

          },
          
        })
      }
    })    
  },
})

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章