1. 程式人生 > >小程式獲取當前城市位置

小程式獲取當前城市位置

 

第一步--申請開發者金鑰(key):申請金鑰[https://lbs.qq.com/console/key.html]

第二步--下載微信小程式JavaScriptSDK
       [下載地址http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.0.zip]

第三步---安全域名設定,在“設定” -> “開發設定”中設定request合法域名,新增     https://apis.map.qq.com

第四步---  WXML
<view>
<!--citys當前城市----titles當前城市完整資訊  -->
{{citys}}--{{titles}}
<!--button獲取經緯度  -->
<button bindtap='btn_sub'>9999</button>
</view>

第五步----JS
//index.js
//獲取應用例項
const app = getApp()
// 引入SDK核心類
const QQMapWX = require(
  '../../libs/qqmap-wx-jssdk.js'
)
Page({
  data: {
    citys: "預設北京市",
  },
  onLoad: function (options) {
    // onload中加入一個新函式
    this.qqmapsdk = new QQMapWX({
      key: '你申請的key'
    })
    wx.getLocation({
      success: res => {
        console.log(res);
        //呼叫介面 
        this.qqmapsdk.reverseGeocoder({
          location: {
            latitude: res.latitude,
            longitude: res.longitude
          },
          success: res => {
            console.log("獲取當前城市", res.result.address_component.city);
            console.log("獲取當前城市完整資訊", res.result.address);
            //呼叫網路資料
            this.setData({
              citys: res.result.address_component.city, //城市為獲取的城市
              titles: res.result.address //當前城市完整資訊
            })
          }
        })
      }
    })

  },
  //獲取經緯度
   btn_sub:function(){
     wx.getLocation({
       type: 'wgs84',
       success: function (res) {
         console.log(res);
         var latitude = res.latitude
         var longitude = res.longitude
         var speed = res.speed
         var accuracy = res.accuracy
       }
     })

   }



})