addMap.vue

<template>
  <el-dialog
    :title="$t('dialog.mapCoordinateTitle')"
    class="manage-dialog map-dialog"
    :visible.sync="mapVisible"
    :close-on-click-modal="false"
    @before-close="closeMapDialog"
  >
    <div class="map-row">
      <div class="map-row-left">
        <el-input v-model.trim="posCityName" :placeholder="$t('table.area')" class="pos-inp" />
        <el-button type="primary" class="search-btn" @click="searchMap">{{ $t('button.search') }}</el-button>
      </div>
      <div class="map-row-right">
        <span class="map-row-text">{{ $t('dialog.lat') }}</span>
        <el-input v-model="latVal" :placeholder="$t('dialog.lat')" readonly class="pos-inp" />
        <span class="map-row-text">{{ $t('dialog.lng') }}</span>
        <el-input v-model="lngVal" :placeholder="$t('dialog.lng')" readonly class="pos-inp" />
      </div>
    </div>
    <div class="map-container" v-loading="mapLoading">
      <template v-if="bmapWrapperVisible">
        <baidu-map
          :ak="mapAk"
          :center="center"
          :zoom="zoom"
          :scroll-wheel-zoom="true"
          @ready="mapHandler"
          @clearoverlays="clearAllOverlays"
          @click="getPosition"
        >
          <bm-view id="cityMap" class="map-item" />
          <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT" />
          <bm-marker :position="addPos" :massClear="false" />
          <bm-local-search
            :panel="false"
            :keyword="searchKw"
            :autoViewport="true"
            :location="location"
            :forceLocal="false"
            @searchcomplete="searchcomplete"
          />
        </baidu-map>
      </template>
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button class="dialog-btn" @click="closeMapDialog">{{$t('dialog.cancel')}}</el-button>
      <el-button
        type="primary"
        class="dialog-btn dialog-confirm-btn"
        @click="submitCoordinates"
      >{{$t('dialog.confirm')}}</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  BaiduMap,
  BmView,
  BmNavigation,
  BmMarker,
  BmLocalSearch
} from "vue-baidu-map";

export default {
  components: {
    BaiduMap,
    BmView,
    BmNavigation,
    BmMarker,
    BmLocalSearch
  },
  data() {
    return {
      mapVisible: false,
      posCityName: "",
      latVal: null,
      lngVal: null,
      mapLoading: false,
      bmapWrapperVisible: false,
      mapAk: "7eRXXHqcpdDuvgcqwWFyBGw5U7c5Iz6i",
      center: { lng: 0, lat: 0 },
      zoom: 3,
      addPos: {},
      searchKw: "",
      location: "",
      propCenterPoint: null
    };
  },
  methods: {
    dialogInit(location, searchKw) {
      this.bmapWrapperVisible = true;
      this.location = location;
      this.searchKw = searchKw;
      this.mapVisible = true;
      // this.mapLoading = true;
      this.mapLoading = window.$BAIDU$ ? false : true;
    },
    mapHandler({ BMap, map }) {
      this.zoom = 15;
      this.mapLoading = false;
    },
    clearAllOverlays({ type, target }) {},
    getPosition({ type, target, point, pixel, overlay }) {
      target.clearOverlays();
      this.latVal = point.lat;
      this.lngVal = point.lng;
      this.addPos = point;
    },
    searchcomplete(results) {
      if (results && results.Br.length) {
        try {
          const resultPoint = results.Br[0].point;
          // this.geoPos = this.center = resultPoint
          this.latVal = resultPoint.lat;
          this.lngVal = resultPoint.lng;
          // this.addPos = {
          // 	lng: resultPoint.lng,
          // 	lat: resultPoint.lat
          // }
        } catch (error) {
          console.error(error);
        }
      }
    },
    submitCoordinates() {
      if (this.latVal && this.lngVal) {
        // this.addForm.longitude = this.lngVal;
        // this.addForm.latitude = this.latVal;
        this.$emit("addLatLng", { lat: this.latVal, lng: this.lngVal });
        setTimeout(() => {
          this.mapVisible = false;
          this.bmapWrapperVisible = false;
        }, 200);
      } else {
        this.$message({
          showClose: true,
          type: "warning",
          message: this.$t("message.coordinate")
        });
      }
    },
    searchMap() {
      if (this.posCityName.replace(/\s+/g, "")) {
        this.location = this.searchKw = this.posCityName;
      }
    },
    closeMapDialog() {
      this.mapVisible = false
      this.latVal = this.lngVal = null;
      this.posCityName = this.location = this.searchKw = "";
      this.bmapWrapperVisible = false;
    }
  }
};
</script>

<style scoped>
.map-row {
  padding-bottom: 12px;
}

.map-row:after,
.map-row:before {
  content: "";
  display: table;
}

.map-row:after {
  clear: both;
}

.map-row-left {
  float: left;
}

.map-row-right {
  float: right;
}

.map-row-text:last-of-type {
  padding-left: 10px;
}

.pos-inp {
  height: 30px !important;
  width: 120px;
}

.pos-inp:first-child {
  width: 200px;
}

.map-item {
  width: 100%;
  height: 460px;
}
</style>