<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你申請的key值&"></script> 

2.編寫地圖容器（記得給容器寛高）

<div id="container" class="col-md-9" style="height:600px"></div>
<div id="panel" class="col-md-3"style="height:600px;overflow:auto;float:right"></div>
 

3.初始化地圖

var map = new AMap.Map('container', {
                    resizeEnable: true,
                    zoom:13,
                    center: [104.078132,30.658462],//地圖中心點       
                });

做完以上操作就實現地圖載入了，效果如下：

下面做一些基礎操作

1.載入地圖控制元件

//地圖控制元件
                AMap.plugin(['AMap.ToolBar'
 
,'AMap.Scale','AMap.OverView'],
                    function(){
                        map.addControl(new AMap.ToolBar());

                        map.addControl(new AMap.Scale());

                        map.addControl(new AMap.OverView({isOpen:true}));
                });

效果如下：

2.輸入提示：

 //html
 

 <input type="text" class="form-control" id="start" >

//js
AMap.plugin('AMap.Autocomplete',function(){//回撥函式
                    //例項化Autocomplete
                    var autoOptions = {
                        city: "成都市", //城市，預設全國
                        input:"start"//使用聯想輸入的input的id
                    };
                    autocomplete= new AMap.Autocomplete(autoOptions);
                    //TODO: 使用autocomplete物件呼叫相關功能
                })

效果如下：

3.按關鍵字搜尋地址

<form class="form-inline" style="border-bottom: 2px solid #ebebeb;">
                  <div class="form-group">
                    <label >關鍵字</label>
                    <input type="text" class="form-control" id="keyword" placeholder="例如:四川大學">
                  </div>
                 <button type="button" class="btn btn-primary" style ="background-color:#3385ff;" id="query2">搜尋</button>
                </form>

 //地點搜尋
            $('#query2').on('click', function () {
                 AMap.service(["AMap.PlaceSearch"], function() {
                    var placeSearch = new AMap.PlaceSearch({ //構造地點查詢類
                        pageSize: 5,
                        pageIndex: 1,
                        city: "成都市", //城市
                        map: map,
                        panel: "panel"
                    });
                    //關鍵字查詢
                    placeSearch.search($('#keyword').val());
                });
            })

效果如下:

4. 路線規劃

包含 駕車路線規劃、騎行路線規劃、步行路線規劃、公交查詢，這裡使用公交查詢
需要引入對應JS構造類

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=你的key值&plugin=AMap.Driving,AMap.Riding,AMap.Walking"></script> 

<form class="form-inline" style="border-bottom: 3px solid #ebebeb;">
                  <div class="form-group">
                    <label >起始地</label>
                    <input type="text" class="form-control" id="start" placeholder="">
                  </div>
                  <div class="form-group">
                    <label >結束地</label>
                    <input type="text" class="form-control" id="end" placeholder="">
                  </div>
                  <button type="button" class="btn btn-primary" style ="background-color:#3385ff;" id="query">搜尋</button>
                </form>

$('#query').on('click', function () {
                clearMapInfo();
                /*
                 * 呼叫公交換乘服務
                 */
                //載入公交換乘外掛
                AMap.service(["AMap.Transfer"], function() {
                    var transOptions = {
                        map: map,
                        city: "成都市", //公交城市
                        panel: "panel",                           
                        //cityd:'烏魯木齊',
                        policy: AMap.TransferPolicy.LEAST_TIME //乘車策略
                    };
                    //構造公交換乘類
                    trans = new AMap.Transfer(transOptions);
                    //根據起、終點座標查詢公交換乘路線
                    trans.search([{keyword:$('#start').val()},{keyword: $('#end').val()}], function(status, result){
                    });
                });
            })
            //清除上一次搜尋資訊
            function clearMapInfo() {
                if(trans){
                    trans.clear();
                }
            }

效果如下：

5.定位服務

//定位服務
            AMap.plugin('AMap.Geolocation', function () {
                geolocation = new AMap.Geolocation({
                    enableHighAccuracy: true,//是否使用高精度定位，預設:true
                    timeout: 10000,          //超過10秒後停止定位，預設：無窮大
                    maximumAge: 0,           //定位結果快取0毫秒，預設：0
                    convert: true,           //自動偏移座標，偏移後的座標為高德座標，預設：true
                    showButton: true,        //顯示定位按鈕，預設：true
                    buttonPosition: 'RT',    //定位按鈕停靠位置，預設：'LB'，左下角
                    buttonOffset: new AMap.Pixel(10, 20),//定位按鈕與設定的停靠位置的偏移量，預設：Pixel(10, 20)
                    showMarker: true,        //定位成功後在定位到的位置顯示點標記，預設：true
                    showCircle: true,        //定位成功後用圓圈表示定位精度範圍，預設：true
                    panToLocation: true,     //定位成功後將定位到的位置作為地圖中心點，預設：true
                    zoomToAccuracy:true      //定位成功後調整地圖視野範圍使定位位置及精度範圍視野內可見，預設：false
                });
                map.addControl(geolocation);
                geolocation.getCurrentPosition();
                AMap.event.addListener(geolocation, 'complete', onComplete);//返回定位資訊
                AMap.event.addListener(geolocation, 'error', onError);      //返回定位出錯資訊
            });