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

那么這里就涉及一點，用什么地圖？

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

廢話不多說，上圖。

首先在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;  }

總結

以上是生活随笔為你收集整理的高德地图之实例开发（一）加载地图的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。