通過高德地圖API獲得某條道路上的所有坐標(biāo)用于描繪道路的方法
產(chǎn)品提出的一個(gè)需求是, 通過道路名字, 把道路描繪出來. 這功能在各大地圖上都是可以看到的, 所以他們覺得做出來也很簡單.
但是百度地圖本身是沒有任何接口可以查詢這個(gè)信息. 網(wǎng)上能找到的方法, 無非都是通過導(dǎo)航接口, 定義道路的起點(diǎn)和終點(diǎn)進(jìn)行描繪. 但這種方法只要仔細(xì)推敲就有不妥:
- 如果道路有分岔怎么辦? 每個(gè)分岔口都找出來然后不斷調(diào)用導(dǎo)航接口嗎?
- 如果道路是彎曲而不是直線怎么辦? 導(dǎo)航走的是最近線路, 不一定會完全跟著某條路來走啊.
所以導(dǎo)航的方法并不完美. 我希望制找到的方法是最簡單的, 通過路名就要找到整條道路的坐標(biāo)數(shù)據(jù). 但是這談何容易? 研究過高德地圖的都知道, 在javascript api里有雖然有Amap.RoadInfoSearch這個(gè)方法
但在web api里就只有搜索API, 搜索出來的對象是place對象, 里面的數(shù)據(jù)并不足以描繪道路.
那能不能調(diào)用javascript api的方法, 通過抓包看看他是怎樣調(diào)用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>關(guān)鍵字查詢-使用默認(rèn)皮膚</title> <link rel="stylesheet" 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({ //構(gòu)造地點(diǎn)查詢類 pageSize: 5, pageIndex: 1, city: "020" }); //關(guān)鍵字查詢 roadSearch.roadInfoSearchByRoadName('元崗路', function(status, result) { alert(result.roadInfo[0].path[0]); }); }); </script>
抓包后獲取到一條非常有用的信息, 有這么一條調(diào)用
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
返回的信息里有一段非常有用的結(jié)果, 就是roads數(shù)組,
roads:[{id: "020F49F01004315432", name: "元崗路", citycode: "020", width: "12", type: "次要道路(城市次干道)",…},…]
0:{id: "020F49F01004315432", name: "元崗路", citycode: "020", width: "12", type: "次要道路(城市次干道)",…}
進(jìn)一步分析這個(gè)數(shù)組的第一個(gè)結(jié)果, 應(yīng)該就是roadInfo對象,里面又存在一個(gè)polylines數(shù)組, 看起來非常像是一段段路的坐標(biāo)列表.
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"
...
說到這里, 不得不提 一下地圖的道路是怎么畫出來的.只要將道路放大, 就會發(fā)現(xiàn)各大地圖都是用直線一段一段地把整條道路描繪出來, 所以說, 很可能這一段一段的數(shù)據(jù)就是上面道路信息的數(shù)組!
接下來就是要驗(yàn)證這個(gè)想法, 方法就是把上面得到的數(shù)組上的坐標(biāo), 放到高德地圖拾取器里驗(yàn)證. 經(jīng)過仔細(xì)驗(yàn)證, 果然數(shù)組的每組坐標(biāo)列表, 就是代表一小段道路!
既然這樣就直接使用上面那個(gè)抓出來的restapi來用吧, 誰知道一把那個(gè)url放瀏覽器就傻眼了, 返回了以下東西.
jsonp_749020_({"status":"0","info":"INVALID_USER_DOMAIN","infocode":"10006"})
看來這接口不能這么照搬地調(diào)用啊, 必須找出高德web api的套路. 于是又參考了一下他的搜索API 是怎么使用的, 文檔給出的例子是這樣的:
http://restapi.amap.com/v3/place/text?&keywords=北京大學(xué)&city=beijing&output=xml&offset=100&page=1&key=<用戶的key>&extensions=all
既然這個(gè)rest api, 那我把place換成road就應(yīng)該是查需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=元崗路
到此這篇關(guān)于通過高德地圖API獲得某條道路上的所有坐標(biāo)用于描繪道路的方法的文章就介紹到這了,更多相關(guān)高德地圖API描繪道路內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
利用百度地圖JSAPI生成h7n9禽流感分布圖實(shí)現(xiàn)代碼
本文將詳細(xì)介紹下如何使用百度地圖JSAPI生成的H7N9感染分布圖,有對百度api感興趣的朋友可以參考下哈,希望可以幫助到你2013-04-04javascript數(shù)組去重3種方法的性能測試與比較
面試題中有一題數(shù)組去重,首先想到的是對象存鍵值的方法可是遇到不同類型又能轉(zhuǎn)換成同樣的字符串的就完了接下來為大家介紹下雙重循環(huán)/存鍵值和類型實(shí)現(xiàn)去重,感興趣的各位可以參考下哈2013-03-03Javascript中apply、call、bind的巧妙使用
Javascript中apply、call、bind都是為了改變函數(shù)體內(nèi)部 this 的指向。下面通過本文重點(diǎn)給大家介紹js中apply,call,bind的巧妙使用方法,感興趣的朋友一起學(xué)習(xí)吧2016-08-08javascript鼠標(biāo)跟隨運(yùn)動3種效果(眼球效果,蘋果菜單,方向跟隨)
在很多網(wǎng)站上能看到圖片跟隨鼠標(biāo)移動的JS特效,其實(shí)做法很簡單,本文就介紹了很多javascript鼠標(biāo)跟隨運(yùn)動,在這里與大家分享下。2016-10-10javascript 彈出窗口中是否顯示地址欄的實(shí)現(xiàn)代碼
程序中通過點(diǎn)擊一個(gè)“發(fā)貨提醒”鏈接彈出另一個(gè)窗口,使用的方法是用javascript 的openUrl()方法。2011-04-04JS下拉框內(nèi)容左右移動效果的具體實(shí)現(xiàn)
這篇文章介紹了JS下拉框內(nèi)容左右移動效果的具體實(shí)現(xiàn)方法,有需要的朋友可以參考一下2013-07-07