nuxt中使用高德地图sdk

1.在plugins中新建vue-map.js

import Vue from 'vue';
//引入高德地图
import VueAMap from 'vue-amap';

Vue.use(VueAMap);

//初始化
//if(!Vue.prototype.$isServer){
  VueAMap.initAMapApiLoader({
    // 高德key
    key: 'key', // 高德 Key
    // 插件集合 （插件按需引入）
    plugin: [
      'AMap.Autocomplete', // 输入提示插件
      'AMap.PlaceSearch', // POI搜索插件
      'AMap.Scale', // 右下角缩略图插件 比例尺
      'AMap.OverView', // 地图鹰眼插件
      'AMap.ToolBar', // 地图工具条
      'AMap.MapType', // 类别切换控件，实现默认图层与卫星图、实施交通图层之间切换的控制
      'AMap.PolyEditor', // 编辑 折线多，边形
      'AMap.CircleEditor', // 圆形编辑器插件
      'AMap.Geocoder',
      'AMap.Geolocation', // 定位控件，用来获取和展示用户主机所在的经纬度位置
      'AMap.MarkerClusterer'],
    v: '1.4.15', // 插件
    uiVersion: '1.0.11' // ui版本号，也是需要写
  })
//}

2.在nuxt.config.js中加入

plugins: [
    {
      src:"~/plugins/element-ui",
      ssr:false//关闭服务端
    },
    {
      src:"~/plugins/vue-map",
      ssr:false
    },
    {
      src:"~/plugins/echarts"
    },
    {
      src:'~/plugins/nuxt-swiper',
      ssr:false,
    },{
      src:'~/plugins/api',
      ssr:false,
    }
  ],

3.页面中使用

  <template>
  <el-dialog top="5vh" :append-to-body="true" title="获取地图坐标" :visible.sync="dialogVisible" :before-close="handleClose" width="70%">
    <div class="amap-page-container" style="width: 100%;">
      <el-row :gutter="20">
        <el-col :span="12" style="margin-bottom: 50px">
          <el-amap-search-box class="search-box" :search-option="searchOption" :on-search-result="onSearchResult" />
        </el-col>
        <el-col :span="12">
            当前坐标: {{ lng }}, {{ lat }}
            address: {{ address }}
            <el-button type="primary" @click="select">确定</el-button>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-amap
            vid="amap_postion"
            class="amap-demo"
            :center="mapCenter"
            :zoom="zoom"
            :events="events"
            :plugin="plugin"
          >
            <el-amap-marker v-for="(marker,index) in markers" :key="index" :position="marker.position" />
          </el-amap>
        </el-col>
      </el-row>
    </div>
  </el-dialog>
</template>

<script>

export default {
  name: 'amappage',

  props: {
    dialogVisible: {
      type: Boolean,
      default: true
    },
    // makerPosition: {
    //   type: Array,
    //   default: () => {
    //     return []
    //   }
    // }
    makerPosition: {
      type: String,
      default: true
    }
  },
  data: function() {
    const self = this
    return {
      zoom: 12,
      center: [0, 0],
      address: '长春市政府',
      markers: [
        {
          position: this.makerPosition.split(',')
        }
      ],
      searchOption: {
        city: '吉林',
        citylimit: false
      },
      mapCenter: [125.325964, 43.818773],
      plugin: [{
        pName: 'ToolBar',
        events: {
          init(instance) {
          }
        }
      }],
      events: {
        click(e) {
          const { lng, lat } = e.lnglat
          self.lng = lng
          self.lat = lat
          self.markers[0].position = [lng, lat]
          console.log("初始化地图");
          // 这里通过高德 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
    }
  },
  created() {
    console.log("坐标");
    console.log(this.makerPosition);
    this.mapCenter = this.makerPosition.split(',')
    console.log(this.mapCenter);
    this.lng = this.mapCenter[0]
    this.lat = this.mapCenter[1]
  },
  methods: {
    onSearchResult(pois) {
      let latSum = 0
      let lngSum = 0
      if (pois.length > 0) {
        pois.forEach(poi => {
          const { lng, lat } = poi
          lngSum += lng
          latSum += lat
        })
        const center = {
          lng: lngSum / pois.length,
          lat: latSum / pois.length
        }
        this.mapCenter = [center.lng, center.lat]
      }
    },
    handleClose(done) {
      this.$emit('update:dialogVisible', false)
      this.$nextTick(() => {
        done()
      })
    },
    select() {
      this.$emit('update:dialogVisible', false)
      this.$emit('update:makerPosition', this.markers[0].position.join(','))
    }
  }

}
</script>

<style scoped>
.amap-demo {
  height: 450px;
}
.search-box {
  z-index: 999;
  margin-bottom: 20px;
}
.amap-page-container {
  position: relative;
}
</style>

4.页面中调用

<el-form-item label="坐标" prop="landBusinessInfoVO.coordinate">
            <el-input v-model="ruleForm.landBusinessInfoVO.coordinate" placeholder="地图标注后，自动获取坐标" disabled style="width: 90%;float: left"></el-input>
            <img src="../../../static/image/fbtd/map.png" style="width: 36px;float: right" @click="getPostion" />
          </el-form-item>
<amappage ref="showPos" v-if="positionShow" :maker-position.sync="ruleForm.landBusinessInfoVO.coordinate" :dialog-visible.sync="positionShow" />

定义data

positionShow: false,
getPostion() {
        this.positionShow = true
      },