寫在前面：博主是一只經過實戰開發歷練后投身培訓事業的“小山豬”，昵稱取自影片片《獅子王》中的“彭彭”，總是以樂觀、積極的心態對待周邊的事物，本人的技術路線從Java全堆疊工程師一路奔向大資料開發、資料挖掘領域，如今終有小成，愿將昔日所獲與大家交流一二，希望對學習路上的你有所助益，同時，博主也想通過此次嘗試打造一個完善的技術圖書館，任何與文章技術點有關的例外、錯誤、注意事項均會在末尾列出，歡迎大家通過各種方式提供素材，
- 對于文章中出現的任何錯誤請大家批評指出，一定及時修改，
- 有任何想要討論和學習的問題可聯系我：zhuyc@vip.163.com，
- 發布文章的風格因專欄而異，均自成體系，不足之處請大家指正，
騰訊位置 - 地點搜索（結尾附視頻）
本文關鍵字：騰訊位置、地點搜索、服務端、使用教程
文章目錄
- 騰訊位置 - 地點搜索（結尾附視頻）
- 一、功能介紹
- 二、密鑰申請
- 1. 用戶登錄
- 2. 驗證資訊
- 3. 申請密鑰
- 4. 密鑰配置
- 三、操作步驟
- 1. 開發檔案入口
- 2. 介面測驗
- 3. 回傳結果
- 四、使用案例
- 1. 基礎界面
- 2. 周邊搜索 - 地圖回顯
- 五、視頻直達
一、功能介紹
地點搜索介面可以提供三類范圍條件的搜索功能：
- 指定城市的地點搜索：較為明確的地點搜索
- 圓形區域的地點搜索：主要用于周邊搜索，從中心點出發
- 矩形區域的地點搜索：可用于視野搜索，顯示區域為矩形
二、密鑰申請
1. 用戶登錄
打開騰訊位置服務主頁：https://lbs.qq.com，點擊右上角的登錄按鈕：
2. 驗證資訊
點擊控制臺，進入開發者資訊界面，補全基本用戶資訊，完成驗證，
3. 申請密鑰
點擊左側key與配額下的key管理：
點擊創建新密鑰，填寫Key名稱、描述、驗證碼，等待審核通過：
創建成功后，可以在管理界面查看到密鑰資訊：
4. 密鑰配置
密鑰申請通過后，可以點擊設定按鈕修改名稱及描述，并可以選擇啟用的產品，以及對呼叫規則進行限制：
同時，可以在查看配額界面查看各介面的用量情況：
三、操作步驟
1. 開發檔案入口
滑動到上方選單的開發檔案 -> 選擇服務端下的WebService API：
點擊左側的地點搜索：
直達地址：https://lbs.qq.com/service/webService/webServiceGuide/webServiceSearch
2. 介面測驗
可以直接使用Postman工具來測驗，或者使用Postwomen（Postman他女朋友，唉，連工具都成雙入對了，寫個代碼都要被虐，罷了，好好打工），
由檔案可知，介面的請求型別為GET，默認的資料回傳格式為JSON，并且可以設定回呼函式（使用JSONP方式回傳），下面對介紹一下boundary引數，這是一個必填引數，也就是對應文章開頭的三類范圍條件，
- 指定地區名稱
格式為：region(city_name[,auto_extend][,lat,lng])
city_name：【必填】城市名稱，同時支持行政區劃代碼（可精確到區縣級）
auto_extend：【選填】是否自動擴大搜索，默認為1（當前城市無結果自動擴大），可手動設定為0（不擴大）
lat,lng：【選填】中心點坐標，以此為中心，回傳就近結果
- 周邊搜索
格式為：nearby(lat,lng,radius[,auto_extend])
lat,lng：【必填】中心點坐標，相當于搜索圓心
radius：【必填】搜索半徑，單位為米，取值區間為10-1000
auto_extend：【選填】是否自動擴大搜索，默認為1（依次按照按1公里、2公里、5公里，最大到全城市范圍搜索），可手動設定為0（不擴大）
- 矩形搜索
格式為：rectangle(lat,lng,lat,lng)
lat,lng - 第一組：【必填】左下角/西南方向坐標點
lat,lng - 第二組：【必填】右上角/東北方向坐標點
3. 回傳結果
以下為回傳結果，為了完整展示資料結構，刪減了data中的部分資料：
{
"status": 0,
"message": "query ok",
"count": 1433,
"request_id": "123122181103411eebc381494197ae6493561a3bc676",
"data": [
{
"id": "2688340099880903279",
"title": "北京華聯(萬柳購物中心)",
"address": "北京市海淀區巴溝路2號",
"tel": "010-82589600;010-82589617",
"category": "購物:超市",
"type": 0,
"location": {
"lat": 39.972948,
"lng": 116.294937
},
"ad_info": {
"adcode": 110108,
"province": "北京市",
"city": "北京市",
"district": "海淀區"
}
},
{
"id": "7771158446150442692",
"title": "華聯商廈(望京店)",
"address": "北京市朝陽區廣順北大街33號望京凱德MALL",
"tel": "010-84771188",
"category": "購物:綜合商場:購物中心",
"type": 0,
"location": {
"lat": 39.992453,
"lng": 116.468771
},
"ad_info": {
"adcode": 110105,
"province": "北京市",
"city": "北京市",
"district": "朝陽區"
}
}
],
"region": {
"title": "北京市"
}
}
欄位含義可見下表（可在介面檔案中找到）：
四、使用案例
對于回傳結果的使用一般是直接作用在地圖上的，進行一個標點的效果，下面將以周邊搜索為例，將回傳的搜索結果標記在地圖上，做一個完整的顯示效果，
沒接觸過地圖構建的小伙伴可以進入傳送門：騰訊位置 - 地圖構建入門（結尾附視頻）
1. 基礎界面
以一個最簡的功能界面為例，首先顯示一個初始位置，并且可以獲得到中心點的坐標，同時，提供一個文本框，來填寫搜索內容，再使用一個按鈕進行提交，請求介面后回傳資料，
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<style type="text/css">
#container {
/*地圖(容器)顯示大小*/
width: 800px;
height: 400px;
}
</style>
<!--引入jQuery，案例功能所需-->
<script src="js/jquery-1.7.1.min.js" type="text/javascript" charset="utf-8"></script>
<!--引入Javascript API GL-->
<script src="https://map.qq.com/api/gljs?v=1.exp&key=替換為自己的key"></script>
<script>
//定義初始中心點坐標
var center = new TMap.LatLng(40.046394,116.285335);
//定義全域變數map
var map;
//定義全域變數markerLayer
var markerLayer;
//地圖初始化函式
function initMap() {
//呼叫 TMap.Map() 建構式創建地圖
map = new TMap.Map(document.getElementById('container'), {
center: center,//設定地圖中心點坐標
zoom: 15, //設定地圖縮放級別
pitch: 43.5, //設定俯仰角
rotation: 45 //設定地圖旋轉角度
});
//初始化MultiMarker
markerLayer = new TMap.MultiMarker({
map: map//指定地圖容器
});
}
// 頁面加載完成后執行
$(function(){
//初始化顯示地圖
initMap();
//搜索按鈕點擊事件系結
$("#search").click(function(){
//在次方法中完成資料的請求與地圖示點的操作
});
});
</script>
</head>
<body>
<!-- 定義地圖顯示容器 -->
<div id="container"></div>
<br />
<div>
<input type="text" id="keyword" />
<input type="button" id="search" value="搜索" />
</div>
</body>
</html>
效果如下：
2. 周邊搜索 - 地圖回顯
接下來，我們在當前坐標的周圍來搜索超市，同時設定先只顯示3個結果，相關代碼在搜索按鈕的點擊事件中完成：
$("#search").click(function(){
//獲取搜索框內容
var keyword = $("#keyword").val();
//獲取當前中心點坐標
var lat = map.getCenter().getLat().toFixed(6);
var lng = map.getCenter().getLng().toFixed(6);
$.ajax({
url:"https://apis.map.qq.com/ws/place/v1/search",
type:"get",
dataType:"json",
data:{//請求介面時需要的引數
"key":"替換為自己的key",
"keyword":keyword,
"boundary":"nearby(" + lat + "," + lng + ",500)",
"page_size":3
},success:function(resp){
for(i in resp.data){
//向地圖中追加標記點
markerLayer.add({
"id": i, //點標記唯一標識,此處先用索引代替
"styleId": 'marker', //內置樣式，可直接使用
//從回傳資料中取出坐標
"position": new TMap.LatLng(resp.data[i].location.lat, resp.data[i].location.lng)
});
}
}
});
});
最終執行效果如下：
對于標記點的樣式等設定，大家可以根據專案的需要參照官方檔案進行詳細設定，
五、視頻直達
視頻地址：https://www.bilibili.com/video/BV1wK4y1s7dS，喜歡的小伙伴兒一定要三連加關注哦~
騰訊位置 - 地點搜索
寫在結尾：作者力求做到將每個知識點細化，并且對于有關聯的知識點都會使用傳送門掛載鏈接，文章采用：“文字 + 配圖 + 視頻”的方式來進行展現，均是擠時間所作，希望看到這里能留下評論點個贊，略表支持！
CSDN認證博客專家
全堆疊開發工程師
大資料高級開發
大資料金牌講師
轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/252109.html
標籤：其他
上一篇：2021.1.24