高德地圖使用的基礎方法

第一步：申請高德地圖key碼

申請地址：http://lbs.amap.com/dev/key

申請高德地圖key碼

第二步：引入高德地圖JavaScript API入口腳本:

把key“您申請的key值”替換成申請的key碼

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=您申請的key值"></script><script id="amap_main_js" src="http://webapi.amap.com/maps/main?v=1.3&key=您申請的key值&m=http,map,anip,layers,overlay0,brender,mrender,mouse,vectorlayer,overlay,wgl,sync&vrs=1.3.21.1" type="text/javascript"></script>

第三步：添加容器、設定容器樣式

#container {width:300px; height: 180px; } 
<div id="container"></div> 

第四步：開始創建地圖

1. 生成一副簡單地圖只需要一句代碼，將我們剛剛創建的div的id傳給Map的構造函數即可，這個時候API將根據用戶所在的城市自動進行地圖中心點和級別的設定：var map = new AMap.Map('container');
2. 設定地圖中心和級別
   我們一般需要給地圖按需設定中心點和坐標等屬性，這里可以通過兩種方式，第一種，直接在地圖初始化的時候傳入相關屬性，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基本參數表

3. 點標記的創建、添加與刪除

//點標記的創建、添加
var marker =  new AMap.Marker({
 position: [116.480983, 39.989628],
 map:map
});
//也可以在創建之后按需更改這些屬性:
var marker =  new AMap.Marker();
marker.setMap(map);
//移除的話，同樣使用setMap方法,不傳參數或者傳入空參數：
marker.setMap();

標記點

第五步：添加信息窗口

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

//信息窗體顯示
var infowindow = new AMap.InfoWindow({
  content:  '<h3>北京</h3><div>北京首都歡迎你！</div>',
  offset:  new AMap.Pixel(0, -30),
  size: new AMap.Size(230,0)
})
//監聽事件讓信息窗體顯示
infowindow.open(map,new AMap.LngLat(116.480983, 39.989628));
  // 也可以通過事件監聽，在需要的時候才將信息窗體顯示出來,比如在marker被單擊的時候顯示
var clickHandle = AMap.event.addListener(marker, 'click', function() {
  infowindow2.open(map, marker.getPosition())
})
//信息框移除
// AMap.event.removeListener(clickHandle);

使用高級信息窗體

// 高級信息框
AMap.plugin('AMap.AdvancedInfoWindow',function(){
  var infowindow = new AMap.AdvancedInfoWindow({
    content: '<h3 class="title">高德地圖</h3>'+
             '<div class="content">高德是中國領先的數字地圖內容、'+
             '導航和位置服務解決方案提供商。</div>',
    offset: new AMap.Pixel(0, -30),
    asOrigin:false
  });
  infowindow.open(map,new AMap.LngLat(116.480983, 39.989628));
})
//綁定事件信息窗體顯示
infowindow.open(map,new AMap.LngLat(116.480983, 39.989628));
var clickHandle = AMap.event.addListener(marker, 'click', function() {
    infowindow2.open(map, marker.getPosition())
})

信息框

第六步：添加工具條和比例尺

AMap.plugin(['AMap.ToolBar','AMap.Scale'],function(){
    //TODO  創建控件并添加
    var toolBar = new AMap.ToolBar();
    var scale = new AMap.Scale();
    map.addControl(toolBar);
    map.addControl(scale);
})
//要移除控件的時候調用地圖的removeControl方法即可
//map.removeControl(toolBar);

添加工具條和比例尺

第七步：添加鷹眼

// 顯示鷹眼
AMap.plugin([AMap.OverView'],
    function(){
        map.addControl(new AMap.OverView({isOpen:true}));
});

鷹眼控件

第八步：室內地圖

1. 場景一：使用默認室內地圖

function init(){
   var map = new AMap.Map('container', {
       resizeEnable: true,
       center: [117.000923, 36.675807],
       zoom: 6
   });
   // 添加室內地圖
   map.on('indoor_create',function(){
       map.indoorMap.showIndoorMap('B000A856LJ',5);
   })
}


2. 場景二：單獨或者疊加顯示某個商場的室內地圖
   要實現上述功能，首先引入室內地圖插件，初始化室內底圖對象，通過設置地圖的layers屬性（這里將地圖設置為只顯示室內地圖）。然后通過設定室內建筑ID使地圖顯示到指定的室內區域，這里我們展示朝陽大悅城：

    map.on('indoor_create',function(){
        // 商場一樓
        map.indoorMap.showIndoorMap('B000A856LJ',1);
        AMap.plugin(['AMap.IndoorMap'], function() {
            var indoorMap = new AMap.IndoorMap({alwaysShow:true});
            //設定在沒有矢量底圖的時候也顯示，默認情況下室內圖僅在有矢量底圖的時候顯示
            var map = new AMap.Map('mapDiv', {
                resizeEnable: true,
                showIndoorMap:false,//隱藏地圖自帶的室內地圖圖層
                layers:[indoorMap]

            });
        });
    })

我們可以在showIndoorMap方法里同時指定室內地圖的展示樓層為商鋪對應的樓層，比如聯想專賣店在朝陽大悅城的五層: indoorMap.showIndoorMap('B0FFFAB6J2',5); 我們也可以將室內地圖和其他圖層疊加使用，只需要修改上面示例代碼中map的layers屬性或者調用其他圖層的setMap方法： layers:[indoorMap,new AMap.TileLayer()] //或者 new AMap.TileLayer().setMap(map);

商場室內地圖