高德地图——公交规划

最新推荐文章于 2020-12-28 16:44:09 发布

saiyi绒小花

最新推荐文章于 2020-12-28 16:44:09 发布

阅读量282

点赞数

分类专栏：高德地图

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

版权

高德地图专栏收录该内容

11 篇文章 1 订阅

订阅专栏

高德地图——公交规划

插件：plugin=AMap.Transfer
1.使用关键字——只支持数组的前两个内容，第三个无效

<!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.Transfer,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.Transfer({
                map:map,
                panel:'panel'
            }).search([
                {keyword:startNode.value,city:'北京'},
                {keyword:endNode.value,city:'北京'}
            ],function(status,data){
                console.log(data);
            })
        }
	</script>
</body>
</html>

2.使用坐标——city 一定要加上城市 如果咱们导航的地址比较偏僻也不可以

<!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.Transfer,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],
        });
        var num =0,arr=[];
        map.on('click',function(e){
            num++;
            if(num%2==1){
                arr=[e.lnglat.Q,e.lnglat.P];
            }else{
                new AMap.Transfer({
                    map:map,
                    panel:'panel',
                    city:'北京'
                }).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
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
高德地图——公交规划

高德地图——公交规划插件：plugin=AMap.Transfer1.使用关键字——只支持数组的前两个内容，第三个无效<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> &lt...
复制链接

扫一扫