深入浅出qqmap-wx-jssdk

.

一、快速入门

1、申请腾讯地图JavaScript API key。在腾讯地图开发者网站注册并登录后，申请网站应用，并获取API key。

const qqmapsdk = new QQMapWX({
  key: 'your key'
})

2、使用SDK中的方法进行开发。例如，使用regeocoding方法获取指定坐标的详细信息。

qqmapsdk.reverseGeocoder({
  location: {
    latitude: 39.984060,
    longitude: 116.307520
  },
  success: function (res) {
    console.log(res);
  },
  fail: function (res) {
    console.log(res);
  }
})

3、在小程序开发中引入SDK。下载SDK，并将SDK中的文件（如util.js和qqmap-wx-jssdk.js）拷贝到小程序开发中的utils文件夹中。在需要使用SDK的页面中引入SDK。

import QQMapWX from '../../utils/qqmap-wx-jssdk.min.js'
const qqmapsdk = new QQMapWX({
  key: 'your key'
})

二、SDK方法详解

1、regeocoding。通过经纬度获取当前位置的详细信息，包括地址、邮政编码等。

qqmapsdk.reverseGeocoder({
  location: {
    latitude: 39.984060,
    longitude: 116.307520
  },
  success: function (res) {
    console.log(res);
  },
  fail: function (res) {
    console.log(res);
  }
})

2、geocoding。通过地址获取当前位置的经纬度。

qqmapsdk.geocoder({
  address: '北京市海淀区中关村大街27号',
  success: function (res) {
    console.log(res);
  },
  fail: function (res) {
    console.log(res);
  }
})

3、calculateDistance。计算两个坐标点之间的距离。

qqmapsdk.calculateDistance({
  from: {
    latitude: 39.984060,
    longitude: 116.307520
  },
  to: [{
    latitude: 39.984652,
    longitude: 116.309926
  }],
  success: function (res) {
    console.log(res);
  },
  fail: function (res) {
    console.log(res);
  }
})

4、search。关键词搜索。

qqmapsdk.search({
  keyword: '酒店',
  success: function (res) {
    console.log(res);
  },
  fail: function (res) {
    console.log(res);
  }
})

5、getCityList。获取支持的城市列表。

qqmapsdk.getCityList({
  success: function (res) {
    console.log(res);
  },
  fail: function (res) {
    console.log(res);
  }
})

三、SDK使用实例

1、在地图上显示当前位置。获取当前位置的坐标，并在地图上显示出来。

Page({
  data: {
    latitude: '',
    longitude: '',
    markers: [{
      iconPath: '/image/location.png',
      id: 0,
      latitude: '',
      longitude: '',
      width: 50,
      height: 50
    }]
  },
  onLoad: function (options) {
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        console.log(res);
        const latitude = res.latitude
        const longitude = res.longitude
        this.setData({
          latitude: latitude,
          longitude: longitude,
          markers: [{
            iconPath: '/image/location.png',
            id: 0,
            latitude: latitude,
            longitude: longitude,
            width: 50,
            height: 50
          }]
        })
      }
    })
  }
})

2、获取指定位置周边的POI信息。通过搜索指定位置附近的POI信息，并将结果展示出来。

Page({
  data: {
    pois: []
  },
  search: function (value) {
    qqmapsdk.search({
      keyword: value,
      location: '39.984060,116.307520',
      success: (res) => {
        console.log(res);
        this.setData({
          pois: res.data
        })
      }
    })
  }
})

3、获取当前城市天气信息。通过获取当前位置的经纬度，并调用SDK中的方法获取当前城市的天气信息，并将结果展示出来。

Page({
  data: {
    city: '',
    weather: ''
  },
  onLoad: function (options) {
    wx.getLocation({
      type: 'gcj02',
      success: (res) => {
        console.log(res);
        const latitude = res.latitude
        const longitude = res.longitude
        qqmapsdk.reverseGeocoder({
          location: {
            latitude: latitude,
            longitude: longitude
          },
          success: (res) => {
            console.log(res);
            const city = res.result.address_component.city
            this.setData({
              city: city
            })
            qqmapsdk.getWeather({
              city: city,
              success: (res) => {
                console.log(res);
                this.setData({
                  weather: res
                })
              }
            })
          }
        })
      }
    })
  }
})

四、小结

qqmap-wx-jssdk是一款腾讯地图JavaScript SDK，为小程序开发提供了地理位置相关的功能接口，包括地理编码、逆地理编码、POI信息搜索等。在实际的小程序开发中，我们可以通过集成qqmap-wx-jssdk来实现地图上显示当前位置、获取指定位置周边的POI信息等功能。