YZProjectCloud/yanzhu-ui-vue3/src/components/BaiduMap/Map.vue

<template>
  <el-dialog v-model="show" width="800px" append-to-body class="baidu-map-dialog" :close-on-click-modal="false" :close-on-press-escape="false">
    <template #header>
      <span>{{ title }}</span>
      <span style="display: inline-flex; width: 60%; margin-left: calc(40% - 80px)">
        <el-input v-model="data.txtAarea" placeholder="请输入地址" @keyup.enter="search" />
        <el-button type="primary" @click="search" style="margin-left: 10px">查询</el-button>
      </span>
    </template>
    <div class="div-info">
      <div>经度纬度:{{ point ? point.lng.toFixed(5) + "," + point.lat.toFixed(5) : "" }}</div>
      <div>详细地址:{{ getAddress() }}</div>
      <div style="margin-top: 10px; text-align: center" v-if="getAddress()">
        <el-button size="small" type="primary" @click="doOk">确定</el-button>
      </div>
    </div>
    <div id="index-map" style="width: 100%; height: 600px"></div>
  </el-dialog>
</template>

<script setup>
import { reactive, ref } from "vue";
const { proxy } = getCurrentInstance();
const show = ref(false);
const title = ref("");
const map = ref("");
const point = ref("");
const cityInfo = ref("");
const data = reactive({
  txtAarea: "",
});
const emit = defineEmits(["docom"]);


function doOk() {
  emit("docom", point.value, cityInfo.value);
  show.value = false;
}

function getAddress() {
  let addr = cityInfo.value?.address || "";
  return addr;
}

function showDlg(opt) {
  title.value = opt?.title || "选择地址";
  show.value = true;
  setTimeout(() => {
    initMap(opt);
  }, 400);
}

function currentPoint() {
  let geolocation = new BMapGL.Geolocation();
  geolocation.enableSDKLocation();
  geolocation.getCurrentPosition((e) => {
    if (e && e.point) {
      let pt = e.point;
      map.value.centerAndZoom(pt, 16);
      mapClick({ latlng: pt });
    }
  });
}

function mapClick(e) {
  point.value = e.latlng;
  let myGeo = new BMapGL.Geocoder({ extensions_town: true });
  myGeo.getLocation(e.latlng, (r) => {
    if (r) {
      cityInfo.value = {
        address: r.content?.address || "",
        poi_desc: r.content?.poi_desc || "",
        district: r.content?.address_detail?.district || "",
        city: r.content?.address_detail?.city || "",
        province: r.content?.address_detail?.province || "",
      };
      if (cityInfo.value.address) {
        map.value.clearOverlays();
        map.value.addOverlay(new BMapGL.Marker(e.latlng, { title: cityInfo.value.address }));
      }
    } else {
      cityInfo.value = {};
    }
  });
}

function initMap(opt) {
  let imap = new BMapGL.Map("index-map");

  map.value = imap;
  let point = new BMapGL.Point(116.404, 39.915);
  //初始化地图，设置中心点坐标和地图级别
  map.value.centerAndZoom(point, 15);
  map.value.setDefaultCursor("crosshair"); //设置地图默认的鼠标指针样式
  map.value.enableScrollWheelZoom(); //启用滚轮放大缩小，默认禁用。

  //创建点坐标

  //创建标注
  let initMarker = new BMapGL.Marker(point);
  //向地图中添加单个覆盖物时会触发此事件
  map.value.addOverlay(initMarker);
  //将标注点移动到中心位置

  //添加地图默认控件
  map.value.addControl(new BMapGL.NavigationControl());
  //开启鼠标滚轮缩放
  map.value.addEventListener("click", mapClick);
  var myGeo = new BMapGL.Geocoder();
  if (opt && opt.address) {
    let myGeo = new BMapGL.Geocoder();
    myGeo.getPoint(opt.address, function (pt) {
      if (pt) {
        map.value.centerAndZoom(pt, 16);
        mapClick({ latlng: pt });
      } else {
        currentPoint();
      }
    });
  } else {
    currentPoint();
  }
}
function initMapData(opt) {
  if (opt.latitude && opt.longitude) {
    point.value = {};
    point.value.lng = opt.longitude * 1.0;
    point.value.lat = opt.latitude * 1.0;
  }
  cityInfo.value = {};
  cityInfo.value.address = opt.projectAddress || "";
  cityInfo.value.district = opt.district || "";
  cityInfo.value.city = opt.city || "";
  cityInfo.value.province = opt.province || "";
}

/** 暴露组件 */
defineExpose({
  showDlg,
  initMapData,
});
function search() {
  if (!data.txtAarea) {
    proxy.$modal.msgError("请输入要搜索的地址");
    return;
  }
  let myGeo = new BMapGL.Geocoder();
  myGeo.getPoint(data.txtAarea, function (pt) {
    if (pt) {
      map.value.centerAndZoom(pt, 16);
      mapClick({ latlng: pt });
    } else {
      proxy.$modal.msgError("您输入的地址没有解析到结果！");
    }
  });
}
</script>
<style lang="scss">
.baidu-map-dialog {
  .el-dialog__body {
    position: relative;
    padding: 0px;

    .div-info {
      position: absolute;
      top: 0px;
      right: 10px;
      width: 300px;
      font-size: 12px;
      background: rgba(255, 255, 255, 0.5);
      box-shadow: 6px 6px 6px rgba(0, 0, 0, 0.2);
      z-index: 99999;
      padding: 8px;
      border: solid 1px #ccc;
      color: #51b5ff;
      line-height: 24px;
    }
  }
}
</style>