使用高德地图封装vue选址组件

一、使用地图前需要到高德地图官网申请key，申请时注意根据自己需求选择服务

高德地图有自己的选址组件，https://m.amap.com/picker/?key=（您的Key）, 但它有几个缺点，一是无法改变样式，二是选择地址后没有反馈状态，用户不知道自己有没有选择成功。于是决定使用高德地图的AMap.Geolocation（定位），AMap.PlaceSearch（地点搜索）插件，自己封装一个满足项目需求的选址组件出来。

二、实现效果如下:

地址选择

地址搜索

三、封装选址组件

1、先在index.html引入高德js

在index.html页面加入<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.4.4&key='你的key值'"></script>

2.创建文件名为CustomChooseAddress.vue的组件，写入以下代码

<template>
  <div class="page-main">
    <div class="flex-box">
      <el-input
        v-model="searchKey"
        size="mini"
        prefix-icon="el-icon-search"
        @input="search"
        placeholder="写字楼/小区/学校等">
      </el-input>
    </div>
    <div class="map-div" v-show="!searchKey">
      <div id="container"></div>
      <div class="poi-card" v-loading="loading">
        <div class="list-item" v-for="(item,index) in lists" :key="index"
             :style="{color:selectedAddress.id === item.id ? '#408CFF' : '',background:selectedAddress.id === item.id ? '#F3F6FE' : ''}"
             @click="chooseAddress(item)">
          <i class="el-icon-location-outline icon-location"></i>
          <div class="right">
            <div class="name">{{item.name}}</div>
            <div class="location">{{item.address}}</div>
          </div>
        </div>
      </div>
    </div>
    <div class="search-list" v-show="searchKey" v-loading="loading">
      <div class="list-item" v-for="(item,index) in searchList" :key="index"
           @click="chooseSearch(item)">
        <i class="el-icon-location-outline icon-location"></i>
        <div class="right">
          <div class="name">{{item.name}}</div>
          <div class="location">{{item.address}}</div>
        </div>
      </div>
      <no-data-box
        style="position: absolute;top: 50%;left:50%;transform: translate(-50%,-50%);"
        :icon-width="180"
        v-if="noSearchShow"
        not-data-desc="暂无搜索结果"
      ></no-data-box>
    </div>
  </div>
</template>

<script>

  export default {
    name: 'CustomChooseAddress',
    props: {
      chooseData: {
        type: Object,
        default: getAddressDto()
      }
    },
    computed: {
      selectedAddress: {
        get() {
          return Object.assign({}, this.chooseData);
        },
        set(val) {
          this.$emit('update:chooseData', val);
        }
      }
    },
    data() {
      return {
        myMap: null, // 地图对象
        center: null, // 地图中心点坐标
        searchKey: '', // 搜索值
        lists: [], // 地点列表
        searchList: [], // 搜索结果列表
        marker: '', // 标记
        loading: false,
        noSearchShow: false, // 无搜索结果提示，无搜索结果时会显示暂无搜索结果
        getGeolocationOver: false // 是否完成定位
      };
    },
    methods: {
      /**
       * @author: Wang Jun
       * @create: 2022/5/17 11:04
       * @description: 初始化地图
       */
      initMap() {
        const that = this;
        that.myMap = new AMap.Map('container', {
          zoom: 15, // 级别
          mapStyle: 'amap://styles/normal', // 设置地图的显示样式
          center: this.center // 设置地图中心点
        });
        // 获取初始中心点并赋值
        let currentCenter = that.myMap.getCenter(); // 此方法是获取当前地图的中心点
        // 创建标记
        that.marker = new AMap.Marker({
          position: new AMap.LngLat(currentCenter.lng, currentCenter.lat)
        });
        // 将创建的点标记添加到已有的地图实例：
        that.myMap.add(that.marker);
        if (!that.getGeolocationOver) {
          that.myMap.plugin('AMap.Geolocation', () => {
            const geolocation = new AMap.Geolocation({
              enableHighAccuracy: true, // 是否使用高精度定位，默认:true
              timeout: 5000, // 5s
              buttonPosition: 'LB', // 定位按钮的停靠位置
              buttonOffset: new AMap.Pixel(10, 20), // 定位按钮与设置的停靠位置的偏移量，默认：Pixel(10, 20)
              zoomToAccuracy: true // 定位成功后是否自动调整地图视野到定位点
            });
            this.loading = true;
            geolocation.getCurrentPosition((status, result) => {
              // 由于众多浏览器已不再支持非安全域的定位请求，为保位成功率和精度，请升级您的站点到HTTPS
              if (status === 'complete' && result.info === 'SUCCESS') {
                const lat = result.position.lat;
                const lng = result.position.lng;
                this.center = [lng, lat];
              } else {
                // 将获取到的中心点的纬度经度赋值给data的center
                that.center = [currentCenter.lng, currentCenter.lat]; 
              }
              that.getGeolocationOver = true;
              // 根据地图中心点查附近地点，此方法在下方
              that.centerSearch();
            })
          })
        } else {
          that.center = [currentCenter.lng, currentCenter.lat];
          // 根据地图中心点查附近地点，此方法在下方
          that.centerSearch();
        }
        // 更新数据
        // 监听地图移动事件
        that.myMap.on('mapmove', () => {
          // 获取地图中心点
          currentCenter = that.myMap.getCenter();
          that.center = [currentCenter.lng, currentCenter.lat];
          that.marker.setPosition([currentCenter.lng, currentCenter.lat]); // 更新标记的位置
          // 根据地图中心点查附近地点
        });
        // 监听地图移动完成事件 更新数据
        that.myMap.on('moveend', () => {
          that.centerSearch();
        });
      },
      /**
       * @author: Wang Jun
       * @create: 2022/5/17 11:38
       * @description: 中心点数据查询
       */
      centerSearch() {
        // 构造地点查询类
        this.lists.splice(0);
        this.loading = true;
        AMap.plugin('AMap.PlaceSearch', () => {
          const placeSearch = new AMap.PlaceSearch({
            pageSize: 30, // 单页显示结果条数
            pageIndex: 1, // 页码
            city: '全国', // 兴趣点城市
            autoFitView: false // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
          });
          // 根据地图中心点查附近地点
          placeSearch.searchNearBy('', [this.center[0], this.center[1]], 1000, (status, result) => {
            if (status === 'complete') {
              this.lists = result.poiList.pois; // 将查询到的地点赋值
              this.loading = false;
            }
          });
        })
      },
      /**
       * @author: Wang Jun
       * @create: 2022/5/17 11:38
       * @description: 搜索查询
       */
      search() {
        this.loading = true;
        this.searchList.splice(0);
        this.noSearchShow = false;
        // 构造地点查询类
        AMap.plugin('AMap.PlaceSearch', () => {
          const placeSearch = new AMap.PlaceSearch({
            pageSize: 30, // 单页显示结果条数
            pageIndex: 1, // 页码
            city: '全国', // 兴趣点城市
            citylimit: false, // 是否强制限制在设置的城市内搜索
            autoFitView: false // 是否自动调整地图视野使绘制的 Marker点都处于视口的可见范围
          });
          // 关键字查询
          placeSearch.search(this.searchKey, (status, result) => {
            this.loading = false;
            if (status === 'complete') {
              if (result.poiList.count === 0) {
                this.noSearchShow = true;
              } else {
                this.searchList = result.poiList.pois; // 将查询到的地点赋值
                this.noSearchShow = false;
              }
            } else {
              this.noSearchShow = true;
            }
          });
        })
      },
      /**
       * @author: Wang Jun
       * @create: 2022/5/17 13:52
       * @description: 选择地址
       */
      chooseAddress(address) {
        this.marker.setPosition([address.location.lng, address.location.lat]); // 更新标记的位置
        this.$emit('update:chooseData', address);
      },
      /**
       * @author: Wang Jun
       * @create: 2022/5/17 13:52
       * @description: 选择搜索结果
       */
      chooseSearch(address) {
        this.center = [address.location.lng, address.location.lat];
        this.$emit('update:chooseData', address);
        // 更新中心点附近地图
        this.initMap();
        this.searchKey = '';
      }
    },
    async mounted() {
      const that = this;
      that.initMap();
    }
  };

  function getAddressDto() {
    return {
      address: '', // 地址
      distance: '', // 离中心点距离
      id: '', // 唯一值
      location: {}, // 经纬度
      name: '', // 名称
      shopinfo: '',
      tel: '', // POI的电话
      type: '' // 兴趣点类型
    };
  }
</script>

<style scoped lang="scss">
  .page-main {
    width: 100%;
    height: 100%;

    .map-div {
      width: 100%;
      height: calc(100% - 48px);

      #container {
        width: 100%;
        height: 50%;
        @extend .margin-top-15;
      }

      .poi-card {
        @extend .margin-top-20;
        width: 100%;
        height: calc(50% - 30px);
        overflow: hidden;
        overflow-y: auto;

        .list-item {
          padding: 10px 0;
          border-bottom: 1px solid #E4E7ED;
          cursor: pointer;
          color: #333;
          display: flex;

          .icon-location {
            color: inherit;
            font-size: 18px;
            margin-top: 4px;
          }

          .right {
            @extend .margin-left-5;

            .name {
              font-size: 14px;
              font-weight: 500;
              color: inherit;
            }

            .location {
              font-size: 12px;
              color: #666;
              font-weight: 400;
              margin-top: 5px;
            }
          }
        }
      }
    }

    .search-list {
      width: 100%;
      overflow: hidden;
      overflow-y: auto;
      height: calc(100% - 38px);
      @extend .margin-top-10;
      position: relative;

      .list-item {
        padding: 10px 0;
        border-bottom: 1px solid #E4E7ED;
        cursor: pointer;
        color: #333;
        display: flex;

        &:hover {
          color: #001DC1;
          background: #F3F6FE;
        }

        .icon-location {
          color: inherit;
          font-size: 18px;
          margin-top: 4px;
        }

        .right {
          @extend .margin-left-5;

          .name {
            font-size: 14px;
            font-weight: 500;
            color: inherit;
          }

          .location {
            font-size: 12px;
            font-weight: 400;
            margin-top: 10px;
            color: #666;
          }
        }
      }
    }
  }
</style>