騰訊位置服務(wù)使用方法詳解（一）
騰訊位置服務(wù)使用方法詳解（二）
4.個性化地圖樣式
為什么要用個性化地圖实蓬，提高不同場景下地圖的展現(xiàn)效果和用戶體驗允扇。
image
為什么選擇騰訊位置服務(wù)個性化地圖：
- 全平臺通用
- 開發(fā)成本極小
- 個性化樣式支持動態(tài)更新
- 支持全局配置和分級配置
- 編輯平臺UI控件全面優(yōu)化
- 每個元素可配置的屬性全部開放
- 能夠支持自定義的地圖元素擴(kuò)充為52種
5.騰訊位置入門步驟
1.登錄騰訊位置服務(wù)
image
2.驗證手機(jī) 與 郵箱
3.申請開發(fā)密鑰（Key）
4.選擇您需要的產(chǎn)品
位置展示組件
image
路線規(guī)劃組件
image
image
image
image
前端定位組件
image
三.微信小程序JavaScript SDK
1.我申請了開發(fā)者密鑰key
2.開通webserviceAPI服務(wù)：控制臺 -> key管理 -> 設(shè)置（使用該功能的key）-> 勾選webserviceAPI -> 保存
(小程序SDK需要用到webserviceAPI的部分服務(wù)，所以使用該功能的KEY需要具備相應(yīng)的權(quán)限)
日調(diào)用量：1萬次 / Key----并發(fā)數(shù)：5次 / key / 秒 蓬抄。
onLoad() {
console.log('頁面加載了')
// 實例化API核心類
qqmapsdk = new QQMapWX({
// key: '申請的key'
});
},
onShow() {
console.log('頁面顯示了')
// 調(diào)用接口dadaqianduan
qqmapsdk.search({
keyword: '酒店',
success: (res) => {
console.log(res);
},
fail: (err) => {
console.log(err);
},
complete: (cres) => {
console.log(cres);
}
})
},
我返回的數(shù)據(jù)如圖：
image
QQMapWX – 小程序JavaScriptSDK核心類 – new QQMapWX(options:Object)
image
// 引入SDK核心類
var QQMapWX = require('xxx/qqmap-wx.js');
// 實例化API核心類
var demo = new QQMapWX({
key: '開發(fā)密鑰（key）' // 必填
});
地點(diǎn)搜索：
// 地點(diǎn)搜索
nearbySearchBtn() {
qqmapsdk.search({
keyword: 'kfc', //搜索關(guān)鍵詞
location: '39.980014,116.313972', //設(shè)置周邊搜索中心點(diǎn)
success: (res) => {
var mks = []
for (var i = 0; i < res.data.length; i++) {
mks.push({ // 獲取返回結(jié)果，放到mks數(shù)組中
title: res.data[i].title,
id: res.data[i].id,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng,
iconPath: "/location.png", //圖標(biāo)路徑
width: 20,
height: 20
})
}
this.markers = mks
},
fail: (res) => {
console.log(res);
},
complete: (res) => {
console.log(res);
}
});
},
效果如圖：
image
<script>
// 引入SDK核心類碾局，js文件根據(jù)自己業(yè)務(wù)摆碉，位置可自行放置
// var QQMapWX = require('../../js_sdk/wxmp-qqmap/qqmap-wx-jssdk.js');
import QQMapWX from '../../js_sdk/wxmp-qqmap/qqmap-wx-jssdk.js';
var qqmapsdk;
export default {
components: {},
data() {
return {
backfill: '',
markers: [],
suggestion: [],
}
},
onLoad() {
console.log('頁面加載了') // 實例化API核心類
qqmapsdk = new QQMapWX({ // key: '申請的key'
key: '自己申請洒放，我的就不放出來了'
});
},
onShow() {
console.log('頁面顯示了') // 調(diào)用接口dadaqianduan
qqmapsdk.search({
keyword: '酒店',
success: (res) => {
console.log(res);
},
fail: (err) => {
console.log(err);
},
complete: (cres) => {
console.log(cres);
}
})
},
onReady() {
console.log('頁面初次渲染完成了')
},
methods: {
getsuggest(e) {
console.log(e.detail.value)
qqmapsdk.getSuggestion({
keyword: e.detail.value, //用戶輸入的關(guān)鍵詞，可設(shè)置固定值,如keyword:'KFC'
//region:'北京', //設(shè)置城市名齐媒，限制關(guān)鍵詞所示的地域范圍蒲每，非必填參數(shù)
success: (res) => {//搜索成功后的回調(diào)
console.log(res);
var sug = [];
for (var i = 0; i < res.data.length; i++) {
sug.push({ // 獲取返回結(jié)果，放到sug數(shù)組中
title: res.data[i].title,
id: res.data[i].id,
addr: res.data[i].address,
city: res.data[i].city,
district: res.data[i].district,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng
});
}
this.suggestion = sug
},
fail: (error)=> {
console.error(error);
},
complete: (res)=> {
console.log(res);
}
});
},
backfillBtn(e) {
var id = e.currentTarget.id;
for (var i = 0; i < this.suggestion.length; i++) {
if (i == id) {
this.backfill = this.suggestion[i].title
}
}
},
// 地點(diǎn)搜索
nearbySearchBtn() {
qqmapsdk.search({
keyword: 'kfc', //搜索關(guān)鍵詞
location: '39.980014,116.313972', //設(shè)置周邊搜索中心點(diǎn)
success: (res) => {
var mks = []
for (var i = 0; i < res.data.length; i++) {
mks.push({ // 獲取返回結(jié)果喻括，放到mks數(shù)組中
title: res.data[i].title,
id: res.data[i].id,
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng,
iconPath: "/static/location.png", //圖標(biāo)路徑
width: 20,
height: 20
})
}
this.markers = mks
},
fail: (res) => {
console.log(res);
},
complete: (res) => {
console.log(res);
}
});
},
},
onHide() {
console.log('頁面隱藏了')
},
}
</script>
預(yù)覽效果如圖下：
image
<script>
import QQMapWX from '../../js_sdk/wxmp-qqmap/qqmap-wx-jssdk.js';
var qqmapsdk;
export default {
components: {},
data() {
return {
backfill: '',
markers: [],
poi: {
latitude: 39.984060,
longitude: 16.307520
},
}
},
onLoad() {
console.log('頁面加載了') // 實例化API核心類
qqmapsdk = new QQMapWX({ // key: '申請的key'
key: ''
});
},
onShow() {
console.log('頁面顯示了')
},
onReady() {
console.log('頁面初次渲染完成了')
},
methods: {
formSubmit(e) {
qqmapsdk.reverseGeocoder({
location: e.detail.value.reverseGeo || '',
//獲取表單傳入的位置坐標(biāo),不填默認(rèn)當(dāng)前位置,示例為string格式
//get_poi: 1, //是否返回周邊POI列表：1.返回邀杏；0不返回(默認(rèn)),非必須參數(shù)
success: (res) => {
console.log(res);
var res = res.result;
var mks = [];
/**
* 當(dāng)get_poi為1時，檢索當(dāng)前位置或者location周邊poi數(shù)據(jù)并在地圖顯示唬血，可根據(jù)需求是否使用
*
for (var i = 0; i < result.pois.length; i++) {
mks.push({ // 獲取返回結(jié)果望蜡，放到mks數(shù)組中
title: result.pois[i].title,
id: result.pois[i].id,
latitude: result.pois[i].location.lat,
longitude: result.pois[i].location.lng,
iconPath: './resources/placeholder.png', //圖標(biāo)路徑
width: 20,
height: 20
})
}
*
**/
//當(dāng)get_poi為0時或者為不填默認(rèn)值時，檢索目標(biāo)位置拷恨，按需使用
mks.push({ // 獲取返回結(jié)果泣特，放到mks數(shù)組中
title: res.address,
id: 0,
latitude: res.location.lat,
longitude: res.location.lng,
iconPath: '/static/location.png', //圖標(biāo)路徑
width: 20,
height: 20,
callout: { //在markers上展示地址名稱，根據(jù)需求是否需要
content: res.address,
color: '#000',
display: 'ALWAYS'
}
});
this.markers = mks;
// this.poi = {
// latitude: res.location.lat,
// longitude: res.location.lng
// }
},
fail: (error) => {
console.error(error);
},
complete: (res) => {
console.log(res);
}
})
}
},
onHide() {
console.log('頁面隱藏了')
},
}
</script>
geocoder – 提供由地址描述到所述位置坐標(biāo)的轉(zhuǎn)換挑随，與逆地址解析reverseGeocoder()的過程正好相反状您。
預(yù)覽效果如圖：
image
formSubmit(e) {
//調(diào)用地址解析接口
qqmapsdk.geocoder({
//獲取表單傳入地址 e.detail.value.geocoder
address: e.detail.value, //地址參數(shù)勒叠，例：固定地址，address: '北京市海淀區(qū)彩和坊路海淀西大街74號'
success: (res)=> {//成功后的回調(diào)
console.log(res);
var res = res.result;
var latitude = res.location.lat;
var longitude = res.location.lng;
//根據(jù)地址解析在地圖上標(biāo)記解析地址位置
this.markers = [{
id: 0,
title: res.title,
latitude: latitude,
longitude: longitude,
iconPath: '/static/location.png',//圖標(biāo)路徑
width: 20,
height: 20,
callout: { //可根據(jù)需求是否展示經(jīng)緯度
content: latitude + ',' + longitude,
color: '#000',
display: 'ALWAYS'
}
}],
this.poi= { //根據(jù)自己data數(shù)據(jù)設(shè)置相應(yīng)的地圖中心坐標(biāo)變量名稱
latitude: Number(latitude),
longitude: Number(longitude),
}
},
fail: (error)=> {
console.error(error);
},
complete: (res)=> {
console.log(res);
}
})
}
預(yù)覽效果圖如下：
image
formSubmit(e){
//調(diào)用距離計算接口
console.log(this.start,'dadaqianduan')
qqmapsdk.calculateDistance({
//mode: 'driving',//可選值：'driving'（駕車）膏孟、'walking'（步行）眯分，不填默認(rèn)：'walking',可不填
//from參數(shù)不填默認(rèn)當(dāng)前地址
//獲取表單提交的經(jīng)緯度并設(shè)置from和to參數(shù)（示例為string格式）
// from: e.detail.value.start || '', //若起點(diǎn)有數(shù)據(jù)則采用起點(diǎn)坐標(biāo)，若為空默認(rèn)當(dāng)前地址
from: this.start || '',
to: this.end,
// to: e.detail.value.dest, //終點(diǎn)坐標(biāo)
success: (res)=> {//成功后的回調(diào)
console.log(res);
var res = res.result;
var dis = [];
for (var i = 0; i < res.elements.length; i++) {
dis.push(res.elements[i].distance); //將返回數(shù)據(jù)存入dis數(shù)組柒桑，
}
this.distance=dis
},
fail: (error)=> {
console.error(error);
},
complete: (res)=> {
console.log(res);
}
});
}
},
調(diào)用獲取城市列表接口弊决，效果圖如下：
image
onShow() {
console.log('頁面顯示了')
//調(diào)用獲取城市列表接口
qqmapsdk.getCityList({
success: (res) => { //成功后的回調(diào)
console.log(res);
console.log('省份數(shù)據(jù)：', res.result[0]); //打印省份數(shù)據(jù)
this.a = res.result[0]
console.log('城市數(shù)據(jù)：', res.result[1]); //打印城市數(shù)據(jù)
this.b = res.result[1]
console.log('區(qū)縣數(shù)據(jù)：', res.result[2]); //打印區(qū)縣數(shù)據(jù)
this.c = res.result[2]
},
fail: (error) => {
console.error(error);
},
complete: (res) => {
console.log(res);
}
});
},
獲取城市區(qū)縣，效果圖如下：
image
onShow() {
console.log('頁面顯示了')
//調(diào)用獲取城市列表接口
qqmapsdk.getCityList({
success: (res) => { //成功后的回調(diào)
console.log(res);
console.log('省份數(shù)據(jù)：', res.result[0])
var city = res.result[0];
//根據(jù)對應(yīng)接口getCityList返回數(shù)據(jù)的Id獲取區(qū)縣數(shù)據(jù)（以北京為例）
qqmapsdk.getDistrictByCityId({
// 傳入對應(yīng)省份ID獲得城市數(shù)據(jù)魁淳，傳入城市ID獲得區(qū)縣數(shù)據(jù),依次類推
id: city[0].id, //對應(yīng)接口getCityList返回數(shù)據(jù)的Id飘诗，如：北京是'110000'
success: (res) => { //成功后的回調(diào)
console.log(res);
console.log('對應(yīng)城市ID下的區(qū)縣數(shù)據(jù)(以北京為例)：', res.result[0]);
},
fail: (error) => {
console.error(error);
},
complete: (res) => {
console.log(res);
}
});
},
fail: (error) => {
console.error(error);
},
complete: (res) => {
console.log(res);
}
});
},
騰訊位置服務(wù)為微信小程序提供了基礎(chǔ)的標(biāo)點(diǎn)能力、線和圓的繪制接口等地圖組件和位置展示界逛、地圖選點(diǎn)等地圖API位置服務(wù)能力支持昆稿，使得開發(fā)者可以自由地實現(xiàn)自己的微信小程序產(chǎn)品。 在此基礎(chǔ)上息拜，騰訊位置服務(wù)微信小程序JavaScript SDK是專為小程序開發(fā)者提供的LBS數(shù)據(jù)服務(wù)工具包溉潭，可以在小程序中調(diào)用騰訊位置服務(wù)的POI檢索、關(guān)鍵詞輸入提示少欺、地址解析喳瓣、逆地址解析、行政區(qū)劃和距離計算等數(shù)據(jù)服務(wù)赞别，讓您的小程序更強(qiáng)大畏陕！
image
image
image
