首先, 要去 高德地图申请开发者key(戳这里)
然后进行安装 :
npm install vue-amap --save
main.js
<script>
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
// 这里需要进行Nginx配置, 详细方法上面的地址里有
serviceHost: '您的代理服务器域名或地址/_AMapService',
// 需要使用的的插件列表
plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
// 指定要加载的 JSAPI 的版本,缺省时默认为 1.4.15
v: '1.4.4'
});
</script>
vue文件
<template>
<div class="map">
<el-amap :dragEnable="true" :zoomEnable="true" class="amap-box" :zoom="zoom" vid="amap-vue" :position="center" :center="center">
<el-amap-marker :position="center" :icon="icon"></el-amap-marker>
</el-amap>
</div>
</template>
<script>
export default {
data(){
return {
center: ['坐标1','坐标2'], // 地图上的点
icon: '自定义的图标src',
zoom: '15', //初始化地图级别
}
},
}
</script>
结果如图: