vue-cli的项目中搭建vue-amap来使用高德地图

第一步：

npm install vue-amap --save

第二步： 

main.js中进行配置

import AMap from 'vue-amap';
Vue.use(AMap);

  // 初始化vue-amap
AMap.initAMapApiLoader({
  // 高德key
  key: '4365df5e295713cc4d8dcbdcef934a0f',
  // 插件集合 （插件按需引入）
  // plugin: ['AMap.Geolocation']
  plugin: ['AMap.Geocoder','AMap.Geolocation','AMap.Autocomplete', 'AMap.PlaceSearch', 'AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType', 'AMap.PolyEditor', 'AMap.CircleEditor']
});

第三步：

在页面中进行使用，以下提供的代码的功能包括显示点标记，提供搜索并更新点标记，地图点击后获取地址经纬度与地址。

<template>
    <div class="amap-page-container">
        <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult"></el-amap-search-box>
        <el-amap
        vid="amapDemo"  
        :center="center"
        :zoom="zoom"  
        class="amap-demo"
        :events="events">
        <el-amap-marker :position="marker.position" :events="marker.events" :visible="marker.visible" :draggable="marker.draggable"></el-amap-marker>
        </el-amap>
        <div class="toolbar">position: [{{ lng }}, {{ lat }}] address: {{ address }}</div>
    </div>
</template>

<style>
.el-vue-amap-container.amap-demo{
    width: 800px;
    height: 500px;
}
.search-box {
  position: absolute;
  top: 25px;
  left: 20px;
}
.amap-page-container {
  position: relative;
}
</style>
<script>
    module.exports = {
      data: function() {
        let self = this;
        return {
          zoom: 20,
          center: [121.52014, 31.198862],
          searchOption: {
            city: '全国',
            citylimit: true
          },
          marker: {
            position: [121.52014, 31.198862]
          },
          address: '',
          events: {
            click(e) {
              let { lng, lat } = e.lnglat;
              self.lng = lng;
              self.lat = lat;
              self.marker.position = [lng, lat]
              // 这里通过高德 SDK 完成。
              var geocoder = new AMap.Geocoder({
                radius: 1000,
                extensions: "all"
              });        
              geocoder.getAddress([lng ,lat], function(status, result) {
                if (status === 'complete' && result.info === 'OK') {
                  if (result && result.regeocode) {
                    self.address = result.regeocode.formattedAddress;
                    self.$nextTick();
                  }
                }
              });        
            }
          },
          lng: 0,
          lat: 0
        };
      },
      methods: {
        onSearchResult(pois) {
          console.log(pois,'pois')
          var lng = pois[0].lng
          var lat = pois[0].lat
          this.center = [lng, lat];
          this.marker.position = [lng, lat]
        }
      }
    };
</script>