• 高德地图——公交路线规划(关键字&坐标)


    &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>
  • 相关阅读:
    WPF、UWP以及其他类型项目的csproj文件的迁移(SDK-Style)
    文书生成笔录预设保存按钮Mq中间转传服务
    卷宗添加争议焦点数据制造脚本(卷宗部分)
    案件信息同步之后,文书系统案件名称显示不正确问题
    DISTINCT----mysql移除返回的重复值
    Nginx系列教程(6)Nginx location 匹配规则详细解说
    转载 chrony 详解
    dmesg 时间转换
    axios---get和post用法详解
    通过递归来封装sessionStorage---set/get/delete
  • 原文地址:https://www.cnblogs.com/rickdiculous/p/11439090.html
Copyright © 2020-2023  润新知