一、获取key值
注册或登录高德地图官网
打开应用管理》我的应用,右上角“创建新应用”,填写之后就会生成自己的key
二、下载依赖包
npm install vue-amap --save
main.js中引入
import VueAMap from 'vue-amap'; //引入高德地图
// 高德地图
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
key: '你自己的key',
plugin: [ // 这里根据自己项目按需引入插件
'Autocomplete',
'PlaceSearch',
'Scale',
'OverView',
'ToolBar',
'MapType',
'PolyEditor',
'AMap.CircleEditor'
]
});
在需要展示地图的页面中
<template>
<div id="amap">
<el-amap vid="amap" class="amap" :center="center" :plugin="plugin">
<el-amap-marker vid="component-marker" :position="position" />
</el-amap>
</div>
</template>
<script>
export default {
data() {
return {
position: [116.481485, 39.990464], // 定位
center: [116.481485, 39.990464], // 地图初始化视图中心点
plugin: [ // 这里放扩展的插件
{
pName: 'Scale', // 比例尺
events: {
init(instance) {
console.log(instance);
}
}
}
]
};
},
mounted() {},
created() {
},
methods: {}
};
</script>
<style scoped>
#amap {
height: 100vh;
width: 100vw;
}
</style>