高德地圖的簡單使用

背景：臨近畢業，在團隊項目的開發中組長讓我完成的一個功能

效果圖（顯示起點和終點，並顯示出其路徑）：html

準備工做：首先，要在高德地圖上註冊，得到一個 web端的 key值

而後在網頁上引用它java

<script type="text/javascript" src='https://webapi.amap.com/maps?v=1.4.13&key=yourKey&plugin=AMap.TruckDriving'></script>

第一步：加載高德地圖

首先準備好一個div容器web

<div id="container" style="width: 100%; height: 520px;"></div>

執行方法：api

<script type="text/javascript">
            //建立一個地圖實例
            self.map = new AMap.Map('container', {
                resizeEnable: true,
                //設定縮放的大小
                zoom: 5,
                //設定地圖加載時的顯示的中心位置
                center: [經度,緯度],
                //設置圖標
                icon: "img/mark_b.png"
            });
        </script>

結果：數據結構

第二部：設定起點和終點

代碼：ide

            //設置終點位置
            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("獲取位置失敗");
                    }
                });
            });

View Code

結果：ui

第三步：顯示路線規劃（由於個人團隊項目是送貨的，因此這裏用的是貨車路線規劃）spa

代碼：3d

            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>

View Code