zoukankan      html  css  js  c++  java
  • 百度api获得昆明的经纬度和62路公交线路查询

    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>行政区域工具</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
    </head>
    <body>
    <div style="520px;height:340px;border:1px solid gray" id="container"></div>
    <p><input id="startBtn" type="button" onclick="startTool();" value="开启取点工具" /><input type="button" onclick="map.clearOverlays();document.getElementById('info').innerHTML = '';points=[];" value="清除" /></p>
    <div id="info"></div>
    </body>
    </html>
    <script type="text/javascript">
    var map = new BMap.Map("container");                        // 创建Map实例
    map.centerAndZoom("昆明", 12);     // 初始化地图,设置中心点坐标和地图级别

    var key = 1;    //开关
    var newpoint;   //一个经纬度
    var points = [];    //数组,放经纬度信息
    var polyline = new BMap.Polyline(); //折线覆盖物

    function startTool(){   //开关函数
    if(key==1){
            document.getElementById("startBtn").style.background = "green";
            document.getElementById("startBtn").style.color = "white";
            document.getElementById("startBtn").value = "开启状态";
            key=0;
        }
        else{
            document.getElementById("startBtn").style.background = "red";
            document.getElementById("startBtn").value = "关闭状态";
            key=1;
        }
    }
    map.addEventListener("click",function(e){   //单击地图,形成折线覆盖物
        newpoint = new BMap.Point(e.point.lng,e.point.lat);
        if(key==0){
        //    if(points[points.length].lng==points[points.length-1].lng){alert(111);}
            points.push(newpoint);  //将新增的点放到数组中
            polyline.setPath(points);   //设置折线的点数组
            map.addOverlay(polyline);   //将折线添加到地图上
            document.getElementById("info").innerHTML += "new BMap.Point(" + e.point.lng + "," + e.point.lat + "),</br>";    //输出数组里的经纬度
        }
    });
    map.addEventListener("dblclick",function(e){   //双击地图,形成多边形覆盖物
    if(key==0){
            map.disableDoubleClickZoom();   //关闭双击放大
    var polygon = new BMap.Polygon(points);
            map.addOverlay(polygon);   //将折线添加到地图上
        }
    });
    </script>
    <!DOCTYPE html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>搜索62路公交</title>
    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.2"></script>
    </head>
    <body>
    <p><img src="http://map.baidu.com/img/logo-map.gif" /><span style="display:inline-block;200px;">&nbsp;</span><input type="text" value="62" id="busId" />路公交&nbsp;<input type="button" value="查询" onclick="busSearch();" /></p>
    <div style="clear:both">&nbsp;</div>
    <div style="float:left;600px;height:500px;border:1px solid gray" id="container"></div>
    <div id="results" style="float:left;300px;height:500px;font-size:13px;"></div>
    </body>
    </html>
    <script type="text/javascript">
    var map = new BMap.Map("container");
    map.centerAndZoom(new BMap.Point(102.731417,25.063555), 12);

    var busline = new BMap.BusLineSearch(map,{
        renderOptions:{map:map,panel:"results"},
            onGetBusListComplete: function(result){
               if(result) {
                 var fstLine = result.getBusListItem(0);//获取第一个公交列表显示到map上
                 busline.getBusLine(fstLine);
               }
            }
    });
    function busSearch(){
        var busName = document.getElementById("busId").value;
        busline.getBusList(busName);
    }
    </script>
  • 相关阅读:
    002: Opencv 4.0代码执行
    Opencv4.0+cmake3.13.3+vs2017源码编译
    ubuntu 18.0Lts +YouCompleteMe插件安装
    pip 安装keras
    pip 安装paddle
    pip 安装 tensorboardX
    pip 安装pytorch 命令
    TT信息-4-Spring Boot/Spring Cloud
    TT信息-3-Spring/Spring MVC
    TT信息-2设计模式
  • 原文地址:https://www.cnblogs.com/gisoracle/p/2404540.html
Copyright © 2011-2022 走看看