yjdp-web/src/components/Map/company-map.vue

<template>
  <el-dialog v-model="mapPop" title="地图定位" width="80%" @close="handleClose">

    <div class="map_box">
      <div class="map" id="map"></div>
      <div class="search">
        <!-- @input="handleInput(0)" -->
        <el-input placeholder="请输入地址" v-model="location" />
        <el-button class="btn" type="primary" @click="handleInput(0)">搜索</el-button>
      </div>

      <div class="scroll_box" v-if="searchPop">
        <div style="height: 30px; line-height: 30px;">
          <span style="font-weight:bold">搜索结果列表</span>
          <i class="el-icon-close" style="float: right;font-size: 20px;cursor: pointer;" @click="closeSearchList()" />
        </div>

        <el-scrollbar class="scroll" style="height: 250px;">
          <div v-show="searchList.length" class="item" v-for="(item, index) in searchList" :key="index" @click="handlePanTo(index)">
            <el-image class="img" :src="item.img" :alt="item.name" lazy>
              <div slot="error" class="image-slot">
                <i class="el-icon-picture-outline"></i>
              </div>
            </el-image>
            <div>
              <div class="text">{{ item.name }}</div>
              <div>{{ item.address }}</div>
            </div>
          </div>
          <div class="empty" v-show="!searchList.length" style="text-align: center;">没有搜索到内容</div>
        </el-scrollbar>

        <el-pagination background small :hide-on-single-page="true" layout="prev, pager, next" :total="total" :page-size="pageSize" :current-page="pageNum" style="margin-top: 10px;" @current-change="handleChangePage">
        </el-pagination>
      </div>
    </div>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="handleClose">取 消</el-button>
        <el-button type="primary" @click="sureMark">确 定</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>

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

export default {
  props: {
    address: {//公司地址
      type: String,
      default: () => {
        return '';
      },
    },
    latAndLong: {//经纬度
      type: Array,
      default: () => {
        return [];
      },
    },
    visible: {
      type: Boolean,
      default: () => {
        return false;
      },
    },
  },
  data() {
    return {
      // 地图对象
      map: {},
      amap: {},
      location: '',
      marker: null,//地图上的点标记
      contextMenu: null,
      lnglatPosition: null,//选中的新坐标

      pageNum: 1,
      pageSize: 10,
      total: 0,

      searchList: [],
      searchPop: false,
      placeSearch: null,
      form: {},
      open: false,
      mapPop: false,
      geocoder: {}
    };
  },
  watch: {
    async visible(n) {
      this.mapPop = n;
      if (n) {
        await this.initMap()
        this.location = this.address;
        this.handleInput(0)
      }
    }
  },
  destroyed() {
    if (this.map) {
      this.map.destroy()
      this.map.off('rightclick')
    }
  },
  methods: {
    handleInput(flag) {
      if (!this.location) return;

      if (!flag) {//搜索
        this.total = 0
        this.pageNum = 1
      }

      const that = this;
      if (!this.placeSearch) {
        this.placeSearch = new this.amap.PlaceSearch({
          pageSize: 10, // 每页条数，默认10，范围1-50
          pageIndex: 1, // 页码
          extensions: 'all' // 默认base，返回基本地址信息；all：返回详细信息
        })
      }

      this.searchPop = true;
      this.placeSearch.setPageIndex(this.pageNum)
      this.placeSearch.search(that.location, (status, result) => {
        // console.log(result.poiList.pois, 'result')
        if (!!result.poiList && result.poiList.pois && result.poiList.pois.length > 0) {
          let arr = []
          const pois = result.poiList.pois;
          that.total = result.poiList ? result.poiList.count : 0;
          arr = pois.map((item) => {
            return {
              name: item.name,
              address: item.address,
              img: item.photos[0]?.url,
              lnglat: [item.location.lng, item.location.lat]
            }
          })
          that.searchList = arr

        } else {
          that.total = 0
          that.searchList = []
        }

      })
    },
    handleChangePage(newNum) {
      if (!this.searchPop) return;
      this.pageNum = newNum
      this.handleInput(1)
    },
    closeSearchList() {
      this.searchPop = false
      this.location = ''
      this.searchList = []
      this.total = 0
      this.pageNum = 1
    },
    // 地图中心的平移至指定点位置
    handlePanTo(index) {
      let lnglat = this.searchList[index].lnglat
      this.form = {
        longitude: lnglat[0],
        latitude: lnglat[1]
      }
      this.map.panTo(lnglat)
      this.setMarks(lnglat);
      this.closeSearchList()
    },
    async initMap() {
      let position = this.latAndLong.length ? this.latAndLong : [110.93154257997, 21.669064031332];
      this.form = {
        longitude: position[0],
        latitude: position[1]
      }
      const AMap = await AMapLoader.load({
        key: '30d3d8448efd68cb0b284549fd41adcf',     // 申请好的Web端开发者Key，首次调用 load 时必填
        version: '2.0',      // 指定要加载的 JSAPI 的版本，缺省时默认为 1.4.15
        plugins: ['AMap.PlaceSearch', 'AMap.ContextMenu', 'AMap.PolygonEditor', 'AMap.Geocoder']       // 插件列表
      })
      this.map = new AMap.Map('map', {
        viewMode: '3D',    //是否为3D地图模式
        center: position,
        zoom: 15
      })
      this.amap = AMap

      this.setMarks(position);
      this.geocoder = new AMap.Geocoder({
        // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
        city: '010'
      })
      // 创建右键菜单
      this.ContextMenu()
      this.map.on('rightclick', this.handleRightclick);

    },
    ContextMenu() {
      this.contextMenu = new AMap.ContextMenu();
      this.contextMenu.addItem('选择标点', () => {
        this.form = {
          longitude: this.lnglatPosition[0],
          latitude: this.lnglatPosition[1]
        }
        this.contextMenu.close()
        let lnglat = [this.form.longitude, this.form.latitude];
        this.setMarks(lnglat);
      }, 1)
    },
    // 右键事件
    handleRightclick(e) {
      let lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
      this.contextMenu.open(this.map, e.lnglat);
      this.lnglatPosition = lnglat;
    },
    sureMark() {
      let lnglat = [this.form.longitude, this.form.latitude];
      this.geocoder.getAddress(lnglat, (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          // result为对应的地理位置详细信息
          this.$emit("confirm", { lnglat: lnglat, address: result.regeocode.formattedAddress });
        }
      })

    },
    setMarks(lnglat) {//添加标记
      if (this.marker) this.map.remove(this.marker);
      let marker = new AMap.Marker({
        position: lnglat,
        icon: new AMap.Icon({
          size: new AMap.Size(22, 28),  //图标所处区域大小
          imageSize: new AMap.Size(22, 28), //图标大小
          image: "//a.amap.com/jsapi_demos/static/demo-center/icons/poi-marker-default.png",
        }),
        anchor: 'bottom-center',
        offset: new AMap.Pixel(0, 0)
      });
      marker.setMap(this.map);
      this.marker = marker;
    },
    handleClose() {
      this.$emit('update:visible', false)
    }
  }
};
</script>

<style lang="scss" scoped>
.map_box {
  position: relative;
  width: 100%;
  height: 450px;
  background: rgba(0, 0, 0, 0.3);
  margin-bottom: 20px;
}
.map {
  width: 100%;
  height: 100%;
}
.search {
  width: 50%;
  position: absolute;
  right: 2%;
  top: 10px;
  background: #fff;
  padding: 8px 8px;
  border-radius: 3px;
  display: flex;
}
.btn {
  margin-left: 10px;
}

.scroll_box {
  width: 50%;
  padding-top: 30px;
  padding-bottom: 20px;
  background: #fff;
  position: absolute;
  right: 2%;
  top: 70px;
  padding: 15px;
  border-radius: 3px;
  .close {
    position: absolute;
    right: 2%;
    top: 10px;
    cursor: pointer;
    font-size: 20px;
  }
}
.scroll {
  width: 100%;
  max-height: 250px;

  .item {
    display: flex;
    font-size: 14px;
    cursor: pointer;
    padding: 8px;

    &:hover {
      background-color: #f6f6f6;
    }

    .img {
      width: 50px;
      height: 45px;
      min-width: 50px;
      margin-right: 10px;
    }

    &::v-deep {
      .image-slot {
        width: 100%;
        height: 100%;
        background-color: #f5f7fa;
        text-align: center;
        line-height: 50px;
      }

      .el-icon-picture-outline {
        font-size: 25px;
      }
    }

    .text {
      color: #3385ff;
      margin-bottom: 6px;
    }
  }
}
::v-deep {
  .el-scrollbar__wrap {
    overflow-x: hidden !important;
  }

  .is-horizontal {
    display: none;
  }
}
.empty {
  margin: 20px 0;
}
</style>