高德地圖使用的基礎(chǔ)方法

第一步：申請(qǐng)高德地圖key碼

申請(qǐng)地址：http://lbs.amap.com/dev/key

申請(qǐng)高德地圖key碼

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

把key“您申請(qǐng)的key值”替換成申請(qǐng)的key碼

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

第三步：添加容器、設(shè)定容器樣式

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

第四步：開(kāi)始創(chuàng)建地圖

1. 生成一副簡(jiǎn)單地圖只需要一句代碼，將我們剛剛創(chuàng)建的div的id傳給Map的構(gòu)造函數(shù)即可，這個(gè)時(shí)候API將根據(jù)用戶所在的城市自動(dòng)進(jìn)行地圖中心點(diǎn)和級(jí)別的設(shè)定：var map = new AMap.Map('container');
2. 設(shè)定地圖中心和級(jí)別
   我們一般需要給地圖按需設(shè)定中心點(diǎn)和坐標(biāo)等屬性，這里可以通過(guò)兩種方式，第一種，直接在地圖初始化的時(shí)候傳入相關(guān)屬性，center屬性的值可以使經(jīng)緯度的二元數(shù)組，也可以是AMap.LngLat對(duì)象，要求經(jīng)度值在前，緯度值在后：

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

也可以在地圖初始化過(guò)后，任何需要的地方通過(guò)方法來(lái)改變地圖的中心點(diǎn)和級(jí)別

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

Map基本參數(shù)表

3. 點(diǎn)標(biāo)記的創(chuàng)建、添加與刪除

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

標(biāo)記點(diǎn)

第五步：添加信息窗口

信息窗體一樣可以在創(chuàng)建的時(shí)候設(shè)定內(nèi)容、偏移量、大小等屬性，offset是信息窗體的錨點(diǎn)以position為基準(zhǔn)位置的像素偏移量，content除了使用字符串的形式外也可以直接設(shè)定為某個(gè)創(chuàng)建好的DOM節(jié)點(diǎn)：

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

使用高級(jí)信息窗體

// 高級(jí)信息框
AMap.plugin('AMap.AdvancedInfoWindow',function(){
  var infowindow = new AMap.AdvancedInfoWindow({
    content: '<h3 class="title">高德地圖</h3>'+
             '<div class="content">高德是中國(guó)領(lǐng)先的數(shù)字地圖內(nèi)容、'+
             '導(dǎo)航和位置服務(wù)解決方案提供商。</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  創(chuàng)建控件并添加
    var toolBar = new AMap.ToolBar();
    var scale = new AMap.Scale();
    map.addControl(toolBar);
    map.addControl(scale);
})
//要移除控件的時(shí)候調(diào)用地圖的removeControl方法即可
//map.removeControl(toolBar);

添加工具條和比例尺

第七步：添加鷹眼

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

鷹眼控件

第八步：室內(nèi)地圖

1. 場(chǎng)景一：使用默認(rèn)室內(nèi)地圖

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


2. 場(chǎng)景二：?jiǎn)为?dú)或者疊加顯示某個(gè)商場(chǎng)的室內(nèi)地圖
   要實(shí)現(xiàn)上述功能，首先引入室內(nèi)地圖插件，初始化室內(nèi)底圖對(duì)象，通過(guò)設(shè)置地圖的layers屬性（這里將地圖設(shè)置為只顯示室內(nèi)地圖）。然后通過(guò)設(shè)定室內(nèi)建筑ID使地圖顯示到指定的室內(nèi)區(qū)域，這里我們展示朝陽(yáng)大悅城：

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

            });
        });
    })

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

商場(chǎng)室內(nèi)地圖