如何在vue中引用高德地图

1、先使用脚手架生成一个vue项目，然后安装在项目里安装vue-amap，安装命令如下：

npm install vue-amap --save

2、安装完成后，打开main.js文件引入以下代码：

import VueAMap from "vue-amap";

Vue.use(VueAMap);

VueAMap.initAMapApiLoader({

 key: "97a78fdd9a741cd14f435fee2402bd16",

 plugin: [

   "AMap.Autocomplete",

   "AMap.PlaceSearch",

   "AMap.Scale",

   "AMap.OverView",

   "AMap.ToolBar",

   "AMap.MapType",

   "AMap.PolyEditor",

   "AMap.CircleEditor",

   "AMap.Geocoder"

 ],

 // 默认高德 sdk 版本为 1.4.4

 v: "1.4.4"

});

3、在HomeView.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: [105.602725, 37.076636], // 定位

      center: [105.602725, 37.076636],   // 地图初始化视图中心点

      plugin: [                          // 这里放扩展的插件

        {        

          pName: 'Scale',                // 比例尺

          events: {

            init(instance) {

               console.log(instance);

            }

          }

        }

      ]

    };

  },

  mounted() {},

  created() {

  },

  methods: {}

};

</script>

<style scoped>

#amap {

  height: 100vh;

  width: 100vw;

}

</style>

4、在控制台使用命令：npm run serve 启动项目后，打开页面发现地图已经生成