在VUE中导入高德地图组件模块(vue-amap)

写在开头

创建vue工程并将vue-amap导入到vue工程中
本文章参考

高德地图组件官方链接

vue-amap的guthub链接
高德开放平台官网

1、创建VUE项目

注意：如果以及由VUE项目或者会创建VUE项目可以跳过此步。项目文件夹不能使用vue-amap，否则后面会出错。

前提：已经配置好了环境，安装了node.js npm yarn vue-cli等
https://blog.csdn.net/muzidigbig/article/details/80490884

1、cmd中键入vue ui命令以新建项目，按照指导一步一步进行新建，此处新建项目时项目文件夹的名称不能使用vue-amap！！！
2、安装完成之后切换到项目文件夹下，在目录处键入cmd，如下图所示。
3、在打开的终端中输入npm run dev看项目是否成功创建。

2、在vue项目中导入高德地图组件

前提：第一小节的VUE项目已经创建完成并测试通过
1、安装vue-amap：在项目文件夹下的cmd中键入npm install vue-amap --save。不加 --save会导致缺少一些文件！！！
2、在高德开放平台上申请一个KEY。高德开放平台官网。注册完账号之后点击控制台—>应用管理—>我的应用—>创建新应用即可。

3、将项目文件夹用VSCode打开。
4、添加代码，导入地图组件，在下面的key处将your key改为你申请的key
/src/main.js:

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import VueAMap from 'vue-amap'


Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
//修改下面的key值
  key: 'your key',
  plugin: ['AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor'],
  // 默认高德 sdk 版本为 1.4.4
  v: '1.4.4'
});
Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

/src/App.vue 或者 其他任一.vue文件中

​ 注意：如果在其他的.vue文件中添加时请删除代码中原来就在App.vue文件中的内容

<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link>
    </div>

    <div class="amap-wrapper">
      <el-amap
        class="amap-box"
        vid="amap-vue"
        :zoom="zoom"
        :center="center"
      ></el-amap>
    </div>
    <router-view />
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      zoom: 11,
      center: [112.5862, 37.8268],
    };
  },
};
</script>

<style>
.amap-wrapper {
  width: 800px;
  height: 800px;
  float: right;
}
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}

#nav {
  padding: 30px;
}

#nav a {
  font-weight: bold;
  color: #2c3e50;
}

#nav a.router-link-exact-active {
  color: #42b983;
}
</style>

5、在文件夹目录的cmd终端中输入npm run dev即可观看网页效果，如果提示找不到dev，则可以使用npm run看可以用其他的指令打开，比如npm run serve

3、修改地图尺寸

在刚刚添加的.vue文件的中具有以下一段代码，可修改此代码以修改地图大小。
.amap-wrapper {
width: 800px;
height: 800px;
float: right;
}

其中width为地图的宽度，height为地图发高度，float表示地图靠左边还是靠右边

width可以修改为100%以使地图的宽度等于页面的宽度，但是height参数不能修改为100%或者其他百分值，否则会无法显示地图，经测试在height为975px时是近似等于页面大小，width也可以修改其值为 px。

4、最后效果

5、写在结尾

感谢kindCoder的VUE——vue-amap简单使用给我的启发和提示。
最近刚刚开始学习使用vue-amap，如果有兴趣大家可以在评论区一起交流交流。
转载的时候请注明出处！