1.準備工作

引入高德地圖JS API以及UI組件庫（index.html）

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.3&key=ade4e9ff095772a5158a71bfab7a631a"></script>    //引入地圖JS API    
<script src="http://webapi.amap.com/ui/1.0/main.js"></script>    //引入地圖UI組件庫

添加地圖容器测僵，并為其指定id屬性

 <div id="map"></div>

為地圖容器設置寬高

#map {width:300px; height: 180px; }  

2.繪制地圖

創(chuàng)建地圖并設置常用參數(shù)

let map = new AMap.Map('map',{
    zoom: 16,//縮放級別
    center:[117.128255,36.662838],//地圖中心點坐標
});

地圖常用方法

//設置地圖中心點
let position = new AMap.LngLat(117.128255,36.662838);
map.setCenter(position); 
//設置地圖縮放級別
map.setZoom(15);
//設置地圖狀態(tài)
map.setStatus({
    dragEnable: false,//是否可拖動
    keyboardEnable: false,//是否可通過鍵盤控制
    doubleClickZoom: false,//是否可雙擊放大
    zoomEnable: false,//是否可縮放
    rotateEnable: false//是否可旋轉(zhuǎn)
});

地圖點標記

//添加一個點標記
let marker = new AMap.Marker({
    clickable: true, //是否可點擊
    position: new AMap.LngLat(117.128255,36.662838), //標記位置
    icon: new AMap.Icon({//自定義圖標
        size: new AMap.Size(30, 30), //圖標顯示大小
        image: "res/location_center.png",//圖標路徑
        imageSize: new AMap.Size(30,30)//圖標縮放大小
    }),
    //綁定標記點擊事件
    marker.on('click',()=>{
    })
});
map.add(marker);
//添加多個點標記
let markerList = [marker1, marker2, marker3];
map.add(markerList);
//移除點標記
map.remove(marker);

3.常用UI組件

地圖UI控件

//設置DomLibrary督怜，jQuery或者Zepto
AMapUI.setDomLibrary($);
//加載BasicControl吃衅，loadUI的路徑參數(shù)為模塊名中 'ui/' 之后的部分
AMapUI.loadUI(['control/BasicControl'], function(BasicControl) {
  //縮放控件
  map.addControl(new BasicControl.Zoom({
      position: 'lt', //left top，左上角
      showZoomNum: true //顯示zoom值
  }));
  //圖層切換控件
  map.addControl(new BasicControl.LayerSwitcher({
      position: 'rt' //right top，右上角
  }));
  //實時交通控件
  map.addControl(new BasicControl.Traffic({
      position: 'lb'//left bottom, 左下角
  }));
});

拖拽選址組件

AMapUI.loadUI(['misc/PositionPicker'], function(PositionPicker) {
    let positionPicker = new PositionPicker({
        mode:'dragMap',//拖動地圖模式
        map: map,
        iconStyle:{//自定義圖標
            url: './res/drag.png',
            size:[30,30],  //要顯示的點大小，將縮放圖片
            ancher:[15,15],//錨點的位置梧疲，即被size縮放之后，圖片的什么位置作為選中的位置
        }
    });
    //成功回調(diào)函數(shù)
    positionPicker.on('success', function(positionResult) {
    });
    //失敗回調(diào)函數(shù)
    positionPicker.on('fail', function(positionResult) {
    });
});
//開始選址
positionPicker.start();
//停止選址
positionPicker.stop();

4.坐標系轉(zhuǎn)換（高德地圖API提供的轉(zhuǎn)換方法不可用）

//百度坐標轉(zhuǎn)高德坐標（傳入經(jīng)度施符、緯度）
transform:function(bd_lng, bd_lat) {
    let X_PI = Math.PI * 3000.0 / 180.0;
    let x = bd_lng - 0.0065;
    let y = bd_lat - 0.006;
    let z = Math.sqrt(x * x + y * y) - 0.00002 * Math.sin(y * X_PI);
    let theta = Math.atan2(y, x) - 0.000003 * Math.cos(x * X_PI);
    let gd_lng = z * Math.cos(theta);
    let gd_lat = z * Math.sin(theta);
    return {lng: gd_lng, lat: gd_lat}
}

// 高德坐標轉(zhuǎn)百度坐標（傳入經(jīng)度往声、緯度）
transform:function(gd_lng, gd_lat) {
    let X_PI = Math.PI * 3000.0 / 180.0;
    let x = gd_lng,
    let y = gd_lat;
    let z = Math.sqrt(x * x + y * y) + 0.00002 * Math.sin(y * X_PI);
    let theta = Math.atan2(y, x) + 0.000003 * Math.cos(x * X_PI);
    let bd_lng = z * Math.cos(theta) + 0.0065;
    let bd_lat = z * Math.sin(theta) + 0.006;
    return {lat: bd_lat,lng: bd_lng};
}

5.隱藏高德地圖logo及copyright字樣

.amap-logo{
    display: none;
}

.amap-copyright{
    opacity:0;
}