vue-amap基本使用

1.如果是第一次使用，需要登录 高德地图官网 去申请一个key, 已经申请过key的可以跳过这一步；

2. 项目中引入vue-amap:

npm install vue-amap --save

> 在main.js中 vue-amap插件

import VueAMap from 'vue-amap'; //引入高德地图

// 高德地图
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: '你自己的key',
  plugin: [                // 这里根据自己项目按需引入插件
    'Autocomplete',
    'PlaceSearch',
    'Scale',
    'OverView',
    'ToolBar',
    'MapType',
    'PolyEditor',
    'AMap.CircleEditor'
  ]
});

> 在你自己的amap.vue 组件中

<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: 100%;
  width: 100%;
}
</style>

这样基本的地图就出来了；还有很多功能可以直接查看文档：vue-amap文档

高德地图官网
vue-amap官网