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

<template>
  <div class="bmap" id="container" style="float: left"></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.consignee }}&emsp;{{ item.deliveryAddress }}&emsp;{{
            item.deliveryPhone
          }}</el-checkbox
        >
      </el-col>
    </el-checkbox-group>
  </div>

  <div style="margin-left: 40%; 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 { onMounted, reactive, toRefs, watchEffect } from 'vue';
import { useRouter } from 'vue-router';
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);
  setTimeout(() => {
    init();
  }, 1500);
  // setTimeout(()=>{
  //   details.mapLoc.clearOverlays();

  // },9500)
});

function init() {
  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
  }
  maplabel('四川成都龙泉驿区','展示的内容', 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 {
  width: 800px;
  height: 600px;
  border: 1px solid pink;
}
</style>