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