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);-->
<!--    "-->
<!--    >-->
<!--        &lt;!&ndash;            @change="handleCheckedCitiesChange"&ndash;&gt;-->
<!--        <el-checkbox-group v-model="reservationIds">-->
<!--            <el-col v-for="(item, index) in reservationData">-->
<!--                <el-checkbox :label="item.id" :key="item.id"-->
<!--                >{{ item.consignee }}&emsp;{{ item.deliveryAddress }}&emsp;{{-->
<!--                    item.deliveryPhone-->
<!--                    }}-->
<!--                </el-checkbox-->
<!--                >-->
<!--            </el-col>-->
<!--        </el-checkbox-group>-->
<!--    </div>-->

    <div style="margin-left: 50%; margin-top: 5%; float: bottom">
        <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 { selectStockArticleAtlasInfo } from '@/api/distribution/distributionDeliveryList';
  import { onMounted, reactive, toRefs, createApp } from 'vue';
  import { useRouter } from 'vue-router';
  import { ref, watch } from "vue"


  let router = useRouter();
  let details = reactive({
    name: 'BmapDemo',
    item: null,
    error: null,
    addressList: [],
    reservationData: [],
    reservationIds: [],
    mapLoc: null
  });


  onMounted(() => {
    details.item = JSON.parse(router.currentRoute.value.query.item);

    console.log('details.item.id------------->', details.item.id);

    watch(details.item.id, (newValue, oldValue) => {
      console.log("item变了", newValue, oldValue);
      a(details.item);
    },{immediate:true});
    console.log('------------->', details.item);
    // setTimeout(()=>{
    //   details.mapLoc.clearOverlays();

    // },9500)
  });



  function a(data) {
    selectStockArticleAtlasInfo(data.id).then(res => {
      const data = res.data.data;
      console.log('res------------->', data);
      setTimeout(() => {
        init(data);
      }, 1500);
    });
  }



  function init(data) {
    details.mapLoc = new BMapGL.Map('container'); // 创建地图实例
    let point = new BMapGL.Point(116.404, 39.915); // 创建点坐标
    details.mapLoc.centerAndZoom(point, 12);
    details.mapLoc.enableScrollWheelZoom(true);
    // maplabel()
    if (details.mapLoc) {
      details.mapLoc.clearOverlays(); //清除地图的label
    }
    let a = data;
    a.forEach((item,index)=>{
      console.log('item------------->', item);

      maplabel(item.customerAddress, item.customerName+"--"+item.customerAddress+"--"+item.customerTelephone, index);

      // maplabel('中国四川省成都市简阳市石桥镇简阳市石桥镇红星美凯龙雄州商场-1-26-154', '周娅', 0);
    })
  }

  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 {
      margin-top: 2%;
        width: 1800px;
        height: 600px;
        border: 1px solid pink;
    }
</style>