logpm_page/src/views/distribution/reservation/atlas1.vue

<template>
    <div class="bmap" id="container"></div>
    <!-- <div
            style="
      border: 1px solid pink;
      margin-left: 5px;
      height: 600px;
      box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
    "
    > -->
        <!--            @change="handleCheckedCitiesChange"-->
        <!-- <el-checkbox-group v-model="reservationIds">
            <el-col v-for="(item, index) in reservationData">
                <el-checkbox :label="item.id" :key="item.id"
                >{{ item.customerName }}&emsp;{{ item.customerAddress }}&emsp;{{
                    item.customerTelephone
                    }}</el-checkbox
                >
            </el-col>
        </el-checkbox-group> -->
    <!-- </div> -->

    <div style="display: flex;align-items: center;justify-content: center;">
        <el-button icon="el-icon-circle-close" @click="back">返 回</el-button>
    </div>
</template>

<script setup>
  import { useStore } from 'vuex';
  import { getReservationAddr } from '@/api/distribution/distributionReservation';
  import { getDictionaryBiz } from '@/api/system/dict';
  import { onMounted, reactive, toRefs, watchEffect } from 'vue';
  import { useRouter } from 'vue-router';
  import { selectStockArticleAtlasInfo } from '@/api/distribution/distributionDeliveryList';
  let router = useRouter();
  let details = reactive({
    name: 'BmapDemo',
    item: null,
    error: null,
    addressList: [],
    reservationData: [],
    reservationIds: [],
    mapLoc: null,
    // datalist:[]
  });
  onMounted(()=>{
    initmap()
  })
  watchEffect(()=>{
    details.item = JSON.parse(router.currentRoute.value.query.item);
    selectStockArticleAtlasInfo(details.item.id).then(res => {
      const data = res.data.data;
      console.log('res------------->', data);
      details.reservationData=data
      setTimeout(() => {
        init(data);
      }, 1500);
    });
  })
  function initmap(){
    details.mapLoc = new BMapGL.Map('container'); // 创建地图实例
    let point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
    details.mapLoc.centerAndZoom(point, 12);
    details.mapLoc.enableScrollWheelZoom(true);
  }
  function init(data) {
    
    // maplabel()
    if (details?.mapLoc) {
      details?.mapLoc.clearOverlays(); //清除地图的label
    }
    data.map((item,index)=>{
      maplabel(item.customerAddress, item.customerName+"--"+item.customerAddress+"--"+item.customerTelephone, index);

    })
  }
  function maplabel(address,contents, index) {
    let myGeo = new BMapGL.Geocoder();
    myGeo.getPoint(address, function (point) {
      if (point) {
        // console.log(point, '---------------');
        if (index == 0) {
          details.mapLoc.centerAndZoom(point, 12);
        }
        let content = contents;
        let label = new BMapGL.Label(content, {
          // 创建文本标注
          position: point,
          offset: new BMapGL.Size(10, 20),
        });
        details.mapLoc.addOverlay(label); // 将标注添加到地图中
        label.setStyle({
          // 设置label的样式
          color: '#000',
          fontSize: '10px',
          border: '1px solid #1E90FF',
          borderRadius: '20px',
          padding: '5px 10px',
        });
        // console.log(label, '---------------');
      } else {
        // alert('您选择的地址没有解析到结果！');
        // console.log(point);
        console.log('您选择的地址没有解析到结果！');
      }
    });
  }
  function back() {
    router.back(-1);
  }
  const { reservationIds }=toRefs(details)
</script>

<style scoped>
    .bmap {
        width: 100%;
        height: 700px;
        margin-bottom: 60px;
        /* border: 1px solid pink; */
    }
</style>