小程序腾讯地图（一）

项目需求

• 定位当前位置
• 手动选择当前定位 （逆地址解析）
• 地图用的腾讯地图

腾讯地图

腾旭地图官网

• 创建Key 值
  

小程序地图sdk文档

// 引入SDK核心类，js文件根据自己业务，位置可自行放置
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
var qqmapsdk;
Page({
 
    onLoad: function () {
        // 实例化API核心类
        qqmapsdk = new QQMapWX({
            key: '申请的key'
        });
    },
    onShow: function () {
        // 调用接口
        qqmapsdk.search({
            keyword: '酒店',
            success: function (res) {
                console.log(res);
            },
            fail: function (res) {
                console.log(res);
            },
        complete: function (res) {
            console.log(res);
        }
     });
  }
})

定位当前位置

• 通过小程序获取当前位置的 经纬度

小程序可以使用 wx.getLocation 方法获取用户的当前位置经纬度。wx.getLocation 默认获取的是 wgs84 坐标系，即 GPS 的坐标系，而国内地图（除百度地图外）一般用的都是 GCJ02（国测局坐标，又称为“火星坐标系”）的坐标系，所以需要传入 type 来指定坐标系统。

// 获取当前位置的经纬度
wx.getLocation({
 type: 'gcj02',
 success (res) {
   const latitude = res.latitude
   const longitude = res.longitude
   const speed = res.speed
   const accuracy = res.accuracy
   // 存储在 data中
      this.setData({
          latitude,
          longitude
        })
      }
 }
})
/*加定时器原因  当onshow钩子执行完了 this.setData 中的数据还没存进去
导致在调用 sdk 时 参数是undefined
*/
// 调用 地图的sdk
 onShow(){
	setTimeout(() => {
      qqmapsdk.reverseGeocoder({
        location: {
          latitude: this.data.latitude,
          longitude: this.data.longitude
        },
        success: function (res) {
          console.log(res);
          // wx.hideLoading()
        },
        fail: function (res) {
          console.log(res);
        },
        complete: function (res) {
          console.log(res);
        }
      });
    }, 5000)
}

手动选择当前定位

<view class="location" bindtap="chooseLocation">
  <icon type="dingwei" />
  <text>{{ address }}</text>
</view>

// 获取选择的位置的经纬度
 chooseLocation() {
    wx.chooseLocation({
      success: (res) => {
        let {latitude, longitude} = res
        let {lat, lon} = this.data
        console.log(res);
      
      },
       fail(res){
          console.log(res);
       }
      
    })
  },

// 调用当前的 小程序的SDK  将经纬度转化为当前位置的地址
getlocation(){
	  setTimeout(() => {
      qqmapsdk.reverseGeocoder({
        location: {
          latitude: this.data.latitude,
          longitude: this.data.longitude
        },
        success: function (res) {
          console.log(res);
          // wx.hideLoading()
        },
        fail: function (res) {
          console.log(res);
        },
        complete: function (res) {
          console.log(res);
        }
      });
    }, 5000)
}