當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

基于腾讯地图的输入自动提示与补全功能

發布時間：2023/12/29 编程问答 41 豆豆

生活随笔收集整理的這篇文章主要介紹了基于腾讯地图的输入自动提示与补全功能小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

當用戶在地圖的搜索框輸入地點的關鍵詞時，此時搜索框下拉列表將會有相關詞供用戶選擇，即根據輸入文本片段即顯示相關的匹配信息，節省了用戶的輸入成本。

一、功能介紹

關鍵詞輸入提示接口可以用于獲取輸入關鍵字的補完與提示，幫助用戶快速輸入。可以通過配合前端程序實現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，默認的數據返回格式為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><link rel="stylesheet" type="text/css" href="css/jquery-ui.min.css"/><script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script><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. 完整案例源碼

騰訊位置服務案例

原文作者：一頭小山豬

總結

以上是生活随笔為你收集整理的基于腾讯地图的输入自动提示与补全功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。