百度地图 公交查询功能

 

<!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>

 

posted on 2014-12-03 18:04  AlexGeng  阅读(1176)  评论(0)    收藏  举报

导航