这次项目需要用到地图API，我们来学习一下在Vue中调用高德地图的API
介绍
Vue-amap-基于Vue2.0的高德地图的地图组件,主页https://elemefe.github.io/vue-amap/#/
-
首先在http://lbs.amap.com/ 注册高德开发者账号
注册
注册成功 选择申请Key
- 新建应用，输入信息
-
新增Key
填写随便填
在项目中使用
- 还是使用我们上一个项目，那个MintUI的，不是有一个附近的板块么，我们就用这个
- cd到项目目录
- 安装Vue-amap
# npm install vue-amap --save
安装成功
- 在main.js引入
import AMap from 'vue-amap';
Vue.use(AMap);
AMap.initAMapApiLoader({
key: 'XXXXX',//刚刚开发者申请哪里的key
plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType']
});
- 在Near.vue中调用
<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>
效果
结束
var author = {
name:'丁波',
GitHub:'dingbo1028',
University:'BNUZ'
}
