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

那么這里就涉及一點(diǎn)，用什么地圖？

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

廢話不多說，上圖。

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

<div id="mapContainer">

</div>
隨后肯定就是要咬對這個div的樣式進(jìn)行修改

#mapContainer{ flex: 1; font-family: 微軟雅黑 sans-serif;}
那么現(xiàn)在我們進(jìn)行頁面，頁面當(dāng)然什么都沒有啦，因?yàn)槲覀兩兑矝]有設(shè)置也沒有寫
接下來，也是非常簡單的，但是不熟悉的小白們肯定比較焦頭爛額，這里我也會詳解

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

如果你有賬號直接登陸，如果你沒有地圖開發(fā)者賬號請申請后再登陸，然后點(diǎn)擊控制臺

點(diǎn)擊應(yīng)用管理，真心話，高德地圖key的申請可比百度的方便。。。。

點(diǎn)擊添加key，后面我就不詳細(xì)講，高德還是很貼心的，將文檔寫的還是非常清晰地

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

一看script標(biāo)簽大家都不陌生，方便大家借鑒，我寫下來了，需要注意的就是，key的書寫位置，只要將？位置替換你所申請的key，那么久ok了

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

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

這里我有這變量map，方便我后面功能的實(shí)現(xiàn)，正常情況大家直接new AMap.Map，大家一定要注意，后面一定要寫上正確的我們裝地圖盒子的正確id名稱，
參數(shù)中，層級可以根據(jù)自己的需要，center如果大家不進(jìn)行設(shè)置，那么地圖是按照默認(rèn)當(dāng)前你所在城市進(jìn)行地圖的展示。明白我意思？
就是說你不設(shè)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],//當(dāng)前地圖中心點(diǎn)
    resizeEnable: true//調(diào)整窗口大小
});

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

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

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。