高德地图选点地图打点 vue+element ui

效果

 

代码： public/index.html引入，在</body>标签上 lng是经度 lat是纬度

1.<!--高德地图js-->
<script type="text/javascript" src="https://webapi.amap.com/maps?v=1.4.14&key=2d5879db229ad4cca377758bc00ecd93&plugin=AMap.Driving"></script>

2.父页面引用的对象弹框

<el-dialog title="选择地址" :visible.sync="mapOpen" width="1000px" append-to-body :closeOnClickModal=false>
  <Amap v-if="mapOpen" ref="map" :longitude="form.lng" :latitude="form.lat" />
  <div v-show="!isReadOnly" slot="footer" class="dialog-footer">
    <el-button type="primary" @click="getMap">确 定</el-button>
    <el-button @click="hideMap">取 消</el-button>
  </div>
</el-dialog>

getMap() {
  this.form.lng = this.$refs.map.position.lng;
  this.form.lat = this.$refs.map.position.lat;
  // this.form.bizAddr = this.$refs.map.position.adress;
  this.mapOpen = false;
},
hideMap() {
  this.mapOpen = false;
}

3.引用的页面

<template>
  <div id="amap-container">
    <el-input
      id="search-input"
      v-model="searchValue"
      class="input-with"
      placeholder="请输入地址"
      clearable
      @clear="handelclearInput"
      @keyup.native.enter="handelSearch"
    >
      <el-button
        slot="append"
        size="small"
        type="primary"
        icon="el-icon-search"
        @click="handelSearch"
      >搜索</el-button
      >
    </el-input>

    <div id="searchResultPanel" />
    <el-row style="margin-top: 10px;" class="margin-top-10 address">
      当前地址是： {{ formattedAddress }}
    </el-row>
    <el-row style="margin-top: 10px;" class="margin-top-10 address">
      经度：{{position.lng}} <span style="margin-left: 2%"> 纬度：{{position.lat}} </span>
    </el-row>

    <div style="height:390px;" id="custom-amap" />
  </div>
</template>

<script>
  /*const AMap = window.AMap;*/
  export default {
    name: 'AMap',
    props: {
      defaultValue: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        defaultCity: '镇江',
        // 地图对象
        map: null,
        // 定位默认地址 | 搜索后选择的地址
        formattedAddress: null,
        // 地址对应的经纬度信息
        position: {},
        // 检索关键字
        searchValue: '',
        // 检索函数对象
        placeSearch: null,
        // 检索结果数据数据
        searchInfoList: [],
        // 地图标记
        marker: '',
        // 地址解析（正向）
        geocoder: '',
        // 地址名称
        name: ''
      };
    },
    watch: {
      defaultValue() {
        this.searchValue = this.defaultValue;
      }
    },
    // 父组件传来的参数
    props: [
      'longitude',
      'latitude',
      // 'bizAddr'
    ],
    mounted() {
      // 初始化地图页面
      this.initMap();
    },
    beforeDestroy() {
      // 销毁地图
      this.map.destroy();
    },
    methods: {
      //   初始化地图页面
      initMap() {
        this.map = new AMap.Map('custom-amap', {
          resizeEnable: true,
          zoom: 50,
        });
        // 添加工具栏
        this.map.plugin(['AMap.ToolBar', 'AMap.Scale', 'AMap.OverView'], () => {
          // 工具条
          const toolbar = new AMap.ToolBar();
        // 比例尺
        const scale = new AMap.Scale();
        // 显示鹰眼
        const overView = new AMap.OverView();
        this.map.addControl(toolbar);
        this.map.addControl(scale);
        this.map.addControl(overView);
      });

        // 添加maker
        //this.setMaker();
        // 添加鼠标点选地图选择地址
        this.addAmapGeocoder();
        // 添加定位
        this.addAMapGeolocation();
        // 添加检索提示
        this.addAMapAutocompletePlaceSearch();
      },
      // 添加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: 1000 // 范围，默认：500
        });
      });
      },
      // 添加鼠标点选地图选择地址
      addAmapGeocoder() {
        // 添加maker
        this.setMaker();
        // 地图添加点击事件
        this.map.on('click', 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 = {
            // 地址名称
            adress: 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(10, 20),
            //  定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：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
        let lnglat = [];
        if(this.longitude != null){
          lnglat = [this.longitude, this.latitude];
          // this.formattedAddress = this.bizAddr;
          const pos = {"lng":this.longitude, "lat":this.latitude};
          this.position = pos;
        }else{
          lnglat = [res.position.lng, res.position.lat];
          this.formattedAddress = res.formattedAddress;
          this.position = res.position;
        }
        //this.setMaker();
        this.marker.setPosition(lnglat);
        this.map.setCenter(lnglat);
      },
      // 定位当前城市发生错误回调
      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
        };
        this.$emit('getPosition', data);
      },*/
    }
  };
</script>

<style lang="scss">
  #amap-container {
    .el-input__clear {
      line-height: 34px;
      // top: 20px;
    }
    #custom-amap {
      height: 60vh;
      width: 100%;
      margin-top: 10px;
      border: 1px solid #ccc;
    }
    .input-with {
      // position: fixed;
      // top: 40px;
      z-index: 1;
      width: 580px;
    }
    .address {
      color: #373737;
    }
  }
  .amap-sug-result {
    z-index: 99999;
  }
</style>