高德地圖獲取道路信息、並將道路繪製

目標 :須要經過路的名字,將道路在地圖中繪製出。javascript

查找路的信息

經過路名搜索路

http://restapi.amap.com/v3/road/roadname?key=yourkey&keywords=靖江路&city=022java

參數名稱 參數含義
key 高德API 申請的key
keywords 路名稱
city 城市citycode 下載地址見參考文獻

經過路id搜索路

http://restapi.amap.com/v3/road/roadid?city=020&key=yourkey&id=022J50F0110263228api

參數名稱 參數含義
key 高德API申請的key
id roadid
city 022

經過API自帶接口查找路的信息

var roadSearch = new AMap.RoadInfoSearch({ //構造地點查詢類
    pageSize: 100,
    pageIndex: 1,
    city: "022"
});
roadSearch.roadInfoSearchByRoadId('022J50F0110263228', function(status, result) {

}
roadSearch.roadInfoSearchByRoadName('靖江路', function(status, result) {

}
參數名稱 參數含義
AMap.RoadInfoSearch 構造函數,實例化一個道路信息查詢實例
roadInfoSearchByRoadId(id:String, callback:function(status:String,result:info) 經過路id搜索
roadInfoSearchByRoadName(keyword:String, callback:function(status:String,result:info) 經過路名搜索

經過POI 直接繪製道路(此功能未詳細研究)

https://ditu.amap.com/place/B0FFGQ7RGA函數

參數名稱 參數含義
POIid POI的Id

返回 RoadInfo 對象

屬性 類型 說明
id String 道路id,該id是惟一標識
name String 道路名稱
type String 道路類型文字描述,詳細參考道路類型列表
center LngLat 道路中心點座標
citycode String 城市編碼
path/polylines Array.<Array.<LngLat>> 道路路徑座標集合

將路徑座標集合繪製在地圖中

//這只是一個示例
for (let i = 0; i < result.roadInfo.length; i++) {
    const element = result.roadInfo[i];
    for (let j = 0; j < element.path.length; j++) {
    const path = element.path[j];
    const polyline = new AMap.Polyline({
        path: path,  
        borderWeight: 2, // 線條寬度,默認爲 1
        strokeColor: 'red', // 線條顏色
        lineJoin: 'round' // 折線拐點鏈接處樣式
    });
    map.add(polyline)
}
}


map.setFitView();

參考文章:編碼

  1. 經過高德地圖API得到某條道路上的全部座標用於描繪道路
  2. 高德地圖開發文檔中搜索服務
  3. citycode下載地址
相關文章
相關標籤/搜索