騰訊地圖：輸入關鍵字選取地點
前言
開發者在開發諸如地點檢索或行程推薦的系統，這時候使用者常常需要對地址資訊進行輸入檢索，提供關鍵詞輸入提示功能的話，將有助於使用者快速查詢地址，提高搜尋的體驗感。利用騰訊地圖提供的介面可以快速的實現智慧化的輸入提示。具體的實現方法見下文。
一、功能介紹
關鍵詞輸入提示介面可以用於獲取輸入關鍵字的補完與提示，幫助使用者快速輸入。可以通過配合前端程式實現Autocomplete（自動完成）的效果。
二、金鑰申請
1. 使用者登入
開啟騰訊位置服務主頁：https://lbs.qq.com，點選右上角的登入按鈕：
2. 驗證資訊
點選控制檯，進入開發者資訊介面，補全基本使用者資訊，完成驗證。
3. 申請金鑰
點選左側key與配額下的key管理：
點選建立新金鑰，填寫Key名稱、描述、驗證碼，等待稽核通過：
金鑰申請通過後，可以點選設定按鈕修改名稱及描述，並可以選擇啟用的產品，以及對呼叫規則進行限制：
同時，可以在檢視配額介面檢視各介面的用量情況：
三、操作步驟
1. 開發文件入口
滑動到上方選單的開發文件 -> 選擇服務端下的WebService API：
點選左側的關鍵詞輸入提示：
直達地址：https://lbs.qq.com/service/webService/webServiceGuide/webServiceSuggestion
2. 介面測試
可以直接使用Postman工具來測試，或者使用Postwomen（Postman他女朋友，唉，連工具都成雙入對了，寫個程式碼都要被虐，罷了，好好打工）。
由文件可知，介面的請求型別為GET
- 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);
}
});
測試可知，支援中文與拼音的檢索，最終效果如下：
- 拼音搜尋
- 選中後
此處功能需要的效果可以根據專案的需要進行調整。
3. 完整案例原始碼
原文作者：一頭小山豬