vue-amap 高德地图实现地图选址带搜索功能

vue-amap 高德地图实现地图选址带搜索功能

组件文档地址：https://elemefe.github.io/vue-amap/#/zh-cn/introduction/install
第一步：安装配置
在main.js

import VueAMap from 'vue-amap'
Vue.use(VueAMap)
VueAMap.initAMapApiLoader({
  key: '***************', // 这里写你申请的高德地图的key
  plugin: ['AMap.Autocomplete', 'AMap.Geocoder', 'AMap.Geolocation'],
  v: '1.4.15',
  uiVersion: '1.1'
})

第二步：项目用的是vue antd弹窗组件以下代码复制粘贴直接就能用！

<template>
    <a-modal v-model="isShow" :title="'地图选址'" :width="780">
      <div class="map-container">
        <div v-if="isShow" class="amap-wrapper">
          <el-amap-search-box
            class="search-box"
            :default="searchValue"
            :search-option="searchOption"
            :on-search-result="onSearchResult"
          ></el-amap-search-box>
          <el-amap class="amap-box" :zoom="zoom" :center="center" :events="events" :mapStyle="mapStyle">
            <el-amap-marker v-for="(marker, i) in markers" :key="i" :position="marker"></el-amap-marker>
          </el-amap>
        </div>
        <div class="aaddress">您选择的地址是：{{address}}</div>
      </div>
      <template slot="footer">
        <a-button @click="close">取消</a-button>
        <a-button type="primary" @click="getLnglat">确定</a-button>
      </template>
    </a-modal>
</template>
<script>
import { AMapManager } from 'vue-amap'
const amapManager = new AMapManager()
export default {
  data () {
    return {
      isShow: false,
      address: '北京市',
      searchValue: '',
      zoom: 12,
      center: [116.401969, 39.922461],
      amapManager,
      mapStyle: 'amap://styles/8b6be8ec497009e17a708205348b899a',
      markers: [[116.401969, 39.922461]],
      searchOption: {
        city: '全国',
        citylimit: false
      },
      lng: 116.401969,
      lat: 39.922461,
      events: {
        init: (o) => {},
        moveend: () => {},
        zoomchange: () => {},
        click: (e) => {
          const that = this
          const { lng, lat } = e.lnglat
          this.center = [lng, lat]
          this.markers = [[lng, lat]]
          this.lng = lng
          this.lat = lat
          console.log(e)
          // 这里通过高德 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) {
                that.address = result.regeocode.formattedAddress
              }
            }
          })
        }
      }
    }
  },
  methods: {
    addMarker: function () {
      this.markers = []
      const lng = 121.5 + Math.round(Math.random() * 1000) / 10000
      const lat = 31.197646 + Math.round(Math.random() * 500) / 10000
      this.markers = [[lng, lat]]
    },
    onSearchResult (pois) {
      // const latSum = 0
      // const lngSum = 0
      if (pois.length > 0) {
        const center = pois[0]
        this.lng = center.lng
        this.lat = center.lat
        this.zoom = 17
        this.address = center.name
        this.center = [center.lng, center.lat]
        this.markers = [[center.lng, center.lat]]
      }
    },
    getLnglat () {
      this.isShow = false
      this.center = [116.401969, 39.922461]
      this.zoom = 12
      this.searchValue = ''
      // this.$emit('getLnglat', this.lng, this.lat, this.address)
      this.$emit('getLnglat', this.address)
    },
    close () {
      this.isShow = false
      this.zoom = 12
      this.searchValue = ''
      this.center = [116.401969, 39.922461]
    }
  }
}
</script>

<style lang="scss">
.map-container {
  width: 100%;
  height: 500px;
  .amap-wrapper {
    width: 100%;
    height: 400px;
  }
  .search-box {
    transform: translateY(-20px);
    border: 1px solid #d9d9d9;
  }
  .aaddress {
    position: absolute;
    bottom: 100px;
  }
}
</style>

遇到的问题：
控制台报错：new AMap.Geocoder 未定义或者找不到，
查了很多文章都没有解决都是说main.js的plugin配置方法就行了，试了一下一下不好使。

解决办法：
在组件内直接加script引入

 <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=你的高德code&plugin=AMap.Geocoder,AMap.Autocomplete,AMap.Geolocation,AMap.PlaceSearch"></script>

完美解决！敲完收工！