百度地图 公交查询功能

 

<!DOCTYPE html>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="text/javascript" src="http://api.map.baidu.com/api?v=1.4"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/library/TextIconOverlay/1.2/src/TextIconOverlay_min.js"></script>

    <script type="text/javascript" src="http://api.map.baidu.com/library/MarkerClusterer/1.2/src/MarkerClusterer_min.js"></script>

    <title>22.1公交查询功能</title>

</head>

<body>

    <div class="wrapper">

        <div class="header">

            <h1>

                公交查询</h1>

            <p>

                <span class="f-r">2011-01-14</span>任务描述:</p>

            <p>

                首先,周边查询,比如“小学”;<br />

                然后,点击任一个红色标注;<br />

                弹出信息窗口中,输入需要前往的地址,比如“北京邮电大学”,点击“前往”; 即可出现公交乘坐路线。</p>

        </div>

        <div class="container clearfix">

            <div class="clearfix">

                <input id="txtSearch" type="text" value="小学" /><input type="button" value="查询" onclick="search()" /></div>

            <div style="clear: both;">

                <div style="float: left; width: 500px; height: 340px; border: 1px solid gray" id="container">

                </div>

                <div id="divResult" style="float: left; width: 500px; height: 340px; background: #eee">

                </div>

            </div>

        </div>

    </div>

</body>

</html>

<script type="text/javascript">

    var map = new BMap.Map("container");

    map.centerAndZoom(new BMap.Point(116.330599, 39.95536), 16);

    var curTitle = "";

    var ts = new BMap.TransitRoute(map, {

        renderOptions: {

            map: map,

            autoViewport: true,

            panel: "divResult"

        }

    });





    function search() {

        var s = document.getElementById("txtSearch");

        var ls = new BMap.LocalSearch(map, { pageCapacity: 20 }); //本地搜索,提供某一特定地区的位置搜索服务,比如在北京市搜索“公园”。

        ls.setSearchCompleteCallback(function (result) { //搜索完成后 调用方法

            map.clearOverlays();

            if (ls.getStatus() == BMAP_STATUS_SUCCESS) {

                var curNum = result.getCurrentNumPois();

                for (var i = 0; i < curNum; i++) {

                    var poi = result.getPoi(i);

                    var lng = poi.point.lng;

                    var lat = poi.point.lat;

                    var title = poi.title;

                    var pt = new BMap.Point(lng, lat);

                    var marker = new BMap.Marker(pt); //标注

                    marker.setTitle(title);

                    marker.addEventListener("click", fnclick(marker)); //标注监听事件

                    map.addOverlay(marker);

                }

            }

        });

        ls.searchInBounds(s.value, map.getBounds()); //范围搜索将根据您提供的视野范围提供搜索结果

    }









    function fnclick(marker) {

        return function () {

            curTitle = marker.getTitle();

            var html = "" + curTitle + "出发,坐<b>公交</b>到" + "<input id='txtDest' type='text' value='北京邮电大学'/><input type='button' value='查询' onclick='tSearch()'/>";

            var infoWin = new BMap.InfoWindow(html); //显示信息

            infoWin.addEventListener("open", function () {

                document.getElementById("txtDest").focus();

            });

            marker.openInfoWindow(infoWin);

        }

    }



    function tSearch() {

        if (curTitle.length > 0) {

            var dest = document.getElementById("txtDest").value;

            ts.search(curTitle, dest);

        }

    }

   

</script>

 

你可能感兴趣的:(百度地图)