高德地圖API學習使用-JavaScript__Java

可以參考官網執行個體文檔學習 1.引入地圖外掛程式 高德地圖——申請Key步驟

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

//jsAMap.plugin('AMap.Autocomplete',function(){//回呼函數                    //執行個體化Autocomplete                    var autoOptions = {                        city: "成都市", //城市，預設全國                        input:"start"//使用Word Flow的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);      //返回定位出錯資訊            });