yjdp-web/src/views/routineCommandMap/company-map.vue

<template>
  <div>
    <div v-if="visible" class="dialog-wrap">
      <div class="dialog">
        <div class="dialog-header">
          <div class="dialog-title">{{ title }}</div>
          <div class="icon-close" @click="handleClose">
            <el-icon size="40px"><Close /></el-icon>
          </div>
        </div>
        <div class="dialog-content">
          <el-form ref="queryFormRef" :model="form" :rules="rules" :inline="true">
            <el-form-item label="详细地址" prop="address">
              <el-input v-model="form.address" placeholder="请输入" clearable />
            </el-form-item>
            <el-form-item label="经度" prop="longitude">
              <el-input v-model="form.longitude" placeholder="请输入" />
            </el-form-item>
            <el-form-item label="纬度" prop="latitude">
              <el-input v-model="form.latitude" placeholder="请输入" />
            </el-form-item>
            <el-form-item>
              <el-button type="primary" size="large" @click="submit">确定</el-button>
            </el-form-item>
          </el-form>
          <div ref="containerRef" class="map_box">
            <div id="map" class="map" :style="{ width: width, height: height }"></div>
            <div class="search">
              <!-- @input="handleInput(0)" -->
              <el-input v-model="location" placeholder="请输入地址" />
              <el-button class="btn" type="primary" @click="handleInput(0)">搜索</el-button>
            </div>

            <div v-if="searchPop" class="scroll_box">
              <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-for="(item, index) in searchList" v-show="searchList.length" :key="index" class="item" @click="handlePanTo(index)">
                  <el-image class="img" :src="item.img" :alt="item.name" lazy>
                    <template #error>
                      <div class="image-slot">
                        <i class="el-icon-picture-outline"></i>
                      </div>
                    </template>
                  </el-image>
                  <div>
                    <div class="text">{{ item.name }}</div>
                    <div>{{ item.address }}</div>
                  </div>
                </div>
                <div v-show="!searchList.length" class="empty" 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>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import AMapLoader from '@amap/amap-jsapi-loader';
import { useRouter } from 'vue-router';

const props = defineProps({
  visible: {
    type: Boolean,
    default: () => {
      return false;
    }
  }
});
const router = useRouter();
const emits = defineEmits(['update:visible']);
// 地图对象
let map = null;
let amap = {};
let location = ref('');
let marker = null; //地图上的点标记
let contextMenu = null;
let lnglatPosition = ref([]); //选中的新坐标
let rules = reactive({
  address: [{ required: true, message: '详细地址不能为空', trigger: 'blur' }],
  longitude: [{ required: true, message: '经度不能为空', trigger: 'blur' }],
  latitude: [{ required: true, message: '纬度不能为空', trigger: 'blur' }]
});
let pageNum = ref(1);
let pageSize = ref(10);
let total = ref(0);

let searchList = ref([]);
let searchPop = ref(false);
let placeSearch;
let form = reactive({
  address: '',
  longitude: '',
  latitude: ''
});
let open = ref(false);
let geocoder = {};
let width = ref('100%');
let height = ref('100%');
watch(
  () => props.visible,
  (n) => {
    if (n) {
      nextTick(() => {
        initMap();
      });
    }
  }
);
onMounted(() => {
  window.addEventListener('resize', handleResize);
});
onUnmounted(() => {
  if (!!map) {
    map.off('rightclick');
    map.destroy();
    map = null;
  }
  window.removeEventListener('resize', handleResize);
});

function handleInput(flag) {
  if (!location.value) return;

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

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

  searchPop.value = true;
  placeSearch.setPageIndex(pageNum.value);
  placeSearch.search(location.value, (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;
      total.value = 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]
        };
      });
      searchList.value = arr;
    } else {
      total.value = 0;
      searchList.value = [];
    }
  });
}

function handleChangePage(newNum) {
  if (!searchPop.value) return;
  pageNum.value = newNum;
  this.handleInput(1);
}

function closeSearchList() {
  searchPop.value = false;
  location.value = '';
  searchList.value = [];
  total.value = 0;
  pageNum.value = 1;
}

// 地图中心的平移至指定点位置
function handlePanTo(index) {
  let lnglat = searchList.value[index].lnglat;
  form.longitude = searchList.value[index].name + '(' + searchList.value[index] + ')';
  form.latitude = lnglat[0];
  form.latitude = lnglat[1];
  map.panTo(lnglat);
  setMarks(lnglat);
  closeSearchList();
}

const initMap = async () => {
  let position = [110.93154257997, 21.669064031332];
  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'] // 插件列表
  });
  map = new AMap.Map('map', {
    viewMode: '3D', //是否为3D地图模式
    center: position,
    zoom: 15
  });
  amap = AMap;
  geocoder = new AMap.Geocoder({
    // city 指定进行编码查询的城市，支持传入城市名、adcode 和 citycode
    city: '010'
  });
  // 创建右键菜单
  ContextMenu();
  map.on('rightclick', handleRightclick);
  handleResize();
};

function ContextMenu() {
  contextMenu = new AMap.ContextMenu();
  contextMenu.addItem(
    '选择标点',
    () => {
      form.longitude = lnglatPosition.value[0];
      form.latitude = lnglatPosition.value[1];
      contextMenu.close();
      let lnglat = [form.longitude, form.latitude];
      geocoder.getAddress(lnglat, (status, result) => {
        if (status === 'complete' && result.info === 'OK') {
          form.address = result.regeocode.formattedAddress;
        }
      });
      setMarks(lnglat);
    },
    1
  );
}

// 右键事件
function handleRightclick(e) {
  let lnglat = [e.lnglat.getLng(), e.lnglat.getLat()];
  contextMenu.open(map, e.lnglat);
  lnglatPosition.value = lnglat;
}

function setMarks(lnglat) {
  //添加标记
  if (marker) map.remove(marker);
  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(map);
}

function handleClose() {
  emits('update:visible', false);
}

let queryFormRef = ref();
let containerRef = ref();

function handleResize() {
  const containerWidth = containerRef.value.clientWidth * (document.body.clientWidth / 8960);
  const containerHeight = containerRef.value.clientHeight * (document.body.clientHeight / 2520);
  width.value = containerWidth + 'px';
  height.value = containerHeight + 'px';
  nextTick(() => {
    map.resize();
  });
}

function submit() {
  queryFormRef.value.validate((valid) => {
    if (valid) {
      console.log('提交数据', form);
      router.push({
        path: '/emergencyCommandMap',
        query: { id: '11111111' }
      });
    }
  });
}
</script>

<style lang="scss" scoped>
.map_box {
  position: relative;
  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;
}

.dialog-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;

  .dialog {
    width: 4000px;
    height: 2000px;
    margin: 0 auto;
    background-color: #fff;
    border-radius: 10px;
  }
}

.dialog {
  padding: 0 20px;

  .dialog-header {
    width: 100%;
    height: 70px;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .dialog-title {
      font-size: 36px;
    }

    .icon-close {
      cursor: pointer;
    }
  }

  .dialog-content {
    padding: 10px 0;

    .map_box {
      width: calc(4000px - 50px) !important;
      height: calc(2000px - 200px) !important;
      overflow: hidden;
    }
  }
}
</style>