高德地图——驾驶路线

最新推荐文章于 2023-06-27 12:01:11 发布

saiyi绒小花

最新推荐文章于 2023-06-27 12:01:11 发布

阅读量1.1k

点赞数

分类专栏：高德地图文章标签：高德地图——驾驶路线

本文链接：https://blog.csdn.net/qq_34634181/article/details/103068571

版权

高德地图专栏收录该内容

11 篇文章 1 订阅

订阅专栏

高德地图——驾驶路线
插件：AMap.Driving
在这里插入图片描述
方法一：规定路线

new AMap.Driving({
    map:map,
    panel:'panel'
    }).search([
        {keyword:起点,city:'北京'},
        {keyword:终点,city:'北京'}
    ],function(status,data){
        console.log(data);
 })

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=34614f775ec9455cf2f9a5c7bb6acfa0&plugin=AMap.Driving,AMap.Autocomplete"></script>
<style type="text/css">
        *{margin: 0;padding: 0;list-style: none;}
    	#container{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
        #panel{position: fixed;background: white;top: 10px;right: 10px;width: 280px;}
        #search{width: 200px;height: 100px;position: absolute;left: 10px;right: 10px;background: white;}
</style>
    </head>
<body>
    <div id="container"></div> 
    <div id="panel"></div>
    <div id="search">
        起点：<input type="text" name="" id="startNode"><br>
        终点：<input type="text" name="" id="endNode"><br>
        <button id="btn">开始导航</button>
    </div>
    <script type="text/javascript">
		var map = new AMap.Map('container',{
            zoom:11,
            center:[116.379391,39.861536],
        });

        new AMap.Autocomplete({
            input:'startNode'
        });
        new AMap.Autocomplete({
            input:'endNode'
        });
        btn.onclick = function(){
            new AMap.Driving({
                map:map,
                panel:'panel'
            }).search([
                {keyword:startNode.value,city:'北京'},
                {keyword:endNode.value,city:'北京'}
            ],function(status,data){
                console.log(data);
            })
        }
	</script> 
</body>
</html>

方法二：点击地图上任意两点，通过经纬度来进行导航

new AMap.Driving({
    map:map,
    panel:'panel'
    }).search(new AMap.LngLat(startX,startY),new AMap.LngLat(endX,endY),function(status,data){
        console.log(data);
})

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript"
        src="https://webapi.amap.com/maps?v=1.4.15&key=34614f775ec9455cf2f9a5c7bb6acfa0&plugin=AMap.Driving,AMap.Autocomplete"></script>
<style type="text/css">
        *{margin: 0;padding: 0;list-style: none;}
    	#container{width: 100%;height: 100%;position: absolute;left: 0;top: 0;}
        #panel{position: fixed;background: white;top: 10px;right: 10px;width: 280px;}
        #search{width: 200px;height: 100px;position: absolute;left: 10px;right: 10px;background: white;}
</style>
    </head>
<body>
    <div id="container"></div> 
    <div id="panel"></div>
    <div id="search">
        起点：<input type="text" name="" id="startNode"><br>
        终点：<input type="text" name="" id="endNode"><br>
        <button id="btn">开始导航</button>
    </div>
    <script type="text/javascript">
		var map = new AMap.Map('container',{
            zoom:11,
            center:[116.379391,39.861536],
        });

        new AMap.Autocomplete({
            input:'startNode'
        });
        new AMap.Autocomplete({
            input:'endNode'
        });

        var num =0,arr=[];
        map.on('click',function(e){
            num++;
            if(num%2==1){
                arr=[e.lnglat.Q,e.lnglat.P];
            }else{
                new AMap.Driving({
                    map:map,
                    panel:'panel'
                }).search(new AMap.LngLat(arr[0],arr[1]),new AMap.LngLat(e.lnglat.Q,e.lnglat.P),
                function(status,data){
                    console.log(data);
                })
            }
        });
	</script>   
</body>
</html>

saiyi绒小花

关注

0
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
高德地图——驾驶路线

高德地图——驾驶路线插件：AMap.Driving方法一：规定路线new AMap.Driving({ map:map, panel:'panel' }).search([ {keyword:起点,city:'北京'}, {keyword:终点,city:'北京'} ],function(status,data){ ...
复制链接

扫一扫