每天记录一个知识点（vue中使用高德地图）

vue中使用vue-amap

不废话直接上过程（打卡：2020-12-18 ）

一、安装vue-amap

//建议使用vue封装好的amap
cnpm install vue-amap --save

二、在main.js中

// 引入地图
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'
});

三、使用

<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>

四、效果

笔记：

注册高德地图key
错误码说明
vue-amap api
高德地图开发api