vue 使用 vue-amap 生成高德地图

首先说一下，什么是vue-amap，
vue-amap 是 基于 Vue 2.x 与高德的地图组件，数据状态与地图状态单向绑定，开发者无需关心地图的具体操作
vue-amap 官网 https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install

按照其官方文档里面的安装教程，进行 安装 vue-amap

npm install vue-amap --save

然后，在main.js中 引入 vue-amap

import Vue from 'vue';
import App from './App.vue';

//引入 vue-amap
import VueAMap from 'vue-amap';
Vue.use(VueAMap);
VueAMap.initAMapApiLoader({
  key: 'your amap 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'
});

new Vue({
  el: '#app',
  render: h => h(App)
})

然后，新建 vue页面，复制下面代码，就能初步显示高德地图啦

<template>
  <div id="app">
    <h3 class="title">{{ msg }}</h3>
    <div class="amap-wrapper">
      <el-amap class="amap-box" :vid="'amap-vue'"></el-amap>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      msg: 'vue-amap向你问好！'
    }
  }
}
</script>

<style>
.amap-wrapper {
  width: 500px;
  height: 500px;
}
</style>

如图：

在 vue-amap 的官方文档里面，有更多的好看的样式，但是不建议直接 完全复制vue-amap给的一些样式的代码，因为复制之后运行不起来，那怎么办呢？

一般呢，就复制它给的样式的代码的 3-6行，然后再复制它的 script 下 data 里面的 一些所对应的一些属性
如图所示

图片大小的缘由并没有截全，自己复制的时候一定要对应上 这个里面的 一些属性，千万要复制完全，不然有可能效果不显示！

对了，里面涉及的一些，经纬度与地址之间的转化，看我另一篇文章
https://blog.csdn.net/ZPeng_Yan/article/details/106382999