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

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

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

這裏我給你們講解的是高德地圖詳解，隨後也會分享我本身的實例項目給到你們。

廢話很少說，上圖。

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

<div id="mapContainer">

</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 id="mapContainer">

</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;  }