微信小程序調(diào)用騰訊地圖API文檔JavaScript?SDK和WebService?API詳細(xì)解讀
更新時(shí)間：2024年09月28日 11:58:20 作者：克里斯蒂亞諾更新
本文介紹了如何使用騰訊位置服務(wù),包括申請(qǐng)開(kāi)發(fā)者密鑰、獲取小程序APPID、下載地圖SDK、設(shè)置服務(wù)器域名白名單等步驟,詳細(xì)說(shuō)明了如何在微信小程序中集成騰訊位置服務(wù),進(jìn)行地圖展示和周邊搜索等功能的實(shí)現(xiàn),同時(shí)提醒注意API的調(diào)用次數(shù)和權(quán)限限制,需要的朋友可以參考下
搜索：騰訊位置服務(wù)
找到API文檔：
入門中第一步：申請(qǐng)開(kāi)發(fā)者密鑰key
前往控制臺(tái)：
創(chuàng)建應(yīng)用并獲取key:
設(shè)置key的時(shí)候，還需要小程序的APPID。所以要前往微信公眾平臺(tái)中獲取小程序的APPID：
限制要求：
添加配額：
看清哪一個(gè)key并且設(shè)置配額。如果有多個(gè)key，也可以根據(jù)特別的某些key進(jìn)行分配額度：
下載地圖的SDK：
并放入項(xiàng)目中：
添加服務(wù)器域名白名單：
登錄微信公眾平臺(tái)：
設(shè)置白名單：
搜索地址：
實(shí)際開(kāi)發(fā)者工具中截圖：
坐標(biāo)地圖：
wxml：
最終展示： 點(diǎn)擊搜索周邊KFC就出現(xiàn)紅色的預(yù)設(shè)值坐標(biāo)的地址。
具體代碼：
map.js
// 引入SDK核心類
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
Page({
data: {
markers: []
},
onLoad: function () {
// 實(shí)例化API核心類
this.qqmapsdk = new QQMapWX({
key: '************************ // 替換為你的QQ地圖SDK密鑰
});
},
// 事件觸發(fā)，調(diào)用接口
nearby_search: function () {
var _this = this;
// 調(diào)用接口
this.qqmapsdk.search({
keyword: 'kfc', // 搜索關(guān)鍵詞
location: '39.980014,116.313972', // 設(shè)置周邊搜索中心點(diǎn)
success: function (res) { // 搜索成功后的回調(diào)
var mks = [];
for (var i = 0; i < res.data.length; i++) {
mks.push({ // 獲取返回結(jié)果，放到mks數(shù)組中
title: res.data[i].title,
id: parseInt(res.data[i].id), // 將 id 轉(zhuǎn)換為整數(shù)形式
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng,
iconPath: "/assets/icon/position.png", // 圖標(biāo)路徑
width: 20,
height: 20
});
}
_this.setData({ // 設(shè)置markers屬性，將搜索結(jié)果顯示在地圖中
markers: mks
});
},
fail: function (res) {
console.log('搜索失敗', res);
},
complete: function (res) {
console.log('搜索完成', res);
}
});
}
});
wxml:
<!--綁定點(diǎn)擊事件-->
<button bindtap="nearby_search">搜索周邊KFC</button>
<!--地圖容器-->
<map id="myMap"
markers="{{markers}}"
style="width:100%;height:300px;"
longitude="116.313972"
latitude="39.980014" scale='16'>
</map>注意：
1 調(diào)用API有次數(shù)和額度限制。
2 調(diào)用的接口要開(kāi)通相應(yīng)的接口權(quán)限。
示例2： “關(guān)鍵詞輸入提示”
接口調(diào)用說(shuō)明：
前往開(kāi)通配額：
代碼：
wxml:
實(shí)際wxml:
**.js 注意js代碼不要全部拷貝，而是將methods的部分放在Page()中：
實(shí)際**.js:
最后展示：
調(diào)用WebService API
舉例：定位服務(wù) --IP定位
wxml:
<view class="container">
<view class="map-container">
<map id="map" latitude="{{latitude}}" longitude="{{longitude}}" markers="{{markers}}" style="width: 100%; height: 400px;"></map>
</view>
<view class="info-container">
<view class="info-item">
<text class="info-label">國(guó)家：</text>
<text class="info-value">{{nation}}</text>
</view>
<view class="info-item">
<text class="info-label">省份：</text>
<text class="info-value">{{province}}</text>
</view>
<view class="info-item">
<text class="info-label">城市：</text>
<text class="info-value">{{city}}</text>
</view>
</view>
</view>
js:
Page({
data: {
latitude: 0, // 地圖中心點(diǎn)緯度
longitude: 0, // 地圖中心點(diǎn)經(jīng)度
markers: [], // 地圖標(biāo)記點(diǎn)
nation: '', // 國(guó)家
province: '', // 省份
city: '', // 城市
},
onLoad: function () {
// 發(fā)起獲取當(dāng)前IP定位信息的請(qǐng)求
this.getLocationByIP();
},
getLocationByIP: function () {
// 替換成你自己申請(qǐng)的騰訊地圖API密鑰
const key = '************************';
const apiUrl = `https://apis.map.qq.com/ws/location/v1/ip?key=${key}`;
wx.request({
url: apiUrl,
method: 'GET',
success: (res) => {
console.log('IP定位結(jié)果：', res.data);
if (res.data.status === 0) {
const { location, ad_info } = res.data.result;
const { lat, lng } = location;
const { nation, province, city } = ad_info;
// 更新頁(yè)面數(shù)據(jù)，顯示定位信息
this.setData({
latitude: lat,
longitude: lng,
markers: [{
id: 1,
latitude: lat,
longitude: lng,
title: city,
iconPath: '/images/location.png', // 可自定義標(biāo)記圖標(biāo)
width: 30,
height: 30
}],
nation: nation,
province: province,
city: city
});
} else {
wx.showToast({
title: '定位失敗，請(qǐng)稍后重試',
icon: 'none',
duration: 2000
});
}
},
fail: (error) => {
console.error('請(qǐng)求失?。?, error);
wx.showToast({
title: '網(wǎng)絡(luò)請(qǐng)求失敗，請(qǐng)檢查網(wǎng)絡(luò)后重試',
icon: 'none',
duration: 2000
});
}
});
}
});
wxss:
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 20px;
}
.map-container {
width: 100%;
margin-bottom: 20px;
}
.info-container {
width: 100%;
background-color: #f0f0f0;
padding: 10px;
border-radius: 8px;
}
.info-item {
display: flex;
flex-direction: row;
margin-bottom: 5px;
}
.info-label {
font-weight: bold;
}
.info-value {
margin-left: 5px;
}
最終展示：
總結(jié)
到此這篇關(guān)于微信小程序調(diào)用騰訊地圖API文檔JavaScript SDK和WebService API的文章就介紹到這了,更多相關(guān)微信小程序調(diào)用騰訊地圖API文檔內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
這篇文章主要給大家介紹了關(guān)于uni-app中px與rpx的轉(zhuǎn)換方法,rpx單位最初由微信推出,它與我們常用px一個(gè)很大的區(qū)別就是具有響應(yīng)式,需要的朋友可以參考下2023-10-10
微信小程序?qū)崿F(xiàn)音樂(lè)播放頁(yè)面布局
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)京東商品分類側(cè)邊欄，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-12-12
這篇文章主要為大家詳細(xì)介紹了JavaScript仿小米輪播圖效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-10-10
JavaScript程序員應(yīng)該知道的45個(gè)實(shí)用技巧
在這篇文章中，我將分享一組JavaScript的技巧、竅門和最佳實(shí)踐，這些都是JavaScript程序員應(yīng)該知曉的，不管他們是使用在瀏覽器/引擎上，還是服務(wù)器端（SSJS——Service Side JavaScript）JavaScript解釋器上2014-03-03
這篇文章主要介紹了微信禁止下拉查看URL的處理方法,需要的朋友可以參考下2017-09-09
js利用clipboardData實(shí)現(xiàn)截屏粘貼功能
這篇文章主要為大家詳細(xì)介紹了js利用clipboardData實(shí)現(xiàn)截屏粘貼功能,具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
匹配html標(biāo)記的正則...2006-07-07
javascript正則表達(dá)式定義（語(yǔ)法）總結(jié)
這篇文章主要介紹了javascript正則表達(dá)式定義,對(duì)于JavaScript正則表達(dá)式的語(yǔ)法進(jìn)行了總結(jié)分析,需要的朋友可以參考下2016-01-01
JS模式之簡(jiǎn)單的訂閱者和發(fā)布者模式完整實(shí)例
這篇文章主要介紹了JS模式之簡(jiǎn)單的訂閱者和發(fā)布者模式,以一個(gè)完整實(shí)例形式詳細(xì)分析了JS訂閱者和發(fā)布者模式基本實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-06-06
js處理json格式的插入、修改、刪除，以及字符串的比較等常用操作，下面有五個(gè)示例，感興趣的朋友可以學(xué)習(xí)下2013-09-09