前序準備
學習了解本文章時你需要提前，了解過或使用過 vue蒿囤、 es6客们、 npm市場。
本次的講解將會基于高德地圖官方推出的amap-jsapi-loader包
高德地圖開放平臺
高德的官方api文檔材诽，這個是必須要看的啦底挫！不然你做錘子的地圖，是吧脸侥！
第一步（默認你已經(jīng)建好了一個vue項目）
在你的項目中下載amap-jsapi-loader ,下載命令npm i @amap/amap-jsapi-loader安裝好后接著我這里的 或者npm包的那個介紹建邓，里面有使用方法，這里我就搬點會用到的過來
//某個js文件下 或者vue文件的script標簽里面
import AMapLoader from '@alife/amap-jsapi-loader';
//個人說明 AMapLoader .load()這個函數(shù)可以創(chuàng)建出高德地圖的實例睁枕，包括某些地圖的參數(shù)
AMapLoader.load({
"key": "youkey", // 申請好的Web端開發(fā)者Key官边，首次調(diào)用 load 時必填
"version": "2.0", // 指定要加載的 JSAPI 的版本，缺省時默認為 1.4.15
"plugins": [] // 需要使用的的插件列表外遇，如比例尺'AMap.Scale'等
"AMapUI": { // 是否加載 AMapUI注簿，缺省不加載
"version": '1.1', // AMapUI 缺省 1.1
"plugins":[], // 需要加載的 AMapUI ui插件
},
"Loca":{ // 是否加載 Loca， 缺省不加載
"version": '1.3.2' // Loca 版本跳仿，缺省 1.3.2
},
})
特別注意：AMapLoader.load這個函數(shù)返回的是一個promis對象诡渴，記得使用then
第二步（初次體驗 vue文件下）
現(xiàn)在我們創(chuàng)建一個vue文件，當然你可以隨意在一個vue文件下菲语。
<template>
<div>
<div id="container"></div>
</div>
</template>
<script>
import AMapLoader from '@alife/amap-jsapi-loader';
export default{
created() {
AMapLoader.load({
key:"你的高德key",
}).then((AMap)=>{
map = new AMap.Map('container');
}).catch(e=>e);
}
}
</script>
<style>
#container {
height: 500px;
width: 100%;
}
</style>
好了妄辩，你現(xiàn)在可以看到一個地圖在項目上了 記得填key值
第三步，自己寫的山上，感覺用的很好
上面有說過AMapLoader.load這個函數(shù)是一個promis對象眼耀，此時接觸了怎么多vue項目的你，肯定會反應(yīng)出 promis?那不就是api佩憾！api?那不就是拋出一個方法的js文件畔塔！
很好，js文件拋出一個方法就這樣寫出來了鸯屿，就像寫api一樣輕松
import AMapLoader from "@amap/amap-jsapi-loader";
export function initMap() {
return AMapLoader.load({
key: "yourKey", // 申請好的Web端開發(fā)者Key澈吨，首次調(diào)用 load 時必填
version: "1.4.15", // 指定要加載的 JSAPI 的版本，缺省時默認為 1.4.15
plugins: [], // 需要使用的的插件列表寄摆，如比例尺'AMap.Scale'等
AMapUI: {
// 是否加載 AMapUI谅辣，缺省不加載
version: "1.1", // AMapUI 缺省 1.1
plugins: [], // 需要加載的 AMapUI ui插件
},
Loca: {
// 是否加載 Loca， 缺省不加載
version: "1.3.2", // Loca 版本婶恼，缺省 1.3.2
},
})
}
我把這個文件放到了utils/下并且命名為initamap.js
然后關(guān)于地圖的實例所有的參數(shù)桑阶，就可以在這個文件下去編寫柏副。
根據(jù)amap-jsapi-loader寫實例的參數(shù)
js拋出文件有了，下一步不用說也是vue文件引入啦
<template>
<div>
<div id="container"></div>
</div>
</template>
<script>
import { initMap } from "./utils/initMap";
export default {
async created() {
//拿到AMap 實例,這個就是包含了所有高德地圖方法的實例
const AMap = await initMap().then(r=>r).catch(e=>e);
const map = new AMap .Map("container")
}
}
</script>
<style>
#container {
height: 500px;
width: 100%;
}
</style>
溫馨提示：new AMap .Map("container")中的container是你templant標簽里面 map 容器的id類名蚣录，同時這個盒子記得設(shè)置寬高
到了這里 你就可以根據(jù)高德地圖的例子cv東西了
我這里以三維地圖的3D地圖為例子
看到官方例子的js怎么寫了嗎割择，是不是和我將實例提出來很像？像就對了萎河！
二話不說荔泳，將上面的搬下來
<template>
<div>
<div id="container"></div>
</div>
</template>
<script>
import { initMap } from "./utils/initMap";
export default {
async created() {
const AMap = await initMap().then(r=>r).catch(e=>e);
const map = new AMap .Map("container",{
resizeEnable: true,
rotateEnable:true,
pitchEnable:true,
zoom: 17,
pitch:80,
rotation:-15,
viewMode:'3D',//開啟3D視圖,默認為關(guān)閉
buildingAnimation:true,//樓塊出現(xiàn)是否帶動畫
expandZoomRange:true,
zooms:[3,20],
center:[116.333926,39.997245]
})
}
}
</script>
<style>
#container {
height: 500px;
width: 100%;
}
</style>
發(fā)現(xiàn)差異了嗎？我只需要將官方api例子里的js代碼cv過來就ojbk了虐杯。至此地圖對你來說就是翻官方的api例子就行了玛歌。同時你也學會了在vue中使用高德地圖的所有方法。
