vue+antdesign 高德地图根据名称选点功能，并去除logo 封装组件

高德地图申请key及密钥

注册账号并申请key官方地址

1. 在vue项目index.html文件中引入

<script type="text/javascript">
        window._AMapSecurityConfig = {
            securityJsCode:'xxxxx',  // 自己申请的密钥
        }
</script>
  <script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.15&key=自己申请的key&plugin=AMap.Geolocation,AMap.Weather,AMap.MarkerClusterer,AMap.DistrictSearch,AMap.DistrictLayer,AMap.Autocomplete,AMap.PlaceSearch"></script>

2.在components文件夹下新建coordinatePick/index.vue，文件内容如下（文件中crec是基于antdesign封装的组件用法和antdesign一样）

<template>
  <div>
    <crec-modal v-drag title="选择坐标" v-model="open" width="50%">
      <crec-form-model
        ref="ruleForm"
        :model="queryParams"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <crec-form-model-item label="坐标获取结果">
          <crec-input
            v-model="queryParams.longitudeAndLatitude"
            placeholder="坐标获取结果"
            disabled
            ref="inputRef"
            allowClear
          />
        </crec-form-model-item>
        <crec-form-model-item label="按关键字搜索">
          <crec-select
            v-model="queryParams.keyword"
            showSearch
            placeholder="按关键字搜索"
            style="width: 100%"
            :defaultActiveFirstOption="false"
            :showArrow="false"
            :filterOption="false"
            @search="remoteMethod"
            @change="selectChang"
            :notFoundContent="null"
          >
            <crec-select-option
              v-for="item in searchArr"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >{{ item.label }}</crec-select-option>
          </crec-select>
        </crec-form-model-item>
      </crec-form-model>
      <div class="mapContent" id="pointMap"></div>
      <template slot="footer">
        <crec-button @click="open = false">关闭</crec-button>
        <crec-button type="primary" @click="handleSubmit">保存</crec-button>
      </template>
    </crec-modal>
  </div>
</template>
<script>
import AMap from 'AMap'
export default {
  name: 'CoordinatePick',
  data () {
    return {
      queryParams: {
        keyword: '',
        longitudeAndLatitude: ''
      },
      fetching: false,
      searchArr: [],
      Map: null,
      open: false,
      labelCol: { span: 4 },
      wrapperCol: { span: 20 }
    }
  },
  methods: {
    initMap (longitudeAndLatitude) {
      this.queryParams.keyword = ''
      this.open = true
      this.$nextTick(() => {
        if (this.Map) {
          this.Map.clearMap()
        }
        this.Map = new AMap.Map('pointMap', {
          // 设置地图容器id
          // viewMode: "3D",    //是否为3D地图模式
          draggable: false,
          zoom: 11 // 初始化地图级别
          // center: [105.602725, 37.076636], //初始化地图中心点位置
        })
        if (longitudeAndLatitude) {
          // 之前有坐标，需要处理回显
          this.queryParams.longitudeAndLatitude = longitudeAndLatitude
          // 创建一个 Marker 实例：
          const marker = new AMap.Marker({
            draggable: false,
            position: new AMap.LngLat(
              Number(longitudeAndLatitude.split(',')[0]),
              Number(longitudeAndLatitude.split(',')[1])
            ) // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          })
          this.Map.add(marker)
        }
        this.Map.on('click', (e) => {
          console.log(e, e.lnglat.lng, e.lnglat.lat, 'eeeeeeeeeeeee')
          this.Map.clearMap()
          this.queryParams.longitudeAndLatitude = e.lnglat.lng + ',' + e.lnglat.lat
          const marker = new AMap.Marker({
            draggable: false,
            position: new AMap.LngLat(e.lnglat.lng, e.lnglat.lat) // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
          })
          this.Map.add(marker)
        })
        this.Map.setFitView()
      })
    },
    remoteMethod (query) {
      console.log(query, 'query')
      if (query) {
        AMap.plugin('AMap.Autocomplete', () => {
          // 实例化Autocomplete
          var autoOptions = {
            city: '全国'
          }
          var autoComplete = new AMap.Autocomplete(autoOptions)
          autoComplete.search(query, (status, result) => {
            if (result && result.info === 'OK') {
              this.searchArr = result.tips
                .map((v) => {
                  if (v.location) {
                    return {
                      label: v.name,
                      value: v.location.lng + ',' + v.location.lat
                    }
                  }
                })
                .filter((ele) => ele)
            }
          })
        })
      } else {
        this.searchArr = []
      }
    },
    handleSubmit () {
      this.$emit('lngLatChange', this.queryParams.longitudeAndLatitude)
      this.open = false
    },
    selectChang () {
      if (this.Map) {
        this.Map.clearMap()
      }
      this.queryParams.longitudeAndLatitude = this.queryParams.keyword
      // 创建一个 Marker 实例：
      const marker = new AMap.Marker({
        draggable: false,
        position: new AMap.LngLat(this.queryParams.keyword.split(',')[0], this.queryParams.keyword.split(',')[1]) // 经纬度对象，也可以是经纬度构成的一维数组[116.39, 39.9]
      })
      this.Map.add(marker)
      this.Map.setFitView()
    },
    handleCancel (e) {
      console.log('Clicked cancel button')
      this.visible = false
    }
  }
}
</script>
<style lang="less" scoped>
.mapContent {
  width: 100%;
  height: 500px;
}
/deep/ .amap-logo {
  display: none !important;
  visibility: hidden !important;
}

/deep/ .amap-copyright {
  display: none !important;
  visibility: hidden !important;
}
</style>

3.在需要的地方引用，注册

<coordinatePick ref="coordinatePickRef" @lngLatChange="lngLatChange"></coordinatePick> // 模板中
import coordinatePick from '@/components/coordinatePick'
components: {
    coordinatePick
  }
  // 方法里面
lngLatChange (lnglat) {
      console.log(lnglat) // 这里就是返回的用逗号拼接好的经纬度坐标
    }