6.Vue使用高德地图

1.安装插件:
npm install vue-amap --save

2.脚本初始化,main.js中
import Vue from 'vue';
import AMap from 'vue-amap';

import App from './App.vue';
import router from './router';

Vue.use(AMap);
AMap.initAMapApiLoader({
key: 'ebb3310e602e7027987911af5e30be56',
plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType']
});

const app = new Vue({ // eslint-disable-line
router,
render: h => h(App)
}).$mount('#app');

 

3.使用
<template lang="html">
<div id="amap-cointainer">

</div>
</template>

<script>
import { lazyAMapApiLoaderInstance } from 'vue-amap';
export default {
mounted() {
lazyAMapApiLoaderInstance.load().then(() => {
this.map = new AMap.Map('amap-cointainer', {center: new AMap.LngLat(121.59996, 31.197646)});
});
}
};
</script>

<style lang="css">
#amap-cointainer {
height: 200px;
}
</style>