一、快速入门
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信息等功能。