高德地圖之實例開發（一）加載地圖

相信做地圖開發的親們，剛接觸肯定第一反映，地圖？怎麼插入頁面，怎麼寫。。。。然後就是百度。

那麼這裏就涉及一點，用什麼地圖？

這裏我給大家講解的是高德地圖詳解，隨後也會分享我自己的實例項目給到大家。

廢話不多說，上圖。

首先在html中我們需要一個盛裝地圖的容器，說白就是建個div給地圖用，大家都知道div也就是個盒子

<div >

</div>
隨後肯定就是要咬對這個div的樣式進行修改

#mapContainer{ flex: 1; font-family: 微軟雅黑 sans-serif;}
那麼現在我們進行頁面，頁面當然什麼都沒有啦，因爲我們啥也沒有設置也沒有寫
接下來，也是非常簡單的，但是不熟悉的小白們肯定比較焦頭爛額，這裏我也會詳解

 

 

打開百度地圖選擇高德地圖開放平臺，別告訴我你不會百度，那咱還是別混前端了，浪費時間。。。。迴歸正題

 

如果你有賬號直接登陸，如果你沒有地圖開發者賬號請申請後再登陸，然後點擊控制檯

 

點擊應用管理，真心話，高德地圖key的申請可比百度的方便。。。。

點擊添加key，後面我就不詳細講，高德還是很貼心的，將文檔寫的還是非常清晰地

接下來我們生成密鑰了，拿到地圖的key我們就要幹我們的大事了，也就是要生成我們的地圖

一看script標籤大家都不陌生，方便大家借鑑，我寫下來了，需要注意的就是，key的書寫位置，只要將？位置替換你所申請的key，那麼久ok了

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=？"></script>
接下來就是最關鍵，如何調取地圖

var map = new AMap.Map('mapContainer', {
    zoom: 15,//縮放層級
    center:[113.947659,22.533588],//當前地圖中心點
    resizeEnable: true//調整窗口大小
});

這裏我有這變量map，方便我後面功能的實現，正常情況大家直接new AMap.Map，大家一定要注意，後面一定要寫上正確的我們裝地圖盒子的正確id名稱，
參數中，層級可以根據自己的需要，center如果大家不進行設置，那麼地圖是按照默認當前你所在城市進行地圖的展示。明白我意思？
就是說你不設center，你在深圳就顯示深圳地圖，你在上海就顯示上海地圖，你在哪就顯示哪裏的地圖，懂？

 

全部代碼：

html部分：

<div >

</div>

css部分：

#mapContainer{ flex: 1; font-family: 微軟雅黑 sans-serif;}

script部分：

<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=？"></script>
<script>

var map = new AMap.Map('mapContainer', {
    zoom: 15,//縮放層級
    center:[113.947659,22.533588],//當前地圖中心點
    resizeEnable: true//調整窗口大小
});

</script>
很多人不是很喜歡搞得上面的logo，直接css加上

.amap-logo {  right: 0 !important;  left: auto !important;  display: none;  }.amap-copyright {  right: 70px !important;  left: auto !important;  }