高德地圖系列web篇——目的地公交導航

lkycan發表於2017-12-14
原文網址 : https://juejin.im/post/5a32120e51882578da0de233
地圖Web

##在web開發中經常會有地圖模組，經常有一些公交以及POI搜尋，下面是一個實際的例子 ###註冊你的金鑰：http://lbs.amap.com/dev/key/app

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" src="http://webapi.amap.com/maps?v=1.3&key='你的金鑰"></script>

    <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" src="http://webapi.amap.com/demos/js/liteToolbar.js"></script>
</body>

</html>

複製程式碼

相關文章