通過高德地圖API獲得某條道路上的所有座標用於描繪道路的方法
產品提出的一個需求是,通過道路名字,把道路描繪出來. 這功能在各大地圖上都是可以看到的,所以他們覺得做出來也很簡單.
但是百度地圖本身是沒有任何介面可以查詢這個資訊. 網上能找到的方法,無非都是通過導航介面,定義道路的起點和終點進行描繪. 但這種方法只要仔細推敲就有不妥:
- 如果道路有分岔怎麼辦? 每個分岔口都找出來然後不斷呼叫導航介面嗎?
- 如果道路是彎曲而不是直線怎麼辦? 導航走的是最近線路,不一定會完全跟著某條路來走啊.
所以導航的方法並不完美. 我希望制找到的方法是最簡單的,通過路名就要找到整條道路的座標資料. 但是這談何容易? 研究過高德地圖的都知道,在javascript api裡有雖然有Amap.RoadInfoSearch這個方法
但在web api裡就只有搜尋API,搜尋出來的物件是place物件,裡面的資料並不足以描繪道路.
那能不能呼叫javascript api的方法,通過抓包看看他是怎樣呼叫web api的呢? 測試程式碼html如下.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,width=device-width">
<title>關鍵字查詢-使用預設面板</title>
<link rel="stylesheet" href="http://cache.amap.com/lbs/static/main.css?v=1.0" rel="external nofollow" />
<script type="text/javascript"
src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值"></script>
<style type="text/css">
#panel {
position: absolute;
background-color: white;
max-height: 90%;
overflow-y: auto;
top: 10px;
right: 10px;
width: 280px;
}
</style>
</head>
<body>
<div id="mapContainer"></div>
<div id="panel">
</div>
<script type="text/javascript">
var map = new AMap.Map("mapContainer",{
resizeEnable: true
});
AMap.service(["AMap.RoadInfoSearch"],function() {
var roadSearch = new AMap.RoadInfoSearch({ //構造地點查詢類
pageSize: 5,pageIndex: 1,city: "020"
});
//關鍵字查詢
roadSearch.roadInfoSearchByRoadName('元崗路',function(status,result) {
alert(result.roadInfo[0].path[0]);
});
});
</script>
抓包後獲取到一條非常有用的資訊,有這麼一條呼叫
http://restapi.amap.com/v3/road/roadname?pageIndex=1&city=020&offset=5&key=608d75903d29ad471362f8c58c550daf&s=rsv3&output=json&keywords=%E5%85%83%E5%B2%97%E8%B7%AF&callback=jsonp_749020_&platform=JS&logversion=2.0&sdkversion=1.3&appname=http%3A%2F%2Flbs.amap.com%2Fapi%2Fjavascript-api%2Fexample%2Fpoi-search%2Finput-prompt%2F&csid=C23EE7C1-3ADE-4366-AEF3-D45E622F8568
返回的資訊裡有一段非常有用的結果,就是roads陣列,
roads:[{id: "020F49F01004315432",name: "元崗路",citycode: "020",width: "12",type: "次要道路（城市次幹道）",…},…]
0:{id: "020F49F01004315432",…}
進一步分析這個陣列的第一個結果,應該就是roadInfo物件,裡面又存在一個polylines陣列,看起來非常像是一段段路的座標列表.
polylines:
0:"113.3395181,23.16999083;113.3395219,23.17012167;113.3395264,23.17016972;113.3395328,23.17021472;113.3395481,23.17026139;113.3395786,23.17032556;113.3396211,23.17040139;113.3398214,23.17073139;113.339885,23.17084444"
1:"113.3367803,23.1771625;113.3364894,23.17720583;113.3362911,23.17723556;113.3362022,23.17724806;113.3361247,23.17725278;113.3360547,23.17724611;113.3359106,23.17722222;113.3358153,23.17720611;113.3357439,23.17719806;113.3356853,23.17719639;113.3356281,23.17720111;113.3355678,23.17721056;113.3355075,23.17722611;113.3354678,23.17724111;113.3354061,23.17726389;113.335265,23.17732556;113.3348517,23.17749778;113.3347969,23.17751472;113.3347408,23.177525;113.3346953,23.17753139;113.334695,23.17753139"
2:"113.3416042,23.17464861;113.3416194,23.1746825;113.3419189,23.17532083;113.3421011,23.17574861;113.3422519,23.17612111;113.3422869,23.17621917;113.3423011,23.17629222;113.3423103,23.17636083"
...
說到這裡,不得不提 一下地圖的道路是怎麼畫出來的.只要將道路放大,就會發現各大地圖都是用直線一段一段地把整條道路描繪出來,所以說,很可能這一段一段的資料就是上面道路資訊的陣列!
接下來就是要驗證這個想法,方法就是把上面得到的陣列上的座標,放到高德地圖拾取器裡驗證. 經過仔細驗證,果然陣列的每組座標列表,就是代表一小段道路!
既然這樣就直接使用上面那個抓出來的restapi來用吧,誰知道一把那個url放瀏覽器就傻眼了,返回了以下東西.
jsonp_749020_({"status":"0","info":"INVALID_USER_DOMAIN","infocode":"10006"})
看來這介面不能這麼照搬地呼叫啊,必須找出高德web api的套路. 於是又參考了一下他的搜尋API 是怎麼使用的,文件給出的例子是這樣的:
http://restapi.amap.com/v3/place/text?&keywords=北京大學&city=beijing&output=xml&offset=100&page=1&key=<使用者的key>&extensions=all
既然這個rest api,那我把place換成road就應該是查需road的資訊,而截取出來的URL的確有這麼一段http://restapi.amap.com/v3/road/roadname,那就把road替換了他的place,roadname替換他的text,keywords換成路名. 果然得到一條有正確返回的介面了! 雖然這介面他文件沒寫出來,但還是被我揪出來了.
http://restapi.amap.com/v3/road/roadname?city=020&key=<使用者的key>&keywords=元崗路
到此這篇關於通過高德地圖API獲得某條道路上的所有座標用於描繪道路的方法的文章就介紹到這了,更多相關高德地圖API描繪道路內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！