小程序获取当前城市位置

版权声明：菜鸟老五 https://blog.csdn.net/qq_35695041/article/details/83187148

 

第一步--申请开发者密钥（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
       }
     })

   }



})