高德地图系列web篇——目的地公交导航

在web开发中经常会有地图模块，经常有一些公交以及POI搜索，下面是一个实际的例子

注册你的密钥：

Paste_Image.png

最终导航效果图：

Paste_Image.png

所有代码,注意要换掉你的key

<!doctype html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width">
    <style type="text/css">
    body,
    html,
    #container {
        height: 500px;
        margin: 0px;
        width: 800px;
    }
    </style>
    <title>高德地图测试例子</title>
</head>

<body>
    <div id="container" tabindex="0"></div>
    <div id="panel">
</div>
    <script type="text/javascript" 

    <script type="text/javascript">
    var map = new AMap.Map('container', {
        resizeEnable: true,
        zoom: 15,
        center: [114.065618, 22.623388]
    });
    AMap.service('AMap.StationSearch', function() { //回调函数
        //实例化StationSearch
        stationSearch = new AMap.StationSearch();
        //TODO: 使用stationSearch对象调用行政区查询的功能
    })

   //加载公交换乘插件
    AMap.service(["AMap.Transfer"], function() {
        var transOptions = {
            map: map,
            city: '深圳市',
            panel:'panel',                            //公交城市
            policy: AMap.TransferPolicy.LEAST_TIME //乘车策略
        };
        //构造公交换乘类
        var trans = new AMap.Transfer(transOptions);
        //根据起、终点坐标查询公交换乘路线 阳光第五季
        trans.search([{keyword:'五和地铁站'},{keyword:'金方华电扇产业园(雅园路)'}], function(status, result){
        });
    });
    </script>
//公交导航工具
    <script type="text/javascript" 
</body>

</html>