高德地圖根據輸入地址查詢軌跡路線以及獲取到所有的路線上的經緯度點
阿新 • • 發佈：2019-01-06
來看看效果吧：
具體程式碼如下：
<!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"> <style> html, body, #container { width: 100%; height: 100%; margin: 0px; font-size: 13px; } #pickerBox { position: absolute; z-index: 9999; top: 50px; right: 30px; width: 300px; } #pickerInput { width: 200px; padding: 5px 5px; } #poiInfo { background: #fff; } .amap_lib_placeSearch .poibox.highlight { background-color: #CAE1FF; } .amap_lib_placeSearch .poi-more { display: none!important; } </style> <title>位置經緯度 + 獲取貨車規劃資料</title> <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" /> <script src="https://webapi.amap.com/maps?v=1.4.11&key=你的key&plugin=AMap.TruckDriving"></script> <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script> <!-- UI元件庫 1.0 --> <script src="https://webapi.amap.com/ui/1.0/main.js?v=1.0.11"></script> </head> <body> <div id="container"></div> <div id="pickerBox"> <input id="pickerInput1" placeholder="輸入起始地點" /> <input id="pickerInput2" placeholder="輸入目的地點" /> <button onclick="showLine()">搜尋</button> <button onclick="showPoints()">顯示所有的點</button> </div> <script type="text/javascript"> var map = new AMap.Map("container", { zoom: 14 }); var startPoint, endPoint; AMapUI.loadUI(['misc/PoiPicker'], function(PoiPicker) { var poiPicker1 = new PoiPicker({ input: 'pickerInput1' }); var poiPicker2 = new PoiPicker({ input: 'pickerInput2' }); //初始化poiPicker poiPickerReady(poiPicker1, 'start'); poiPickerReady(poiPicker2, 'end'); }); function poiPickerReady(poiPicker, type) { window.poiPicker = poiPicker; var marker = new AMap.Marker(); var infoWindow = new AMap.InfoWindow({ offset: new AMap.Pixel(0, -20) }); //選取了某個POI poiPicker.on('poiPicked', function(poiResult) { var source = poiResult.source, poi = poiResult.item, info = { source: source, id: poi.id, name: poi.name, location: poi.location.toString(), address: poi.address }; marker.setMap(map); marker.setPosition(poi.location); if('start' == type){ startPoint = {lnglat:[poi.location.lng, poi.location.lat]} }else{ endPoint = {lnglat:[poi.location.lng, poi.location.lat]} } map.setCenter(marker.getPosition()); }); } var lines = []; var showLine = function(){ var truckDriving = new AMap.TruckDriving({ map: map, policy: 0, // 規劃策略 size: 1, // 車型大小 width: 2.5, // 寬度 height: 2, // 高度 load: 1, // 載重 weight: 12, // 自重 axlesNum: 2, // 軸數 province: '京', // 車輛牌照省份 isOutline: true, outlineColor: '#ffeeee' }) var path = [] path.push(startPoint); path.push(endPoint); //path.push({lnglat:[102.16713, 27.075478]});//起點 //path.push({lnglat:[102.183121, 27.066025]});//途徑 //path.push({lnglat:[102.250366, 27.093014]});//途徑 //path.push({lnglat:[102.28643, 26.862982]});//終點 //path.push({lnglat:[102.29525, 26.873838]});//終點 truckDriving.search(path, function(status, result) { // searchResult即是對應的駕車導航資訊，相關資料結構文件請參考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult if (status === 'complete') { log.success('獲取貨車規劃資料成功') console.log(JSON.stringify(result)); var path2 = result; console.log("path:"+path2); var routes = path2.routes; var points = [] routes.forEach(item=>{ var steps = item.steps; steps.forEach(st=>{ points.push(st.path); }) }) console.log("points:"+points); points.forEach(item2=>{ item2.forEach(p =>{ lines.push([p.lng,p.lat]); }) }) console.log("lines:"+lines); //showPoints(lines) } else { log.error('獲取貨車規劃資料失敗：' + result) } }) } //顯示所有的線上的點 var showPoints = function(){ map.clearMap() //var map = new AMap.Map('container',{resizeEnable: true,zoom:4}); var markers = []; //province見Demo引用的JS檔案 for (var i = 0; i < lines.length; i += 1) { var marker; var icon = new AMap.Icon({ image: 'https://vdata.amap.com/icons/b18/1/2.png', size: new AMap.Size(24, 24) }); marker = new AMap.Marker({ icon: icon, position: lines[i], offset: new AMap.Pixel(-12,-12), zIndex: 101, title:JSON.stringify(lines[i]), map: map }); markers.push(marker); } map.setFitView(); } </script> </body> </html>