高德地图进阶开发实战案例(10):地图选取起终点OD位置经纬度的驾车规划路线

简介: 高德地图进阶开发实战案例(10):地图选取起终点OD位置经纬度的驾车规划路线

外部文件的引入

    <link rel="stylesheet" href="https://a.amap.com/jsapi_demos/static/demo-center/css/demo-center.css"/>
    <script src="https://a.amap.com/jsapi_demos/static/demo-center/js/demoutils.js"></script>
    <script type="text/javascript"
            src="https://webapi.amap.com/maps?v=2.0&key=ca11d9894383ee611ed5c6**&plugin=AMap.Driving"></script>
    <script type="text/javascript" src="https://cache.amap.com/lbs/static/addToolbar.js"></script>


构建地图容器和面板

<div id="container"></div>
<div class="info" id="text">
    <input type="text" id="start" placeholder="单击左键获取起点位置">
    <input type="text" id="end" placeholder="单击右键获取终点位置">
    <button id="btn">查询路线</button>
</div>
<div id="panel"></div>


起终点位置经纬度的驾车规划路线

//基本地图加载
    var map = new AMap.Map("container", {
        resizeEnable: true,
        center: [121.548181, 29.806906],
        zoom: 13
    });
    //构造路线导航类
    var driving = new AMap.Driving({
        map: map,
        // panel: "panel"
    });
    //默认路线;
    var start = '121.546266,29.80975';
    var end = '121.549957,29.809508';
    getGis(start, end);
    document.querySelector("#btn").onclick = function getLngLat() {
        var start1 = document.querySelector("#start").value;
        var end1 = document.querySelector("#end").value;
        getGis(start1, end1);
    }
    /*  AMap.event.addListener(map, "click", function (e) {
     console.log(e)
     });*/
    map.on("click", function (e) {
        var lnglat = e.lnglat.getLng() + "," + e.lnglat.getLat();
        console.log(lnglat);
        document.querySelector("#start").value = lnglat;
    });
    map.on("rightclick", function (e) {
        var lnglat = e.lnglat.getLng() + "," + e.lnglat.getLat();
        console.log(lnglat);
        document.querySelector("#end").value = lnglat;
    });
    //计算起始点的路线规划;
    function getGis(start, end) {
        var lng1 = start.split(',')[0];
        var lat1 = start.split(',')[1];
        var lng2 = end.split(',')[0];
        var lat2 = end.split(',')[1];
        // 根据起终点经纬度规划驾车导航路线
        driving.search(new AMap.LngLat(lng1, lat1), new AMap.LngLat(lng2, lat2), function (status, result) {
            // result 即是对应的驾车导航信息
            console.log(result.routes[0].distance + '米');
            console.log(parseFloat(result.routes[0].time / 60).toFixed(2) + '分钟');
            if (status === 'complete') {
                log.success('绘制驾车路线完成')
            } else {
                log.error('获取驾车数据失败:' + result)
            }
        });
    }

lockdatav Done!


相关文章
|
关系型数据库 MySQL 定位技术
高德地图、百度地图的经纬度科普|MySQL和编程语言是如何计算两个坐标之间的距离?
高德地图、百度地图的经纬度科普|MySQL和编程语言是如何计算两个坐标之间的距离?
334 0
高德地图、百度地图的经纬度科普|MySQL和编程语言是如何计算两个坐标之间的距离?
|
8月前
|
前端开发 定位技术
前端学习笔记202305学习笔记第二十三天-地图单线路线设置
前端学习笔记202305学习笔记第二十三天-地图单线路线设置
43 0
|
9月前
|
前端开发 定位技术 API
百度地图API:根据起始点经纬度坐标确认最佳路线规划
百度地图API:根据起始点经纬度坐标确认最佳路线规划
69 0
|
9月前
|
定位技术
高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取
高德地图进阶开发实战案例(5):矩形可视范围的东北西南角经纬度的获取
68 0
|
9月前
|
定位技术 数据格式
百度地图开发实战案例:根据起点和终点计算路程和时间
百度地图开发实战案例:根据起点和终点计算路程和时间
80 0
|
9月前
|
JavaScript 前端开发 定位技术
地图开发实战案例:高德地图设置中心点和级别的行政区多边形加载效果
地图开发实战案例:高德地图设置中心点和级别的行政区多边形加载效果
114 0
|
9月前
|
定位技术 API
高德地图进阶开发实战案例(2):电子围栏(多边形的绘制)的展示
高德地图进阶开发实战案例(2):电子围栏(多边形的绘制)的展示
376 0
|
9月前
|
定位技术
高德地图进阶开发实战案例(4):计算骑行的距离和时间
高德地图进阶开发实战案例(4):计算骑行的距离和时间
102 0
高德地图进阶开发实战案例(4):计算骑行的距离和时间
|
9月前
|
JavaScript 前端开发 定位技术
地图开发实战案例:高德地图弧线连接线标注
地图开发实战案例:高德地图弧线连接线标注
102 0
|
9月前
|
数据可视化 JavaScript 定位技术
地图开发实战案例:高德地图实现区域掩膜的是地图可视化效果
地图开发实战案例:高德地图实现区域掩膜的是地图可视化效果
382 0