高德地图的简单使用

背景：临近毕业，在团队项目的开发中组长让我完成的一个功能

效果图（显示起点和终点，并显示出其路径）：

准备工作：首先，要在高德地图上注册，获得一个 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("获取位置失败");
                    }
                });
            });

View Code

结果：

第三步：显示路线规划（因为我的团队项目是送货的，所以这里用的是货车路线规划）

代码：

            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

高德地图的简单使用

背景：临近毕业，在团队项目的开发中组长让我完成的一个功能

准备工作：首先，要在高德地图上注册，获得一个 web端的 key值

第一步：加载高德地图

第二部：设定起点和终点

猜你喜欢