高德地图-路线规划

最新推荐文章于 2025-07-04 11:05:59 发布

我叫陈小皮。

最新推荐文章于 2025-07-04 11:05:59 发布

阅读量2.4k

点赞数 1

CC 4.0 BY-SA版权

分类专栏：学习笔记文章标签：高德地图路线规划

本文链接：https://blog.youkuaiyun.com/m0_37805167/article/details/79280470

学习笔记专栏收录该内容

28 篇文章

订阅专栏

本文介绍如何使用高德地图API实现Web端路线规划功能，包括地图绘制、路径导航及途径点标记等关键技术点。

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

获取高德地图key

这里写图片描述

页面中引入所需文件，根据提供的api引入相应文件（本文主要是web端的路线规划问题）

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key=申请的key值&plugin=AMap.Driving"></script>

页面部分准备一个容器，用来放地图

<div id="container"></div>

绘制出基本地图

var map = new AMap.Map("container", {  //container为容器id
    resizeEnable: true,
    zoom: 10 //地图显示的缩放级别
});

绘制路线导航

var driving = new AMap.Driving({
     map: map,  //此处map与上文地图实例变量对应
     showTraffic: false,
     autoFitView: true
 });
 var path = {
     waypoints: []
 };
 path.waypoints.push([途径点经度, 途径点维度]); //途径点
 //途径点格式[[第一个途径点经度，第一个途径点纬度],[第二个途径点经度，第二个途径点纬度],...]

 driving.search(
     new AMap.LngLat(起点经度, 起点纬度),
     new AMap.LngLat(终点经度, 终点纬度), 
     path); //途径点数据

标记途径点的信息

var markers = [{
    icon: "http://webapi.amap.com/theme/v1.3/markers/n/mid.png", //途径点图标
    position: [途径点经度, 途径点纬度],
    title: '标题',
    content: '内容'
}];

//批量添加途径点并为其添加事件
markers.forEach(function(marker) {
    var marobj = new AMap.Marker({
        map: map,
        icon: marker.icon,
        position: [marker.position[0], marker.position[1]],
        title: marker.title,
        zIndex: 101,
        label: {
            offset: new AMap.Pixel(20, 0),
            content: marker.content
        }
    });
    AMap.event.addListener(marobj, "click", _markerClick);
});

//途径点事件
var position,title;
var _markerClick = function(obj) {
   position = obj.target.getPosition(); //获取点击图标经纬度
   title = obj.target.getTitle(); //获取点击图标名称
   console.log(position,title);
   navStation(postion,title); //点击途径点开始导航
};

地图导航

function navStation(position,title){
    var geolocation ;
    map.plugin('AMap.Geolocation', function() {
        geolocation = new AMap.Geolocation({
            enableHighAccuracy: true, //是否使用高精度定位，默认:true
            timeout: 10000, //超过10秒后停止定位，默认：无穷大
            maximumAge: 5000, //定位结果缓存5秒，默认：0
            showButton: false
        });
        geolocation.getCurrentPosition();
        AMap.event.addListener(geolocation, 'complete', function(data) {
            //高德地图自带
            window.location.href = "http://m.amap.com/navi/?start=" + data.position.getLng() + "," + data.position.getLat() + "&dest=" + position.lng + "," + position.lat + "&destName=" + title + "&naviBy=walk&key=申请的key值";
        });
        AMap.event.addListener(geolocation, 'error', function() {
            var str = '定位失败：';
            switch (data.info) {
                case 'PERMISSION_DENIED':
                    str += '浏览器阻止了定位操作';
                    break;
                case 'POSITION_UNAVAILBLE':
                    str += '无法获得当前位置';
                    break;
                case 'TIMEOUT':
                    str += '定位超时';
                    break;
                default:
                    str += '未知错误';
                    break;
            }
            console.log(str)
            return false;
        });
    });
}