前端用Antd或者element加vue2配合高德地图实现拖拽选择位置，搜索选址，放大缩小等

1.准备工作，下包

npm i @amap/amap-jsapi-loader

 2.组件代码

<template>

  <j-modal title="标题" :width="640"  :visible="visible" @cancel="handleCancel"

    :bodyStyle="{ maxheight: 500 + 'px' }" footer>

    <div id="amap-container">

      <a-row class="margin-top-10 address">

        当前地址是： {{ formattedAddress }}

        <el-button size="small" type="primary" @click="handelSave">确认使用该地址</el-button>

      </a-row>

      <a-input id="search-input" v-model="searchValue" class="input-with" placeholder="请输入地址进行搜索，按回车键确认" clearable

        @clear="handelclearInput" @keyup.native.enter="handelSearch">

        <a-button slot="append" size="small" type="primary"  @click="handelSearch">搜索</a-button>

      </a-input>

      <div id="searchResultPanel" />

     

      <div id="custom-amap" />

    </div>

  </j-modal>

</template>

<script>

window._AMapSecurityConfig = {

    securityJsCode:'密钥',

  }

import AMapLoader from '@amap/amap-jsapi-loader'

export default {

  name: 'AMap',

  props: {

    defaultValue: {

      type: String,

      default: ''

    },

    lat: {

      type: String | Number,

      default: ''

    },

    lon: {

      type: String | Number,

      default: ''

    }

  },

  data() {

    return {

      defaultCity: '苏州',

      // 地图对象

      map: null,

      // 定位默认地址 | 搜索后选择的地址

      formattedAddress: '填写默认的地址',

      // 地址对应的经纬度信息

      position: {

        address:'填写默认的地址 ',

        lat:默认地址的纬度（数字）,

        lng:默认地址的经度（数字）

      },

      // 检索关键字

      searchValue: '',

      // 检索函数对象

      placeSearch: null,

      // 检索结果数据数据

      searchInfoList: [],

      // 地图标记

      marker: '',

      // 地址解析（正向）

      geocoder: '',

      // 地址名称

      name: '',

      visible: false,

    };

  },

  watch: {

    defaultValue() {

      this.formattedAddress = this.defaultValue;

     

    }

  },

  created(){

      this.formattedAddress = this.defaultValue?this.defaultValue:'填写默认地址'

  },

  mounted() {

    // 初始化地图页面

    this.initMap();

  },

  beforeDestroy() {

    // 销毁地图

    this.map.destroy();

  },

  methods: {

    // 取消

    handleCancel() {

      this.visible = false

    },

    //   初始化地图页面

    initMap() {

      const that = this

      AMapLoader.load({

        key:"自己申请",

        version:"1.4.15",

      }).then(AMap=>{

        console.log(AMap)

        that.map = new AMap.Map('custom-amap', {

          resizeEnable: true,

          zoom: 16,

          center: that.lat&&that.lon?[that.lon,that.lat]:[默认经度（数字）, 默认纬度（数字）],

          showMarker:false,

          showButton:false

        });

        // 添加工具栏

        that.map.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView'], () => {

          // 工具条

          const toolbar = new AMap.ToolBar();

          // 比例尺

          const scale = new AMap.Scale();

          // 显示鹰眼

          // const overView = new AMap.OverView();

          that.map.addControl(toolbar);

          that.map.addControl(scale);

          // that.map.addControl(overView);

        });

        // 添加maker

        that.setMaker();

        // 添加鼠标点选地图选择地址

        that.addAmapGeocoder();

        // 添加定位

        that.addAMapGeolocation();

        // 添加检索提示

        that.addAMapAutocompletePlaceSearch();

      }).catch(err=>{

        console.log(err)

      })

     

    },

    // 添加maker

    setMaker() {

      this.marker = new AMap.Marker();

      this.map.add(this.marker);

      // 添加解析地理位置插件

      this.map.plugin('AMap.Geocoder', () => {

        // 异步加载插件

        this.geocoder = new AMap.Geocoder({

          city: this.defaultCity, // 默认：“全国”

          radius: 500 // 范围，默认：500

        });

      });

    },

    // 添加鼠标点选地图选择地址

    addAmapGeocoder() {

      // 添加maker

      this.setMaker();

      // 地图添加点击事件

      this.map.on('click', e => {

        console.log(e)

        const lnglat = [e.lnglat.lng, e.lnglat.lat];

        this.marker.setPosition(lnglat);

        this.geocoder.getAddress(lnglat, (status, result) => {

          if (status === 'complete' && result.regeocode) {

            const res = result.regeocode;

            const data = {

              // 地址名称

              address: res.formattedAddress,

              // 纬度lat

              lat: lnglat[1],

              // 经度lng

              lng: lnglat[0]

            };

            this.formattedAddress = res.formattedAddress;

            this.position = data;

          } else {

            alert(JSON.stringify(result));

          }

        });

      });

    },

    // 添加自动定位

    addAMapGeolocation() {

      this.map.plugin('AMap.Geolocation', () => {

        const geolocation = new AMap.Geolocation({

          // 是否使用高精度定位，默认：true

          enableHighAccuracy: true,

          // 设置定位超时时间，默认：无穷大

          timeout: 10000,

          // 定位按钮的停靠位置的偏移量，默认：Pixel(10, 20)

          buttonOffset: new AMap.Pixel(200, 200),

          //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：false

          zoomToAccuracy: true,

          //  定位按钮的排放位置,  RB表示右下

          buttonPosition: 'RB'

        });

        // 获取当前位置

        geolocation.getCurrentPosition();

        // 添加定位当前城市成功监听

        AMap.event.addListener(

          geolocation,

          'complete',

          this.onCurrentPositionComplete

        );

        // 添加定位当前城市发生错误监听

        AMap.event.addListener(

          geolocation,

          'error',

          this.onCurrentPositionError

        );

      });

    },

    // 添加检索提示检索

    addAMapAutocompletePlaceSearch() {

      // 自动提示

      this.map.plugin('AMap.Autocomplete', () => {

        const auto = new AMap.Autocomplete({

          city: this.defaultCity,

          input: 'search-input'

        });

        // 添加检索监听

        AMap.event.addListener(auto, 'select', this.onSelectAutocomplete);

      });

      // 检索服务

      AMap.service(['AMap.PlaceSearch'], () => {

        // 构造地点查询类

        this.placeSearch = new AMap.PlaceSearch({

          type: '', // 兴趣点类别

          pageSize: 5, // 单页显示结果条数

          pageIndex: 1, // 页码

          city: this.defaultCity, // 兴趣点城市

          citylimit: false, // 是否强制限制在设置的城市内搜索

          map: this.map, // 展现结果的地图实例

          panel: 'searchResultPanel', // 结果列表将在此容器中进行展示。

          autoFitView: true // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围

        });

      });

      // 添加检索监听

      AMap.event.addListener(

        this.placeSearch,

        'listElementClick',

        this.onSelectSearch

      );

    },

    // 定位当前城市成功回调

    onCurrentPositionComplete(res) {

      // 添加maker

      this.setMaker();

      const lnglat = [res.position.lng, res.position.lat];

      this.marker.setPosition(lnglat);

      console.log(res, 'res');

      this.formattedAddress = res.formattedAddress;

      this.position = res.position;

    },

    // 定位当前城市发生错误回调

    onCurrentPositionError(err) {

      console.log(err);

    },

    // 按钮触发检索

    handelSearch() {

      this.placeSearch.search(this.searchValue, (status, info) => {

        this.searchInfoList = info.poiList.pois;

      });

    },

    // 选择自动提示数据事件回调

    onSelectAutocomplete(e) {

      this.searchValue = e.poi.name;

      this.handelSearch();

    },

    // 选择检索数据结果事件回调

    onSelectSearch(e) {

      const res = e.data;

      this.formattedAddress = res.cityname + res.adname + res.address;

      this.name = res.name;

      this.position = res.location;

    },

    // 清除input里的值，清除搜索结果，再次初始化map

    handelclearInput() {

      document.querySelector('#searchResultPanel').innerHTML = '';

    },

    // 保存当前选择的地址,分发事件

    handelSave() {

      this.searchValue = this.formattedAddress;

      const { lat, lng } = this.position;

      const data = {

        name: this.name,

        // 地址名称

        address: this.formattedAddress,

        // 纬度lat

        lat,

        // 经度lng

        lng

      };

      console.log(data)

      this.$emit('getPosition', data);

      this.visible = false

    }

  }

};

</script>

<style lang="scss">

#amap-container {

  .el-input__clear {

    line-height: 34px;

    // top: 20px;

  }

  #custom-amap {

    height: 500px;

    width: 580px;

    margin-top: 10px;

    border: 1px solid #ccc;

  }

  .input-with {

    // position: fixed;

    // top: 40px;

    z-index: 1;

    width: 580px;

  }

  .address {

    margin-bottom: 10px;

    color: #373737;

  }

}

.amap-sug-result {

  z-index: 99999;

}

.amap_lib_placeSearch{

  width: 580px;

  height: 170px;

  overflow-y: auto;

}

</style>

3.组件使用

  <amap ref="amapModel" :lat="postForm.latitude" :lon="postForm.longitude" :default-value="postForm.detailedAddress" @getPosition="getPosition" />

 data() {

    return {

      postForm: {

        detailedAddress: '',

        longitude: '',

        latitude: ''

      },}}

 methods: {

 //打开地图选择

 golocate(){

      this.$refs.amapModel.visible = true

      this.$refs.searchValue = null

      this.$nextTick(()=>{

        this.$refs.amapModel.initMap()

      })

    },

// 获取地址信息

    getPosition({ address, lat, lng, name }) {

      this.postForm.detailedAddress = address;

      this.postForm.longitude = lng;

      this.postForm.latitude = lat;

       //写自己的逻辑

    },

 }