申請JSAPI的開發者key

引入高德地圖JavaScript API檔案:

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

建立地圖容器

在頁面body裡你想展示地圖的地方建立一個div 容器，並指定id標識:

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

指定容器大小

按照需要設定地圖容器的大小，確保大小合適,比如用CSS這樣設定它:

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

建立地圖

設定地圖的中心點和級別

我們一般需要給地圖按需設定中心點和座標等屬性，這裡可以通過兩種方式，第一種，直接在地圖初始化的時候傳入相關屬性，center屬性的值可以使經緯度的二元陣列，也可以是AMap.LngLat物件，要求經度值在前，緯度值在後：

    var map = new AMap.Map('container',{
        zoom: 10,
        center: [116.39,39.9]
    });

也可以在地圖初始化過後，任何需要的地方通過方法來改變地圖的中心點和級別

    var map = new AMap.Map('container');
    map.setZoom(10);
    map.setCenter([116.39,39.9]);
 

map基本引數：

新增點標記

建立好地圖之後，我們就可以在地圖上新增點標記了，用來標註任何使用者感興趣的位置和資訊，這裡使用到了AMap.Marker這個類。

點標記的建立與新增

同地圖一樣，點標記可以在建立的時候設定位置等屬性，如果設定了map屬性的話，marker點將被立即新增到地圖上：

    var marker = new AMap.Marker({
        position: [116.480983, 39.989628],
        map:map
    });

也可以在建立之後按需更改這些屬性:

    var marker = new AMap.Marker();
    marker.setMap(map);

點標記的移除

移除的話，同樣使用setMap方法,不傳引數或者傳入空引數：

    marker.setMap();

新增資訊窗體

我們也可以用資訊窗體InfoWindow類來向用戶展示一些更詳細的資訊，比如點選一個點標記後，通過資訊窗體來展示這個點標記在哪裡

資訊窗體的建立與設定

資訊窗體一樣可以在建立的時候設定內容、偏移量、大小等屬性，offset是資訊窗體的錨點以position為基準位置的畫素偏移量，content除了使用字串的形式外也可以直接設定為某個建立好的DOM節點：

 var infowindow = new AMap.InfoWindow({
     content: '<h3>高德地圖</h1><div>高德是中國領先的數字地圖內容、導航和位置服務解決方案提供商。</div>',
     offset: new AMap.Pixel(0, -30),
     size:new AMap.Size(230,0)
})

也可以在建立之後按需更改這些屬性:

    infowindow.setSize(new AMap.Size(150,50));
    var contentDiv = document.createElement('div');
    contentDiv.innerText='我是資訊窗體';
    infowindow.setContent(contentDiv);

如何開啟資訊窗體

我們可以在資訊窗體建立之後立即呼叫其open方法將它顯示在需要的位置：

infowindow.open(map,new AMap.LngLat(116.480983, 39.989628));

也可以通過事件監聽，在需要的時候才將資訊窗體顯示出來,比如在marker被單擊的時候顯示

var clickHandle = AMap.event.addListener(marker, 'click', function() {
    infowindow2.open(map, marker.getPosition())
})

當不再需要點選marker顯示資訊窗體這個功能的時候，可以通過如下方式移除事件繫結

AMap.event.removeListener(clickHandle);

使用高階資訊窗體

除了普通的資訊窗體，我們還提供了封裝了周邊搜尋和路線規劃功能在內的高階資訊窗體，要使用高階資訊窗體，首先需要通過plugin方法載入該外掛，然後就可以和普通訊息窗體一樣進行建立和打開了。如果為高階資訊窗體制定了panel屬性，將在以panel的值為id的div上顯示周邊搜尋或者路線規劃的結果，如果需要對高階資訊窗體和panel內容的樣式進行修改，可以對相應classname的css進行重寫：

AMap.plugin('AMap.AdvancedInfoWindow',function(){
  var infowindow = new AMap.AdvancedInfoWindow({
    content: '<h3 class="title">高德地圖</h1>'+
             '<div class="content">高德是中國領先的數字地圖內容、'+
             '導航和位置服務解決方案提供商。</div>',
    offset: new AMap.Pixel(0, -30),
    asOrigin:false
  });
  infowindow.open(map,new AMap.LngLat(116.480983, 39.989628));
})

新增工具條和比例尺

高德地圖JSAPI提供了大量豐富的功能控制元件和服務外掛，下面我們來給上面做好的地圖新增兩個常用的控制元件，工具條和比例尺。

新增

新增控制元件的時候首先需要載入外掛,同時需要多個外掛的時候第一個引數可以設定為控制元件名稱的陣列

AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){
    //TODO  建立控制元件並新增
})

在回撥函式裡我們來進行控制元件的生成和新增:

AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){
    var toolBar = new AMap.ToolBar();
    var scale = new AMap.Scale();
    map.addControl(toolBar);
    map.addControl(scale);
})

移除

要移除控制元件的時候呼叫地圖的removeControl方法即可

map.removeControl(toolBar);