寫在前面：博主是一只經過實戰開發歷練后投身培訓事業的“小山豬”，昵稱取自影片片《獅子王》中的“彭彭”，總是以樂觀、積極的心態對待周邊的事物，本人的技術路線從Java全堆疊工程師一路奔向大資料開發、資料挖掘領域，如今終有小成，愿將昔日所獲與大家交流一二，希望對學習路上的你有所助益，同時，博主也想通過此次嘗試打造一個完善的技術圖書館，任何與文章技術點有關的例外、錯誤、注意事項均會在末尾列出，歡迎大家通過各種方式提供素材，
- 對于文章中出現的任何錯誤請大家批評指出，一定及時修改，
- 有任何想要討論和學習的問題可聯系我：zhuyc@vip.163.com，
- 發布文章的風格因專欄而異，均自成體系，不足之處請大家指正，
騰訊位置 - 地址決議（結尾附視頻）
本文關鍵字：騰訊位置、地址決議、服務端、使用教程
文章目錄
- 騰訊位置 - 地址決議（結尾附視頻）
- 一、功能介紹
- 二、密鑰申請
- 1. 用戶登錄
- 2. 驗證資訊
- 3. 申請密鑰
- 4. 密鑰配置
- 三、操作步驟
- 1. 開發檔案入口
- 2. 介面測驗
- 3. 回傳結果
- 四、使用案例
- 1. 功能整合
- 2. 地圖回顯
- 五、視頻直達
一、功能介紹
地址決議介面可以根據地址描述查詢到具體位置，如果查詢成功，則回傳的結果是唯一的，主要是通過決議精度級別（共11級）來確定坐標是否準確，
二、密鑰申請
1. 用戶登錄
打開騰訊位置服務主頁：https://lbs.qq.com，點擊右上角的登錄按鈕：
2. 驗證資訊
點擊控制臺，進入個人中心 -> 我的資訊完成驗證，
3. 申請密鑰
點擊左側應用管理下的我的應用：
點擊創建應用，填寫應用名稱，選擇應用型別：
創建成功后，可以在管理界面查看到密鑰資訊：
4. 密鑰配置
密鑰申請通過后，可以點擊編輯按鈕添加描述，并可以選擇啟用的產品，以及對呼叫規則進行限制：
同時，可以在配額管理 -> 我的額度查看各介面的用量情況：
三、操作步驟
1. 開發檔案入口
滑動到上方選單的開發檔案 -> 選擇服務端下的WebService API：
點擊左側的地址決議（地址轉坐標）：
直達地址：https://lbs.qq.com/service/webService/webServiceGuide/webServiceGeocoder
2. 介面測驗
可以直接使用Postman工具來測驗，或者使用Postwomen（Postman他女朋友，唉，連工具都成雙入對了，寫個代碼都要被虐，罷了，好好打工），
由檔案可知，介面的請求型別為GET，默認的資料回傳格式為JSON，必填參除了開發者密鑰還有address欄位，并且檔案中建議地址包含城市名稱，
3. 回傳結果
本介面適合有具體，并較為完整的名稱資訊時使用，因為回傳的結果唯一，如果只提供了部分關鍵資訊可能導致回傳的結果與預期偏差較大，
{
"status": 0,
"message": "query ok",
"result": {
"title": "ECO中科愛克大廈",
"location": {
"lng": 116.331284,
"lat": 39.980824
},
"ad_info": {
"adcode": "110108"
},
"address_components": {
"province": "北京市",
"city": "北京市",
"district": "海淀區",
"street": "",
"street_number": ""
},
"similarity": 0.8,
"deviation": 1000,
"reliability": 7,
"level": 10
}
}
欄位含義可見下表（可在介面檔案中找到）：
level決議級別表：
四、使用案例
在使用地址決議介面時，主要是為了能夠在地圖中較為精確的標記位置，一般是將現有的具體地址轉換為坐標時使用，如果結合用戶操作，同時保證結果的準確性，可以結合使用關鍵詞提示介面，幫助補全地址資訊，可參考如下文章：
- 騰訊位置 - 地圖構建入門（結尾附視頻）
- 騰訊位置 - 關鍵詞輸入提示（結尾附視頻）
1. 功能整合
首先構建一個基本的地圖，同時整合關鍵詞提示功能，定義一個功能按鈕：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
#container {
/*地圖(容器)顯示大小*/
width: 800px;
height: 400px;
}
</style>
<!--引入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) {
//從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].city + resp.data[i].title
});
//label為提示顯示的內容
//value為選中后補全出現在文本框中的內容
}
}
});
//將obj最為結果回傳
response(obj);
}
});
});
</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: 18, //設定地圖縮放級別
pitch: 43.5, //設定俯仰角
rotation: 45 //設定地圖旋轉角度
});
//初始化MultiMarker
markerLayer = new TMap.MultiMarker({
map: map//指定地圖容器
});
}
// 頁面加載完成后執行
$(function(){
//初始化顯示地圖
initMap();
//決議按鈕點擊事件系結
$("#coder").click(function(){
//獲取資訊，在地圖上進行標記(同時挪動中心點)
});
});
</script>
</head>
<body>
<div class="ui-widget">
<label for="search">搜索框: </label>
<input type="text" id="search" style="width: 300px;">
<input type="button" id="coder" value="決議" />
</div>
<br />
<!-- 定義地圖顯示容器 -->
<div id="container"></div>
</body>
</html>
效果如下：
2. 地圖回顯
在搜索框中輸入內容，根據提示補全，點擊決議按鈕后，挪動中心點，同時在地圖上顯示標記，
$("#coder").click(function(){
//獲取資訊，在地圖上進行標記(同時挪動中心點)
var address = $("#search").val();
$.ajax({
url:"https://apis.map.qq.com/ws/geocoder/v1/",
type:"get",
dataType:"json",
data:{
"key":"替換為自己的key",
"address":address
},success:function(resp){
var lat = resp.result.location.lat;
var lng = resp.result.location.lng;
//重新設定中心點
map.setCenter(new TMap.LatLng(lat,lng));
markerLayer.add({
"id": 1,//此處為單次測驗時使用，實際專案中注意區分
"styleId": 'marker',//內置樣式，可直接使用
//指定放置位置
"position": new TMap.LatLng(lat, lng)
});
}
});
});
效果如下：
五、視頻直達
視頻地址：https://www.bilibili.com/video/BV1oU4y1s7rr，喜歡的小伙伴兒一定要三連加關注哦~
騰訊位置 - 地址決議
寫在結尾：作者力求做到將每個知識點細化，并且對于有關聯的知識點都會使用傳送門掛載鏈接，文章采用：“文字 + 配圖 + 視頻”的方式來進行展現，均是擠時間所作，希望看到這里能留下評論點個贊，略表支持！
CSDN認證博客專家
全堆疊開發工程師
大資料高級開發
大資料金牌講師
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/254119.html
標籤：其他
下一篇：PDF.js顯示電子簽章