寫在前面：博主是一只經過實戰開發歷練后投身培訓事業的“小山豬”，昵稱取自影片片《獅子王》中的“彭彭”，總是以樂觀、積極的心態對待周邊的事物，本人的技術路線從Java全堆疊工程師一路奔向大資料開發、資料挖掘領域，如今終有小成，愿將昔日所獲與大家交流一二，希望對學習路上的你有所助益，同時，博主也想通過此次嘗試打造一個完善的技術圖書館，任何與文章技術點有關的例外、錯誤、注意事項均會在末尾列出，歡迎大家通過各種方式提供素材，
- 對于文章中出現的任何錯誤請大家批評指出，一定及時修改，
- 有任何想要討論和學習的問題可聯系我：zhuyc@vip.163.com，
- 發布文章的風格因專欄而異，均自成體系，不足之處請大家指正，
騰訊位置 - 關鍵詞輸入提示（結尾附視頻）
本文關鍵字：騰訊位置、關鍵詞輸入提示、服務端、使用教程
文章目錄
- 騰訊位置 - 關鍵詞輸入提示（結尾附視頻）
- 一、功能介紹
- 二、密鑰申請
- 1. 用戶登錄
- 2. 驗證資訊
- 3. 申請密鑰
- 4. 密鑰配置
- 三、操作步驟
- 1. 開發檔案入口
- 2. 介面測驗
- 3. 回傳結果
- 四、使用案例
- 1. 基礎界面
- 2. 動態回應
- 五、視頻直達
一、功能介紹
關鍵詞輸入提示介面可以用于獲取輸入關鍵字的補完與提示，幫助用戶快速輸入，可以通過配合前端程式實作Autocomplete（自動完成）的效果，
二、密鑰申請
1. 用戶登錄
打開騰訊位置服務主頁：https://lbs.qq.com，點擊右上角的登錄按鈕：
2. 驗證資訊
點擊控制臺，進入開發者資訊界面，補全基本用戶資訊，完成驗證，
3. 申請密鑰
點擊左側key與配額下的key管理：
點擊創建新密鑰，填寫Key名稱、描述、驗證碼，等待審核通過：
創建成功后，可以在管理界面查看到密鑰資訊：
4. 密鑰配置
密鑰申請通過后，可以點擊設定按鈕修改名稱及描述，并可以選擇啟用的產品，以及對呼叫規則進行限制：
同時，可以在查看配額界面查看各介面的用量情況：
三、操作步驟
1. 開發檔案入口
滑動到上方選單的開發檔案 -> 選擇服務端下的WebService API：
點擊左側的關鍵詞輸入提示：
直達地址：https://lbs.qq.com/service/webService/webServiceGuide/webServiceSuggestion
2. 介面測驗
可以直接使用Postman工具來測驗，或者使用Postwomen（Postman他女朋友，唉，連工具都成雙入對了，寫個代碼都要被虐，罷了，好好打工），
由檔案可知，介面的請求型別為GET，默認的資料回傳格式為JSON，必填引數有三個：
- key:開發者密鑰
- keyword：搜索關鍵字
- region：搜索范圍，必填的限制條件（可以通過region_fix來設定是否擴大范圍）
3. 回傳結果
以下為回傳結果，為了完整展示資料結構，刪減了data中的部分資料：
{
"status": 0,
"message": "query ok",
"count": 100,
"data": [
{
"id": "14178584199053362783",
"title": "中關村",
"address": "北京市海淀區",
"category": "地名地址:熱點區域:商圈類",
"type": 0,
"location": {
"lat": 39.981047,
"lng": 116.320787
},
"adcode": 110108,
"province": "北京市",
"city": "北京市",
"district": "海淀區"
},
{
"id": "2199027905900",
"title": "中關村[地鐵站]",
"address": "地鐵4號線大興線",
"category": "基礎設施:交通設施:地鐵站",
"type": 2,
"location": {
"lat": 39.984055,
"lng": 116.316478
},
"adcode": 110108,
"province": "北京市",
"city": "北京市",
"district": "海淀區"
}
],
"request_id": "1136352410315519097"
}
欄位含義可見下表（可在介面檔案中找到）：
四、使用案例
由于介面為純HTTP介面，所以在效果實作上還需要使用專案中的一些組件，本例使用最簡的jquery-ui來實作autocomplete效果，下載地址為：http://jqueryui.com/download/，
1. 基礎界面
首先構建一個基礎界面，創建一個文本框，并依照jquery-ui的用法進行系結，
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<!--引入css樣式檔案-->
<link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"/>
<!--引入所需的jquery庫檔案-->
<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<!--引入jquery-ui檔案-->
<script src="js/jquery-ui.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(function() {
$("#search").autocomplete({//為文本框完成系結
source: function(request,response){
//使用自定義函式處理
}
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="search">搜索框: </label>
<input type="text" id="search">
</div>
</body>
</html>
效果如下：
2. 動態回應
在source對應的函式中需要完成接收文本框的值，以及向介面請求資料，最終進行資料封裝的程序，需要注意，由于該程序涉及到用戶的不斷操作，所以建議將ajax設定為同步方式，
$("#search").autocomplete({//為文本框完成系結
source: function(request,response){
//從request物件中獲得文本框內容
var keyword = request.term;
//定義陣列，封裝最終結果
var obj = [];
$.ajax({
url:"https://apis.map.qq.com/ws/place/v1/suggestion",
type:"get",
dataType:"json",
async:false,//關閉異步
data:{
"key":"替換為自己的key",
"keyword":keyword,
"region":"北京"
},success:function(resp){
for(i in resp.data){
//此處可以根據需要自定義要顯示的內容以及封裝的資料
obj.push({
"label":resp.data[i].title + "["+resp.data[i].province+"-"+resp.data[i].city+"-"+resp.data[i].district+"]",
"value":resp.data[i].title
});
//label為提示顯示的內容
//value為選中后補全出現在文本框中的內容
}
}
});
//將obj最為結果回傳
response(obj);
}
});
測驗可知，支持中文與拼音的檢索，最終效果如下：
- 拼音搜索
- 選中前
- 選中后
此處功能需要的效果可以根據專案的需要進行調整，
五、視頻直達
視頻地址：https://www.bilibili.com/video/BV1b54y1p7Ny，喜歡的小伙伴兒一定要三連加關注哦~
騰訊位置 - 關鍵詞輸入提示
寫在結尾：作者力求做到將每個知識點細化，并且對于有關聯的知識點都會使用傳送門掛載鏈接，文章采用：“文字 + 配圖 + 視頻”的方式來進行展現，均是擠時間所作，希望看到這里能留下評論點個贊，略表支持！
CSDN認證博客專家
全堆疊開發工程師
大資料高級開發
大資料金牌講師
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/252146.html
標籤：其他
上一篇：揭開JS無埋點技術的神秘面紗