基于高德地图的路线规划以及附近车辆的点。_基于高德地图的车辆路径问题-优快云博客

本文链接：https://blog.youkuaiyun.com/quhongqiang/article/details/103382083

本文介绍如何使用高德地图API进行路线规划，包括驾车策略选择、实时路况考虑及附近车辆的图标点标记展示。通过具体示例代码，展示了如何在网页上实现地图定位、车辆标记及从起点到终点的路线导航。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

基于高德地图的路线规划以及附近车辆的点。
效果图：
在这里插入图片描述

<!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">
    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css" />
    <title>图标点标记</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body,#container{
            height:100%;
            width:100%;
        }
    </style>
</head>
<body>
    <div id="container"></div>
    <script src="https://webapi.amap.com/maps?v=1.4.15&key=您的秘钥&plugin=AMap.Driving"></script>

    <script>
    var map = new AMap.Map('container', {
        zoom: 14,
        center: [116.4,39.92],
        resizeEnable: true
    });
    
    var options = {
        'showButton': true, // 是否显示定位按钮
		'buttonPosition': 'LB', // 定位按钮的位置
		/* LT LB RT RB */
		'buttonOffset': new AMap.Pixel(10, 20),//定位按钮距离对应角落的距离
		'showMarker': true,//是否显示定位点
		'markerOptions':{//自定义定位点样式，同Marker的Options
		  'offset': new AMap.Pixel(-18, -36),
		  'content':'<img src="map_car.png" style="width:30px;height:20px"/>'
		},
		'showCircle': true,//是否显示定位精度圈
		'circleOptions': {//定位精度圈的样式
			'strokeColor': '#0093FF',
			'noSelect': true,
			'strokeOpacity': 0.5,
			'strokeWeight': 1,
			'fillColor': '#02B0FF',
			'fillOpacity': 0.25
		}
    }
    AMap.plugin(["AMap.Geolocation"], function() {
        var geolocation = new AMap.Geolocation(options);
        map.addControl(geolocation);
        geolocation.getCurrentPosition()
    });

        // 构建车辆
    var marker = new AMap.Marker({
        map: map,
        position: [116.339087, 39.970736],
        content:'<img src="map_car.png" style="width:30px;height:20px"/>',
        offset: new AMap.Pixel(-36, -13),
        autoRotation: true,
        angle: 90
    });
   

    var startIcon = new AMap.Icon({
        // 图标尺寸
        size: new AMap.Size(25, 25),
        // 图标的取图地址
        image: 'tu.png',
        // 图标所用图片大小
        imageSize: new AMap.Size(25, 25),
    });
    /*
    * 驾车策略 
    * AMap.DrivingPolicy.LEAST_TIME           最快捷模式
    * AMap.DrivingPolicy.LEAST_FEE            最经济模式
    * AMap.DrivingPolicy.LEAST_DISTANCE       最短距离模式
    * AMap.DrivingPolicy.REAL_TRAFFIC         考虑实时路况
    */
    var drivingOption = {
        policy: AMap.DrivingPolicy.LEAST_TIME, // 其它policy参数请参考 https://lbs.amap.com/api/javascript-api/reference/route-search#m_DrivingPolicy
        ferry: 1, // 是否可以使用轮渡
        map: map,
        hideMarkers: false, // 设置隐藏路径规划的起始点图标
        autoFitView: true
    }

    // 构造路线导航类
    var driving = new AMap.Driving(drivingOption);
    // 根据起终点经纬度规划驾车导航路线
    driving.search(new AMap.LngLat(116.339087,39.970736), new AMap.LngLat(116.337643,39.992915), function(status, result) {
        console.log(result)
      if (status === 'complete') {
        console.log('绘制驾车路线完成')
        console.log(result.routes[0].distance); // 获取两地之间的导航的实际距离（米）
        console.log(result.routes[0].time); // 获取两地之间距离所需要的时间（秒）
      } else {
        console.log('获取驾车数据失败：' + result)
      }
    });

    var capitals = [{
        center: [116.340653, 39.970769],
    }, {
        center: [116.344945,39.969947],
    }, {
        center: [116.335697,39.971756],
    }, {
        center: [116.3378,39.968944],
    }, {
        center: [116.337714,39.971542],
    }];
    
    var facilities = [];
    for (var i = 0; i < capitals.length; i++) {
        var marker = new AMap.Marker({
            position: new AMap.LngLat(capitals[i].center[0], capitals[i].center[1]),
            offset: new AMap.Pixel(-10, -10),
            icon: startIcon,
        });
        facilities.push(marker);
    }
    map.add(facilities);
    </script>
</body>
</html>