這次項(xiàng)目需要用到地圖API矛缨，我們來學(xué)習(xí)一下在Vue中調(diào)用高德地圖的API
介紹
Vue-amap-基于Vue2.0的高德地圖的地圖組件,主頁https://elemefe.github.io/vue-amap/#/
-
首先在http://lbs.amap.com/ 注冊高德開發(fā)者賬號
注冊
注冊成功 選擇申請Key
- 新建應(yīng)用牵触，輸入信息
-
新增Key
填寫隨便填
在項(xiàng)目中使用
- 還是使用我們上一個(gè)項(xiàng)目垒在，那個(gè)MintUI的，不是有一個(gè)附近的板塊么，我們就用這個(gè)
- cd到項(xiàng)目目錄
- 安裝Vue-amap
# npm install vue-amap --save
安裝成功
- 在main.js引入
import AMap from 'vue-amap';
Vue.use(AMap);
AMap.initAMapApiLoader({
key: 'XXXXX',//剛剛開發(fā)者申請哪里的key
plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType']
});
- 在Near.vue中調(diào)用
<template>
<div id="near">
<div id="amap-main">
</div>
</div>
</template>
<script type="text/ecmascript-6">
import { lazyAMapApiLoaderInstance } from 'vue-amap';
export default{
name:'near',
mounted() {
lazyAMapApiLoaderInstance.load().then(() => {
this.map = new AMap.Map('amap-main', {center: new AMap.LngLat(121.59996, 31.197646)});
});
}
}
</script>
<style lang="stylus">
#near
#amap-main
height 300px
</style>
效果
結(jié)束
var author = {
name:'丁波',
GitHub:'dingbo1028',
University:'BNUZ'
}
