微信小程序調用騰訊地圖API文檔JavaScript?SDK和WebService?API詳細解讀
更新時間：2024年09月28日 11:58:20 作者：克里斯蒂亞諾更新
本文介紹了如何使用騰訊位置服務,包括申請開發(fā)者密鑰、獲取小程序APPID、下載地圖SDK、設置服務器域名白名單等步驟,詳細說明了如何在微信小程序中集成騰訊位置服務,進行地圖展示和周邊搜索等功能的實現,同時提醒注意API的調用次數和權限限制,需要的朋友可以參考下
搜索：騰訊位置服務
找到API文檔：
入門中第一步：申請開發(fā)者密鑰key
前往控制臺：
創(chuàng)建應用并獲取key:
設置key的時候，還需要小程序的APPID。所以要前往微信公眾平臺中獲取小程序的APPID：
限制要求：
添加配額：
看清哪一個key并且設置配額。如果有多個key，也可以根據特別的某些key進行分配額度：
下載地圖的SDK：
并放入項目中：
添加服務器域名白名單：
登錄微信公眾平臺：
設置白名單：
搜索地址：
實際開發(fā)者工具中截圖：
坐標地圖：
wxml：
最終展示： 點擊搜索周邊KFC就出現紅色的預設值坐標的地址。
具體代碼：
map.js
// 引入SDK核心類
var QQMapWX = require('../../libs/qqmap-wx-jssdk.js');
Page({
data: {
markers: []
},
onLoad: function () {
// 實例化API核心類
this.qqmapsdk = new QQMapWX({
key: '************************ // 替換為你的QQ地圖SDK密鑰
});
},
// 事件觸發(fā)，調用接口
nearby_search: function () {
var _this = this;
// 調用接口
this.qqmapsdk.search({
keyword: 'kfc', // 搜索關鍵詞
location: '39.980014,116.313972', // 設置周邊搜索中心點
success: function (res) { // 搜索成功后的回調
var mks = [];
for (var i = 0; i < res.data.length; i++) {
mks.push({ // 獲取返回結果，放到mks數組中
title: res.data[i].title,
id: parseInt(res.data[i].id), // 將 id 轉換為整數形式
latitude: res.data[i].location.lat,
longitude: res.data[i].location.lng,
iconPath: "/assets/icon/position.png", // 圖標路徑
width: 20,
height: 20
});
}
_this.setData({ // 設置markers屬性，將搜索結果顯示在地圖中
markers: mks
});
},
fail: function (res) {
console.log('搜索失敗', res);
},
complete: function (res) {
console.log('搜索完成', res);
}
});
}
});
wxml:
<!--綁定點擊事件-->
<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 調用API有次數和額度限制。
2 調用的接口要開通相應的接口權限。
示例2： “關鍵詞輸入提示”
接口調用說明：
前往開通配額：
代碼：
wxml:
實際wxml:
**.js 注意js代碼不要全部拷貝，而是將methods的部分放在Page()中：
實際**.js:
最后展示：
調用WebService API
舉例：定位服務 --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">國家：</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, // 地圖中心點緯度
longitude: 0, // 地圖中心點經度
markers: [], // 地圖標記點
nation: '', // 國家
province: '', // 省份
city: '', // 城市
},
onLoad: function () {
// 發(fā)起獲取當前IP定位信息的請求
this.getLocationByIP();
},
getLocationByIP: function () {
// 替換成你自己申請的騰訊地圖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定位結果：', res.data);
if (res.data.status === 0) {
const { location, ad_info } = res.data.result;
const { lat, lng } = location;
const { nation, province, city } = ad_info;
// 更新頁面數據，顯示定位信息
this.setData({
latitude: lat,
longitude: lng,
markers: [{
id: 1,
latitude: lat,
longitude: lng,
title: city,
iconPath: '/images/location.png', // 可自定義標記圖標
width: 30,
height: 30
}],
nation: nation,
province: province,
city: city
});
} else {
wx.showToast({
title: '定位失敗，請稍后重試',
icon: 'none',
duration: 2000
});
}
},
fail: (error) => {
console.error('請求失?。?, error);
wx.showToast({
title: '網絡請求失敗，請檢查網絡后重試',
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;
}
最終展示：
總結
到此這篇關于微信小程序調用騰訊地圖API文檔JavaScript SDK和WebService API的文章就介紹到這了,更多相關微信小程序調用騰訊地圖API文檔內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
相關文章
現在在手機等移動端設備訪問的人越來越多，我們前端開發(fā)者一直致力于將設計稿還原成頁面，供用戶訪問。但除高度還原設計稿外，交互上的良好體驗也是我們應該做到的。2021-05-05
這篇文章主要為大家簡單介紹了二維碼圖片生成器QRCode.js，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-08-08
在編寫處理字符串的程序或網頁時，經常會有查找符合某些復雜規(guī)則的字符串的需要。正則表達式就是用于描述這些規(guī)則的工具。換句話說，正則表達式就是記錄文本規(guī)則的代碼。2016-10-10
將HTML DOM中幾個容易常用的屬性做下記錄，需要的朋友可以參考下。2011-03-03
今天小編就為大家分享一篇LayUi數據表格自定義賦值方式，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2019-10-10
js原型鏈與繼承是js中的重點，所以我們通過以下三個例子來進行詳細的講解。一起跟隨小編過來看看吧，希望對大家有所幫助。2016-05-05
網上看到許多關于八皇后算法的文章，很少能看到使用javascript來實現的，今天就給大家使用javascript來解決下這個問題，有需要的小伙伴可以參考下。2015-04-04
這篇文章主要為大家詳細介紹了JavaScript如何獲取到導航條中HTTP信息，具有一定的參考價值，感興趣的小伙伴們可以參考一下2017-10-10
一種很常見的寫法,大家都是這樣寫的，但如果這樣的代碼，殺毒軟件認為是病毒的吧，就太惡劣的。判斷能力也太差了。2009-09-09
這篇文章主要為大家詳細介紹了微信小程序實現多張圖片上傳功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2020-11-11