高德地图API之公交路线

引入插件 AMap.Transfer

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.Transfer,AMap.Autocomplete"></script>
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }
        #panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}
        #search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}
    </style>
</head>
<body>
    <div id="container"></div>
    <div id="panel"></div>

    <script>
        var map=new AMap.Map("container",{
            zoom:11
        });   

        new AMap.Transfer({
            map:map,
            panel:"panel"
        }).search([
            {keyword:"宁波大学",city:"宁波"},
            {keyword:"宁波老外滩",city:"宁波"}
        ],function(status,data){
            console.log(data);
        });    

    </script>
</body>
</html>

只支持两个参数，多加了是无效的

通过输入框输入起点和终点

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.Transfer,AMap.Autocomplete"></script>
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }
        #panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}
        #search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}
    </style>
</head>
<body>
    <div id="container"></div>
    <div id="panel"></div>
    <div id="search">
        起点<input type="text" id="node1"><br>
        终点<input type="text" id="node2"><br>
        <button id="btn">开始导航</button>
    </div>

    <script>
        var map=new AMap.Map("container",{
            zoom:11
        });   

        // 给起点和终点添加自动补全功能
        new AMap.Autocomplete({
            input:"node1"
        })
        new AMap.Autocomplete({
            input:"node2"
        }) 

        btn.onclick=function(){
            //使用插件
            new AMap.Transfer({
                map:map,
                panel:"panel"
            }).search([
                {keyword:node1.value,city:"宁波"},
                {keyword:node2.value,city:"宁波"}
            ],function(status,data){
                console.log(data);
            });
        }

    </script>
</body>
</html>

常规方式

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.Transfer,AMap.Autocomplete"></script>
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }
        #panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}
        #search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}
    </style>
</head>
<body>
    <div id="container"></div>
    <div id="panel"></div>
    <div id="search">
        起点<input type="text" id="node1"><br>
        终点<input type="text" id="node2"><br>
        <button id="btn">开始导航</button>
    </div>

    <script>
        var map=new AMap.Map("container",{
            zoom:11
        });   

        new AMap.Transfer({
            map:map,
            panel:"panel",
            city:"宁波"
        }).search([121.549792,29.868388],[121.549792,29.568388],function(status,data){
            console.log(data);
        });    

    </script>
</body>
</html>

鼠标点击进行规划

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>map</title>
    <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=ce3b1a3a7e67fc75810ce1ba1f83c01a&plugin=AMap.Transfer,AMap.Autocomplete"></script>
    <style>
        *{margin:0;padding:0;list-style: none;}
        #container {width:100%; height: 100%;top:0;left:0;position: absolute; }
        #panel{position: fixed;width:280px;top:10px;right:10px;background-color: #fff;}
        #search{position: absolute;width:200px;height:100px;top:10px;left:10px;background-color: #fff;}
    </style>
</head>
<body>
    <div id="container"></div>
    <div id="panel"></div>
    <div id="search">
        起点<input type="text" id="node1"><br>
        终点<input type="text" id="node2"><br>
        <button id="btn">开始导航</button>
    </div>

    <script>
        var map=new AMap.Map("container",{
            zoom:11
        });   

        //console.log(map.getCenter().toString());//121.549792,29.868388

        var i=0,arr=[];
        map.on("click",function(e){
            i++;
            console.log(i);

            if(i%2==1){
                arr=[e.lnglat.R,e.lnglat.Q];

            }else{
                //使用插件
                new AMap.Transfer({
                    map:map,
                    panel:"panel",
                    city:"宁波"
                }).search(new AMap.LngLat(arr[0],arr[1]),new AMap.LngLat(e.lnglat.R,e.lnglat.Q),function(status,data){
                    console.log(data);
                });
            }
        })

    </script>
</body>
</html>

原文地址：https://www.cnblogs.com/chenyingying0/p/12436441.html

时间： 2024-11-05 22:53:22

高德地图API之公交路线的相关文章

高德地图 API 显示跑步路线

模仿对象此前在尝试制作时,我采用 Nike+ 官网效果为模板仿制.目前 Nike+ 已经升级,看不了之前版本的样式及动态效果,暂且看看样式区别不大的 Nike+ Run Club App 地图,动画部分依然以此前 Nike+ 官网效果为准. 分析一下,想要仿制跑步路线图,其中有两个难点,第一个是画线动态效果,第二个是路线的渐变效果.画线动画是跑步过程的表现,渐变效果则是实时配速的表现. 光看都能感觉到渐变效果比较难,故这边就先不模仿它,搞定画线动画先.之前在 Nike+ 网页端,还在终点显示了

高德地图API之货车路线

货车路线: 引入 AMap.TruckDriving 注意:和驾车路线.步行路线不同的是,必须指定cidy和size,并且坐标传入为json格式 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>map</title> <script type="text/javascript"

【高德地图API】从零开始学高德JS API（五）路线规划——驾车|公交|步行

先来看两个问题:路线规划与导航有什么区别?步行导航与驾车导航有什么区别? 回答: 1.路线规划,指的是为用户提供3条路线推荐.[高德]在提供路线规划的时候,会提供用户自定义路线规划功能,这是别家没有做到的.导航,指的是为驾车用户提示路口信息,向左向右,进入匝道等信息. 2.我们这里说的步行导航和驾车导航,严格的说,应该是路线规划.从A地到B地,如果是驾车,路线规划会将公路路网做为搜索数据:如果是步行,过街天桥.地下通道.人行道做为搜索数据. ---------------------------

百度地图API和高德地图API资料集锦

【高德地图API】从零开始学高德JS API（四）搜索服务

摘要:地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公交导航,驾车导航,步行导航,道路查询(交叉口),行政区划等等.如果说覆盖物Marker是地图的骨骼,那么服务,就是地图的气血.有个各种各样的地图服务,我们的地图应用才能变得有血有肉,活灵活现.第四篇拆成了几个要点,本篇主要讲搜索服务.包括周边搜索,关键词搜索,范围搜索,搜索提示(自动完成,输入提示),行政区域,交叉路口,检索自有数据(云图). demo:http://zhaoziang.com/amap/zero_4_1.html

【高德地图API】从零开始学高德JS API（四）搜索服务——POI搜索|自动完成|输入提示|行政区域|交叉路口|自有数据检索

摘要: 地图服务,大家能想到哪些?POI搜素,输入提示,地址解析,公交导航,驾车导航,步行导航,道路查询(交叉口),行政区划等等.如果说覆盖物Marker是地图的骨骼,那么服务,就是地图的气血.有个各种各样的地图服务,我们的地图应用才能变得有血有肉,活灵活现. 第四篇拆成了几个要点,本篇主要讲搜索服务.包括周边搜索,关键词搜索,范围搜索,搜索提示(自动完成,输入提示),行政区域,交叉路口,检索自有数据(云图). demo:http://zhaoziang.com/amap/zero_4_1.ht

【高德地图API】那些年我们一起开发的APP—即LBS应用模式分享

原文:[高德地图API]那些年我们一起开发的APP-即LBS应用模式分享摘要:利用地图API都能做些什么应用呢?应用商店里所有的分类,都可以结合上LBS来丰富应用.除了传统的生活服务应用,还有新潮的AR实景,可穿戴设备,甚至炫酷的游戏.那么,LBS已经做了哪些事情呢?本文详细介绍了LBS应用模式.一起来细数吧,那些年我们一起开发的APP. (在文章结尾处,有2014LBS应用大赛的信息, 不仅可以写代码拿大奖,提交创意也有奖品呢.快去参加吧.) 一.导航类苹果地图和谷歌地图,在中国的地图数据

【高德地图API】如何打造十月妈咪品牌地图？

原文:[高德地图API]如何打造十月妈咪品牌地图? 摘要:品牌地图除了地图,商铺标点外,还有微博关注,路线查询等功能. ----------------------------------------------------------------- 网站视图: ----------------------------------------------------------------- 一.首先获取店铺的信息一般品牌点会提供地址,店铺名,电话,图片等信息. 这里,我们需要把地址转换成经纬

高德地图api实现地址和经纬度的转换(python)

利用高德地图web服务api实现地理/逆地址编码 api使用具体方法请查看官方文档文档网址:http://lbs.amap.com/api/webservice/guide/api/georegeo/ 1.利用python第三方库requests实现 Requests库文档地址:http://www.python-requests.org/en/master/ 1 #!/usr/bin/env python3 2 #-*- coding:utf-8 -*- 3 ''' 4 利用高德地图api实