zy-vue-library/components/map/map.vue

<template>
  <el-dialog v-model="visible" title="坐标">
    <el-form label-position="right" label-width="100px">
      <el-row>
        <el-col :span="12">
          <el-form-item label="关键字搜索">
            <el-input v-model="localSearch" clearable />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="10px">
            <el-button type="primary" @click="fnLocalSearch">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="坐标:">
            <el-input disabled :model-value="currentLongitude || longitude" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label-width="10px">
            <el-input disabled :model-value="currentLatitude || latitude" />
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div
      v-loading="loading"
      element-loading-text="地图正在加载中..."
      element-loading-background="rgba(0, 0, 0, 0.5)"
    >
      <div id="map_container" style="width: 100%; height: 500px" />
    </div>
    <template #footer>
      <el-button @click="fnClose">关闭</el-button>
      <el-button type="primary" @click="fnConfirm"> 确定 </el-button>
    </template>
  </el-dialog>
</template>

<script setup>
import { nextTick, ref, watch } from "vue";
import { ElDialog, ElForm, ElRow, ElCol, ElFormItem, ElInput, ElButton } from "element-plus";
import "element-plus/es/components/dialog/style/css";
import "element-plus/es/components/form/style/css";
import "element-plus/es/components/row/style/css";
import "element-plus/es/components/col/style/css";
import "element-plus/es/components/form-item/style/css";
import "element-plus/es/components/input/style/css";
import "element-plus/es/components/button/style/css";

defineOptions({
  name: "AppMapSelector",
});
let mapInstance;
const visible = defineModel("visible", { type: Boolean, required: true });
const longitude = defineModel("longitude", {
  type: [Number, String],
  required: true,
  default: "",
});
const latitude = defineModel("latitude", {
  type: [Number, String],
  required: true,
  default: "",
});
const loading = ref(false);
const currentLongitude = ref("");
const currentLatitude = ref("");
const localSearch = ref("");
const emits = defineEmits(["submit"]);
const fnMapInit = async () => {
  loading.value = true;
  await nextTick();
  mapInstance = new window.BMapGL.Map("map_container");
  mapInstance.centerAndZoom(
    new window.BMapGL.Point(
      longitude.value || "119.69457721306945",
      latitude.value || "39.940504336846665"
    ),
    16
  );
  mapInstance.enableScrollWheelZoom(true);
  loading.value = false;
  if (longitude.value && latitude.value) {
    const point = new window.BMapGL.Point(longitude.value, latitude.value);
    const marker = new window.BMapGL.Marker(point);
    mapInstance.addOverlay(marker);
  }
  mapInstance.addEventListener("click", function (event) {
    mapInstance.clearOverlays();
    const point = new window.BMapGL.Point(event.latlng.lng, event.latlng.lat);
    const marker = new window.BMapGL.Marker(point);
    mapInstance.addOverlay(marker);
    currentLatitude.value = event.latlng.lat;
    currentLongitude.value = event.latlng.lng;
  });
};
const fnLocalSearch = () => {
  if (localSearch.value) {
    const local = new window.BMapGL.LocalSearch(mapInstance, {
      renderOptions: { map: mapInstance },
    });
    local.search(localSearch.value);
  }
};
const fnClose = () => {
  if (mapInstance) {
    mapInstance.destroy();
    mapInstance = null;
  }
  currentLatitude.value = "";
  currentLongitude.value = "";
  localSearch.value = "";
  visible.value = false;
};
const fnConfirm = () => {
  latitude.value = currentLatitude.value;
  longitude.value = currentLongitude.value;
  emits("submit", {
    latitude: latitude.value,
    longitude: longitude.value,
  });
  fnClose();
};
watch(
  () => visible.value,
  (val) => {
    if (val && !mapInstance) {
      fnMapInit();
    }
  },
  {
    immediate: true,
  }
);
</script>

<style scoped lang="scss"></style>