百度地图：城市公交查询系统之换乘查询超详解

我的毕设是城市公交查询管理系统，是不是以为需要加几百个城市的数据库啊，然后还要定时更新数据啊维护啊什么的。其实使用百度地图的接口，就改两个参数就好了。

百度地图官网： http://lbsyun.baidu.com/index.php?title=jspopularGL   

1、百度地图秘钥

使用百度地图要去申请一个百度地图的秘钥，是免费的，在官网就有。

 <script type="text/javascript" src="你的秘钥"></script>

2、 HTML

为了查看方便，我把样式都删掉了

<input id="city" name="city" value="桂林"  οnclick="show()" ></input>
<div>
    <input type="text" name="start" id="start"  placeholder="请输入起点" >
    <input type="text" name="end" id="end"  placeholder="请输入终点" >
    <button id="tran" lay-submit lay-filter="formDemo" >查询</button>
</div>

3、js

我想要能够获取多个城市的公交换乘，对应的地图也能切换到对应的城市：map1.centerAndZoom(city, 12);

本来想要使用一个定位功能的，但是我没搞懂百度地图的定位，推荐高德地图的定位功能。然后我机智的将定位改为输入框，让用户输入城市，然后在鼠标失去焦点的时候获取该值，就假装这是定位吧。这个时候将城市名给地图，创建一个以该城市为中心的地图。

<script>

    // 获取动态城市  鼠标失去焦点的时候，获取城市值
    $("#city").blur(function() {
        city=$(this).val();
        console.log(city);
    });
/****************************换乘查询*********************************/
    document.getElementById('tran').onclick=function(){
        console.log("点击了换乘按钮");
        var start=document.getElementById('start').value;
        var end= document.getElementById('end').value;
        
       //document.getElementById('l-map1').setAttribute('style', 'height: 500px; width: 750px; margin-left: 50px; margin-right:30px;float: left;font-size:14px;');
        var map1 = new BMap.Map("l-map1");
        map1.centerAndZoom(city, 12);
        var transit = new BMap.TransitRoute(map1, {
            renderOptions: {map: map1, panel: "r-result"}
        });
        transit.search(start, end);
    };
</script>

一点后台的影子都没有，根本就是复制粘贴百度地图API的代码，改一下变量，适当添油加醋。 

系统查询结果：（真丑）