19.调用高德地图

*官网https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install

1.安装依赖

npm install vue-amap --save

2.在main.js中引入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'
});

3.使用

<template>
    <div>
      <el-amap ref="map" vid="amapDemo" :center="center" :zoom="zoom" class="amap-demo">
      </el-amap>
    </div>
</template>
<script>
    export default {
        name:"My",
        data(){
            return{
                center: [114.504267,30.552742],
                zoom: 12,
            }
        },
        mounted(){ 
        }  
      }
</script>
<style lang="scss" scoped>
.amap-demo {
    height: 400px;
}
</style>