背景：臨近畢業，在團隊項目的開發中組長讓我完成的一個功能
參考：高德地圖開放平台
效果圖（顯示起點和終點，並顯示出其路徑）：
准備工作：首先，要在高德地圖上注冊，獲得一個 web端的 key值
然后在網頁上引用它
<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.13&key=yourKey&plugin=AMap.TruckDriving'></script>
第一步：加載高德地圖
首先 准備好一個div容器
<div id="container" style="width: 100%; height: 520px;"></div>
執行方法：
<script type="text/javascript">
//創建一個地圖實例
self.map = new AMap.Map('container', {
resizeEnable: true,
//設定縮放的大小
zoom: 5,
//設定地圖加載時的顯示的中心位置
center: [經度,緯度],
//設置圖標
icon: "img/mark_b.png"
});
</script>
結果：
第二部：設定起點和終點
代碼：
//設置終點位置 var addressinput = '福建省廈門大學'; // 創建一個 Icon 圖標 var startIcon = new AMap.Icon({ // 圖標尺寸 size: new AMap.Size(25, 34), // 圖標的取圖地址 image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png', // 圖標所用圖片大小 imageSize: new AMap.Size(135, 40), // 圖標取圖偏移量 imageOffset: new AMap.Pixel(-9, -3) }); // 將 icon 傳入 marker var startMarker = new AMap.Marker({ //南方IT學院的經緯度 position: new AMap.LngLat(113.326404, 22.202239), icon: startIcon, offset: new AMap.Pixel(-13, -30) }); // 將 markers 添加到地圖 map.add([startMarker]); var truckOptions = { map: self.map, policy: 0, size: 1, city: '' }; var driving = new AMap.TruckDriving(truckOptions); var path = [{//起點 keyword: '廣東珠海南方IT學院', city: '' }, { //終點 keyword: addressinput, city: '' } ]; var markers = []; AMap.service('AMap.PlaceSearch', function() { placeSearch = new AMap.PlaceSearch(); placeSearch.search(addressinput, function(status, result) { if(status === 'complete' && result.info === 'OK') { self.map.remove(markers); //查詢前先移除所有標注 var poiArr = result.poiList.pois; //在地圖上創建標注點 var marker = new AMap.Marker({ //icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png" icon: "img/dir-marker.png" }); //獲取位置 marker.setPosition(new AMap.LngLat(poiArr[0].location.lng, poiArr[0].location.lat)); marker.setMap(self.map); //創建圖標 marker.setLabel({ offset: new AMap.Pixel(3, 0), //修改label相對於maker的位置 }); markers.push(marker); } else { alert("獲取位置失敗"); } }); });
結果：
第三步：顯示路線規划（因為我的團隊項目是送貨的，所以這里用的是貨車路線規划）
代碼：
driving.search(path, function(status, result) { // result即是對應的貨車導航信息，相關數據結構文檔請參考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult if(status === 'complete') { log.success('繪制貨車路線完成') } else { log.error('獲取貨車規划數據失敗：' + result) } });
結果：
到此這個案例就已經完成了。
完整代碼：
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>高德地圖test</title> </head> <body> <div id="container" style="width: 100%; height: 520px;"></div> <script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.13&key=11cb2f8f130c98fe8a3df300703d90de&plugin=AMap.TruckDriving'></script> <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script> <script type="text/javascript"> //創建一個地圖實例 self.map = new AMap.Map('container', { resizeEnable: true, //設定縮放的大小 zoom: 5, //設定地圖加載時的顯示的中心位置 center: [113.326404, 22.202253], //設置icon圖標 icon: "img/mark_b.png" }); //設置終點位置 var addressinput = '福建省廈門大學'; // 創建一個 Icon 圖標 var startIcon = new AMap.Icon({ // 圖標尺寸 size: new AMap.Size(25, 34), // 圖標的取圖地址 image: '//a.amap.com/jsapi_demos/static/demo-center/icons/dir-marker.png', // 圖標所用圖片大小 imageSize: new AMap.Size(135, 40), // 圖標取圖偏移量 imageOffset: new AMap.Pixel(-9, -3) }); // 將 icon 傳入 marker var startMarker = new AMap.Marker({ //南方IT學院的經緯度 position: new AMap.LngLat(113.326404, 22.202239), icon: startIcon, offset: new AMap.Pixel(-13, -30) }); // 將 markers 添加到地圖 map.add([startMarker]); var truckOptions = { map: self.map, policy: 0, size: 1, city: '' }; var driving = new AMap.TruckDriving(truckOptions); var path = [{//起點 keyword: '廣東珠海南方IT學院', city: '' }, { //終點 keyword: addressinput, city: '' } ]; var markers = []; AMap.service('AMap.PlaceSearch', function() { placeSearch = new AMap.PlaceSearch(); placeSearch.search(addressinput, function(status, result) { if(status === 'complete' && result.info === 'OK') { self.map.remove(markers); //查詢前先移除所有標注 var poiArr = result.poiList.pois; //在地圖上創建標注點 var marker = new AMap.Marker({ //icon: "http://webapi.amap.com/theme/v1.3/markers/n/mark_b.png" icon: "img/dir-marker.png" }); //獲取位置 marker.setPosition(new AMap.LngLat(poiArr[0].location.lng, poiArr[0].location.lat)); marker.setMap(self.map); //創建圖標 marker.setLabel({ offset: new AMap.Pixel(3, 0), //修改label相對於maker的位置 }); markers.push(marker); } else { alert("獲取位置失敗"); } }); }); driving.search(path, function(status, result) { // result即是對應的貨車導航信息，相關數據結構文檔請參考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingResult if(status === 'complete') { log.success('繪制貨車路線完成') } else { log.error('獲取貨車規划數據失敗：' + result) } }); </script> </body> </html>