创建vue工程并将vue-amap导入到vue工程中 本文章参考
vue-amap的guthub链接 高德开放平台官网
注意：如果以及由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看项目是否成功创建。
前提：第一小节的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
在刚刚添加的.vue文件的中具有以下一段代码，可修改此代码以修改地图大小。 .amap-wrapper { width: 800px; height: 800px; float: right; }
其中width为地图的宽度，height为地图发高度，float表示地图靠左边还是靠右边
width可以修改为100%以使地图的宽度等于页面的宽度，但是height参数不能修改为100%或者其他百分值，否则会无法显示地图，经测试在height为975px时是近似等于页面大小，width也可以修改其值为 px。
感谢kindCoder的VUE——vue-amap简单使用给我的启发和提示。 最近刚刚开始学习使用vue-amap，如果有兴趣大家可以在评论区一起交流交流。 转载的时候请注明出处！
