基于腾讯地图的输入自动提示与补全功能
當(dāng)用戶在地圖的搜索框輸入地點(diǎn)的關(guān)鍵詞時(shí)，此時(shí)搜索框下拉列表將會(huì)有相關(guān)詞供用戶選擇，即根據(jù)輸入文本片段即顯示相關(guān)的匹配信息，節(jié)省了用戶的輸入成本。
一、功能介紹
關(guān)鍵詞輸入提示接口可以用于獲取輸入關(guān)鍵字的補(bǔ)完與提示，幫助用戶快速輸入。可以通過配合前端程序?qū)崿F(xiàn)Autocomplete（自動(dòng)完成）的效果。
二、密鑰申請(qǐng)
1. 用戶登錄
打開騰訊位置服務(wù)主頁：https://lbs.qq.com，點(diǎn)擊右上角的登錄按鈕：
2. 驗(yàn)證信息
點(diǎn)擊控制臺(tái)，進(jìn)入開發(fā)者信息界面，補(bǔ)全基本用戶信息，完成驗(yàn)證。
3. 申請(qǐng)密鑰
點(diǎn)擊左側(cè)key與配額下的key管理：
點(diǎn)擊創(chuàng)建新密鑰，填寫Key名稱、描述、驗(yàn)證碼，等待審核通過：
密鑰申請(qǐng)通過后，可以點(diǎn)擊設(shè)置按鈕修改名稱及描述，并可以選擇啟用的產(chǎn)品，以及對(duì)調(diào)用規(guī)則進(jìn)行限制：
同時(shí)，可以在查看配額界面查看各接口的用量情況：
三、操作步驟
1. 開發(fā)文檔入口
滑動(dòng)到上方菜單的開發(fā)文檔 -> 選擇服務(wù)端下的WebService API：
點(diǎn)擊左側(cè)的關(guān)鍵詞輸入提示：
直達(dá)地址：https://lbs.qq.com/service/webService/webServiceGuide/webServiceSuggestion
2. 接口測試
可以直接使用Postman工具來測試，或者使用Postwomen（Postman他女朋友，唉，連工具都成雙入對(duì)了，寫個(gè)代碼都要被虐，罷了，好好打工）。
由文檔可知，接口的請(qǐng)求類型為GET，默認(rèn)的數(shù)據(jù)返回格式為JSON。必填參數(shù)有三個(gè)：
- key:開發(fā)者密鑰
- keyword：搜索關(guān)鍵字
- region：搜索范圍，必填的限制條件（可以通過region_fix來設(shè)置是否擴(kuò)大范圍）
3. 返回結(jié)果
以下為返回結(jié)果，為了完整展示數(shù)據(jù)結(jié)構(gòu)，刪減了data中的部分?jǐn)?shù)據(jù)：
{"status": 0,"message": "query ok","count": 100,"data": [{"id": "14178584199053362783","title": "中關(guān)村","address": "北京市海淀區(qū)","category": "地名地址:熱點(diǎn)區(qū)域:商圈類","type": 0,"location": {"lat": 39.981047,"lng": 116.320787},"adcode": 110108,"province": "北京市","city": "北京市","district": "海淀區(qū)"},{"id": "2199027905900","title": "中關(guān)村[地鐵站]","address": "地鐵4號(hào)線大興線","category": "基礎(chǔ)設(shè)施:交通設(shè)施:地鐵站","type": 2,"location": {"lat": 39.984055,"lng": 116.316478},"adcode": 110108,"province": "北京市","city": "北京市","district": "海淀區(qū)"}],"request_id": "1136352410315519097" }字段含義可見下表（可在接口文檔中找到）：
四、使用案例
由于接口為純HTTP接口，所以在效果實(shí)現(xiàn)上還需要使用項(xiàng)目中的一些組件。本例使用最簡的jquery-ui來實(shí)現(xiàn)autocomplete效果，下載地址為：http://jqueryui.com/download/。
1. 基礎(chǔ)界面
首先構(gòu)建一個(gè)基礎(chǔ)界面，創(chuàng)建一個(gè)文本框，并依照jquery-ui的用法進(jìn)行綁定。
<!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){//使用自定義函數(shù)處理}});});</script></head><body><div class="ui-widget"><label for="search">搜索框: </label><input type="text" id="search"></div></body> </html>效果如下：
2. 動(dòng)態(tài)響應(yīng)
在source對(duì)應(yīng)的函數(shù)中需要完成接收文本框的值，以及向接口請(qǐng)求數(shù)據(jù)，最終進(jìn)行數(shù)據(jù)封裝的過程。需要注意，由于該過程涉及到用戶的不斷操作，所以建議將ajax設(shè)置為同步方式。
$("#search").autocomplete({//為文本框完成綁定source: function(request,response){//從request對(duì)象中獲得文本框內(nèi)容var keyword = request.term;//定義數(shù)組，封裝最終結(jié)果var obj = [];$.ajax({url:"https://apis.map.qq.com/ws/place/v1/suggestion",type:"get",dataType:"json",async:false,//關(guān)閉異步data:{"key":"替換為自己的key","keyword":keyword,"region":"北京"},success:function(resp){for(i in resp.data){//此處可以根據(jù)需要自定義要顯示的內(nèi)容以及封裝的數(shù)據(jù)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為提示顯示的內(nèi)容//value為選中后補(bǔ)全出現(xiàn)在文本框中的內(nèi)容}}});//將obj最為結(jié)果返回response(obj);}});測試可知，支持中文與拼音的檢索，最終效果如下：
- 拼音搜索
- 選中后
此處功能需要的效果可以根據(jù)項(xiàng)目的需要進(jìn)行調(diào)整。
3. 完整案例源碼
- 騰訊位置服務(wù)案例
原文作者：一頭小山豬
總結(jié)
以上是生活随笔為你收集整理的基于腾讯地图的输入自动提示与补全功能的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 面试复习题--Okhttp
- 下一篇： Cesium实现——日照分析