深入淺出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信息等功能。