1、安裝

準備-入門-教程-地圖 JS API

2、使用

1、在頁面添加 JS API 的入口腳本標簽，并將其中「您申請的key值」替換為您剛剛申請的 key；

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

2、添加div標簽作為地圖容器，同時為該div指定id屬性；

<div id="container"></div> 

3、為地圖容器指定高度、寬度；

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

4、進行移動端開發時，請在head內添加viewport設置，以達到最佳的繪制性能；

<meta name="viewport" content="initial-scale=1.0, user-scalable=no"> 

JSAPI 1.3 開始完全支持 HTTPS 協議，如需使用安全協議，替換 JS API 的入口腳本URL中的http為https即可。隨著 Chrome、iOS 等相繼限制非安全域的定位請求，我們建議您升級網站到HTTPS協議，并使用HTTPS協議加載 JS API。

3、API

創建地圖

<div id="container"></div>
<script src="https://webapi.amap.com/maps?v=1.4.12&key=您申請的key值"></script>
<script>
    var map = new AMap.Map('container', {
        resizeEnable: true, //是否監控地圖容器尺寸變化
        zoom:11, //初始化地圖層級
        center: [116.397428, 39.90923] //初始化地圖中心點
    });
</script>

地圖加載完成

地圖加載完成事件 map.on("complete")

map.on("complete", function(){
    log.success("地圖加載完成！");  
});

地圖的銷毀 map.destroy()

document.querySelector("#destroy-btn").onclick = destroyMap;
function destroyMap() {
    map && map.destroy();
    log.info("地圖已銷毀");
}

異步加載地圖

給JSAPI引用地址url加上callback參數，異步調用JSAPI接口

var url = 'https://webapi.amap.com/maps?v=1.4.12&key=您申請的key值&callback=onApiLoaded';
var jsapi = document.createElement('script');
jsapi.charset = 'utf-8';
jsapi.src = url;
document.head.appendChild(jsapi);

// callback = onApiLoaded
function onApiLoaded(){
    var map = new AMap.Map('container', {
        center: [117.000923, 36.675807],
        zoom: 6
    });
    map.plugin(["AMap.ToolBar"], function() {
        map.addControl(new AMap.ToolBar());
    });
}

插件的使用

JS API 提供了眾多的插件功能，這些功能不會主動隨著 JSAPI 主體資源下發，需要引入之后才能使用這些插件的功能。

1. 異步加載插件

異步加載指的是在 JS API 加載完成之后，在需要使用到某個插件的時候，通過AMap.plugin方法按需引入插件，在plugin回調之后使用插件功能。

var map = new AMap.Map('container',{
    zoom:12,
    center:[116.39,39.9]
});
AMap.plugin('AMap.ToolBar',function(){//異步加載插件
    var toolbar = new AMap.ToolBar();
    map.addControl(toolbar);
});

2. 異步加載多個插件

AMap.plugin的第一個參數使用數組即可同時加載引入多個插件。

AMap.plugin(['AMap.ToolBar','AMap.Driving'],function(){//異步同時加載多個插件
    var toolbar = new AMap.ToolBar();
    map.addControl(toolbar);
    var driving = new AMap.Driving();//駕車路線規劃
    driving.search(/*參數*/)
});

3. 同步加載插件

可以在 JS API 的入口地址中添加plugin參數，將需要使用的一個或者多個插件的名稱作為參數即可&plugin=AMap.ToolBar。 需要加載多個插件時，plugin參數中的插件名稱之間以逗號分割。&plugin=AMap.ToolBar,AMap.Driving"

<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.7&key=您申請的key值&plugin=AMap.ToolBar,AMap.Driving"></script> 
<script type="text/javascript" >
    var map = new AMap.Map('mapContainer',{
        zoom:12,
        center:[116.39,39.9]
    });
    var toolbar = new AMap.ToolBar();
    map.plugin(toolbar);
    var driving = new AMap.Driving();
    driving.search(/*參數*/)
</script>

4. 插件列表

中英文地圖切換

var map = new AMap.Map('container', {
    resizeEnable: true,
    center: [121.498586, 31.239637],
    lang: "en" //可選值：en，zh_en, zh_cn
});

map.setLang('zh_cn'); // 中文
map.setLang('zh_en'); // 中英文對照

獲取地圖中心點/級別

• map.getCenter()獲取地圖中心點
• map.getZoom()獲取地圖縮放級別

設置地圖中心點/級別

• setCenter()：改變地圖中心點
• setZoom()：改變地圖級別
• setZoomAndCenter() ：同時設置地圖層級與中心點

map.setZoom(zoom); //設置地圖層級 zoom 整數
map.setCenter([lng, lat]); //設置地圖中心點 [經度、緯度] 保持6位小數點 toFixed(6)
map.setZoomAndCenter(zoom, [lng, lat]); //同時設置地圖層級與中心點

綁定地圖移動與縮放事件

map.on('moveend', callback);
map.on('zoomend', callback);

獲取地圖當前行政區

<script type="text/javascript" src='https://a.amap.com/jsapi_demos/static/demo-center/js/prety-json.js'></script>
<p><span id="map-city"></span></p>

map.getCity( function(info){
    console.log(info)
    var node = new PrettyJSON.view.Node({
        el: document.querySelector("#map-city"),
        data: info
    });
});    

使用map.getCity()獲取地圖當前中心所在行政區。回調函數的參數info對象擁有四個屬性，province省份、city城市、citycode城市編碼、district區。

new PrettyJSON.view.Node()接受一個參數對象渲染視圖，el指定渲染的元素，data指定渲染的數據

設置地圖當前行政區

用map.setCity(xx)可以通過中文城市名、adcode、citycode等設置地圖的中心點。（只支持中國境內）

設置/獲取地圖顯示范圍

通過map.getBounds()、map.setBounds()設置/獲取地圖顯示范圍

var bounds = map.getBounds();
document.querySelector("#ne").innerText = bounds.northeast.toString();
document.querySelector("#sw").innerText = bounds.southwest.toString();

var mybounds = new AMap.Bounds([116.319665, 39.855919], [116.468324,39.9756]);
map.setBounds(mybounds);

限制地圖顯示范圍

var limitBounds = map.getLimitBounds();// 獲取地圖限制區域信息
limitBounds.northeast.toString();
limitBounds.southwest.toString();
var bounds = map.getBounds(); // 獲取顯示范圍
map.setLimitBounds(bounds); // 限制地圖顯示范圍
map.clearLimitBounds(); // 取消限制
// 取消之后map.getLimitBounds()將獲取不到值

地圖的平移

除了鼠標、觸摸交互，通過map.panBy()和map.panTo()也可以移動地圖

 var map = new AMap.Map('container', {
    resizeEnable: true,
    zoom: 13,
    center: [116.397428, 39.90923]
});

// 使用AMap.event.addDomListener監聽DOM事件
AMap.event.addDomListener(document.getElementById('piexBtn'), 'click', function() {
    map.panBy(50, 100);// 平移多少 兩個都是正值就是往左上平移
});
AMap.event.addDomListener(document.getElementById('pantoBtn'), 'click', function() {
    map.panTo([116.405467, 39.907761]); // 平移到哪去
});

交互控制

通過map.setStatus()修改地圖的可拖拽、可縮放等狀態。

var mapOpts = {
    showIndoorMap: false, // 是否在有矢量底圖的時候自動展示室內地圖，PC默認true,移動端默認false
    resizeEnable: true, //是否監控地圖容器尺寸變化，默認值為false
    dragEnable: false, // 地圖是否可通過鼠標拖拽平移，默認為true
    keyboardEnable: false, //地圖是否可通過鍵盤控制，默認為true
    doubleClickZoom: false, // 地圖是否可通過雙擊鼠標放大地圖，默認為true
    zoomEnable: false, //地圖是否可縮放，默認值為true
    rotateEnable: false // 地圖是否可旋轉，3D視圖默認為true，2D視圖默認false
}

var map = new AMap.Map('container', mapOpts);

   //通過map.setStatus方法動態設置地圖狀態
map.setStatus({
    dragEnable: true,
    keyboardEnable: true,
    doubleClickZoom: true,
    zoomEnable: true,
    rotateEnable: true
});

獲取鼠標點擊經緯度

給地圖綁定click事`件，獲取鼠標位置的經緯度坐標。

• e.lnglat.getLng()：獲取經度
• e.lnglat.getLat()：獲取緯度

map.on('click', function(e) {
    document.getElementById("lnglat").value = e.lnglat.getLng() + ',' + e.lnglat.getLat()
});

注冊事件

對Map、覆蓋物等常用類，我們推薦直接使用這些類的對象的on、off成員方法來實現事件的簡單綁定和移除

• map.on ： 注冊事件，給Map或者覆蓋物對象注冊事件
• map.off ：移除事件綁定

使用AMap.event命名空間

• AMap.event.addDomListener ：注冊DOM對象事件
• AMap.event.addListener： 注冊對象事件
• AMap.event.addListenerOnce： 注冊對象事件 但事件只會被觸發一次，之后將自動移除
• AMap.event.removeListener： 刪除監聽事件
• AMap.event.trigger： 觸發非DOM事件

MapsEvent 對象規范

• lnglat: 發生事件時光標所在處的經緯度坐標。
• pixel: 發生事件時光標所在處的像素坐標。
• type: 事件類型。
• target: 發生事件的目標對象。

輸入自動提示 選擇自動定位

// 引入Autocomplete插件
<script src="https://webapi.amap.com/maps?v=1.4.12&key=您申請的key值&plugin=AMap.Autocomplete"></script>

<input type="text"  id="tipinput">

var auto = new AMap.Autocomplete({
    input: "tipinput"
});

AMap.event.addListener(auto, "select", select);//注冊監聽，當選中某條記錄時會觸發
function select(e) {
    if (e.poi && e.poi.location) {
        map.setZoom(15);
        map.setCenter(e.poi.location);
    }
}
// 事件對象e擁有poi和type兩個屬性

select事件的事件對象

地圖的熱點

通過isHotspot開啟地圖的熱點功能，并以

var map = new AMap.Map('container', {
    resizeEnable: true,
    center: [116.397428, 39.90923],
    zoom: 13,
    isHotspot: true
});
var placeSearch = new AMap.PlaceSearch();  //構造地點查詢類
var infoWindow=new AMap.AdvancedInfoWindow({}); //高級信息窗體，整合了周邊搜索、路線規劃功能
map.on('hotspotover', function(result) {
    placeSearch.getDetails(result.id, function(status, result) {
        if (status === 'complete' && result.info === 'OK') {
            placeSearch_CallBack(result);
        }
    });
});
//回調函數
function placeSearch_CallBack(data) { //infoWindow.open(map, result.lnglat);
    var poiArr = data.poiList.pois;
    var location = poiArr[0].location;
    infoWindow.setContent(createContent(poiArr[0]));
    infoWindow.open(map,location);
}
function createContent(poi) {  //信息窗體內容
    var s = [];
    s.push('<div class="info-title">'+poi.name+'</div><div class="info-content">'+"地址：" + poi.address);
    s.push("電話：" + poi.tel);
    s.push("類型：" + poi.type);
    s.push('<div>');
    return s.join("<br>"); // 返回一個html字符串
}

設置鼠標樣式

使用Map.setDefaultCursor設置地圖默認的鼠標樣式，用于自定義地圖等場景。

map.setDefaultCursor("pointer");

// "default"  默認箭頭
// "pointer"  指針
// "move"  可移動表示
// "crosshair"  十字線
// ...

覆蓋物的添加與移除

• new AMap.Marker() ：構造標記
• new AMap.Circle(): 構造矢量圓形
• map.add(mark / circle): 添加標記
• map.remove(mark / circle): 移除標記（與上接受相同的參數才能移除）
• map.setFitView()：有時候地圖上可視化元素較多，我們需要地圖調整合適的縮放等級和中心點，以保證所有元素都顯示其中時，我們可以調用setFitView()方法，以實現該效果。

var map = new AMap.Map('container', {
    resizeEnable: true,
    zoom:11,
    center: [116.397428, 39.90923]
});
    // 構造點標記
var marker = new AMap.Marker({
    icon: "https://webapi.amap.com/theme/v1.3/markers/n/mark_b.png", // 標記點圖片
    position: [116.405467, 39.907761] // 標記點位置
});
// 構造矢量圓形
var circle = new AMap.Circle({
    center: new AMap.LngLat("116.403322", "39.920255"), // 圓心位置
    radius: 1000,  //半徑
    strokeColor: "#F33",  //線顏色
    strokeOpacity: 1,  //線透明度
    strokeWeight: 3,  //線粗細度
    fillColor: "#ee2200",  //填充顏色
    fillOpacity: 0.35 //填充透明度
});
//事件綁定
document.querySelector("#add-marker").onclick = function() {
    map.add(marker);
    map.setFitView();
}
document.querySelector("#remove-marker").onclick = function() {
    map.remove(marker);
    map.setFitView();
}
document.querySelector("#add-circle").onclick = function() {
    map.add(circle);
    map.setFitView();
}
document.querySelector("#remove-circle").onclick = function() {
    map.remove(circle);
    map.setFitView();
}

圖層的添加與移除

// 構造官方衛星、路網圖層
var satelliteLayer = new AMap.TileLayer.Satellite();
var roadNetLayer =  new AMap.TileLayer.RoadNet();

//批量添加圖層
map.add([satelliteLayer, roadNetLayer]);

//事件綁定
document.querySelector("#add-satellite-layer").onclick = function() {
    map.add(satelliteLayer);
}

document.querySelector("#remove-satellite-layer").onclick = function() {
    map.remove(satelliteLayer);
}