zoukankan      html  css  js  c++  java
  • 高德地图——公交路线规划(关键字&坐标)

    &plugin=AMap.Transfer
    1、关键词方式---不支持途径(仅支持2个数据)

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=9de88a718781910c9a1c81230827d1ce&plugin=AMap.Transfer,AMap.Autocomplete"></script>
            <title>公交路线——关键字指定</title>
            <style>
                *{
                    padding: 0;
                    margin: 0;
                }
                #container{
                    position: absolute;
                    top: 0;
                    left: 0;
                     100%;
                    height: 100%;
                }
                #panel{
                    position: fixed;
                    background: white;
                    top: 10px;
                    right: 10px;
                     280px;
                }
                #search{
                     200px;
                    height: 160px;
                    position: absolute;
                    left: 10px;
                    top: 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>
                var map = new AMap.Map('container',{
                    zoom:11,
                    center:[116.379391,39.861536],
                    
                });
                
                /* new AMap.Transfer({
                    map:map,
                    panel:'panel'
                }).search([
                    {keyword:'西单大悦城',city:'北京'},
                    {keyword:'朝阳公园',city:'北京'}
                ],function(status,data){
                    console.log(data);
                }) */
                
                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、使用坐标方式(点击任意两点)

    <!DOCTYPE html>
    <html>
        <head>
            <meta charset="utf-8">
            <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.11&key=9de88a718781910c9a1c81230827d1ce&plugin=AMap.Transfer,AMap.Autocomplete"></script>
            <title>公交路线——坐标指定(点击任意两点)</title>
            <style>
                *{
                    padding: 0;
                    margin: 0;
                }
                #container{
                    position: absolute;
                    top: 0;
                    left: 0;
                     100%;
                    height: 100%;
                }
                #panel{
                    position: fixed;
                    background: white;
                    top: 10px;
                    right: 10px;
                     280px;
                }
                #search{
                     200px;
                    height: 160px;
                    position: absolute;
                    left: 10px;
                    top: 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>
                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.R,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.R,e.lnglat.P),function(status,data){
                            console.log(data);
                        })
                    }
                });
                
            </script>
        </body>
    </html>
  • 相关阅读:
    Java中线程池,你真的会用吗?ExecutorService ThreadPoolExcutor
    springcloud中微服务的优雅停机(已验证)
    SpringCloud eureka
    Spring Boot实战:静态资源处理
    你真的理解CountDownLatch与CyclicBarrier使用场景吗?
    Effective.Java第56-66条(规范相关)
    Effective.Java第45-55条(规范相关)
    Effective.Java第34-44条(枚举)
    装饰(Decorator)模式
    合成(Composite)模式
  • 原文地址:https://www.cnblogs.com/rickdiculous/p/11439090.html
Copyright © 2011-2022 走看看