mapCoordinate.vue

<template>
  <el-dialog
    :title="$t('dialog.scopeMapTitle')"
    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.countries')}/${$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.lng') }}</span>
        <el-input v-model="lngVal" :placeholder="$t('dialog.lng')" readonly class="pos-inp"></el-input>
        <span class="map-row-text">{{ $t('dialog.lat') }}</span>
        <el-input v-model="latVal" :placeholder="$t('dialog.lat')" readonly class="pos-inp"></el-input>
      </div>
    </div>
    <div class="map-container" v-loading="mapLoading">
      <template v-if="mapRender">
        <baidu-map
          ref="bmap"
          :center="center"
          :zoom="zoom"
          :scroll-wheel-zoom="true"
          :ak="mapAk"
          @ready="mapHandler"
          @moving="syncCenterAndZoom"
          @moveend="syncCenterAndZoom"
          @zoomend="syncCenterAndZoom"
        >
          <!-- @click="getPosition" -->
          <bm-view id="cityMap" class="map-item" />
          <bm-navigation anchor="BMAP_ANCHOR_TOP_LEFT" />
          <!-- <bm-marker :position="geoPos" :massClear="false" /> -->
          <bm-local-search
            :panel="false"
            :keyword="searchKw"
            :autoViewport="true"
            :location="location"
            :forceLocal="false"
            :selectFirstResult="true"
            @markersset="markerssetHandler"
            @searchcomplete="searchcomplete"
          />
          <bm-geolocation
            anchor="BMAP_ANCHOR_BOTTOM_RIGHT"
            :showAddressBar="true"
            :autoLocation="true"
            @locationSuccess="locationSuccessHandler"
            ref="bmapGeoLocation"
          />
        </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,
  BmGeolocation
} from "vue-baidu-map";
export default {
  components: {
    BaiduMap,
    BmView,
    BmNavigation,
    BmMarker,
    BmLocalSearch,
    BmGeolocation
  },
  data() {
    return {
      mapVisible: false,
      posCityName: "",
      latVal: "",
      lngVal: "",
      mapLoading: false,
      center: { lng: 0, lat: 0 },
      zoom: 3,
      geoPos: {},
      searchKw: "",
      location: "",
      initLocation: false,
      mapAk: "7eRXXHqcpdDuvgcqwWFyBGw5U7c5Iz6i",
      mapRender: false,
      propCenterPoint: null
    };
  },
  methods: {
    dialogInit(lngLat) {
      this.propCenterPoint = lngLat;
      this.mapRender = true;
      this.searchKw = this.location = this.posCityName = "";
      this.latVal = null;
      this.lngVal = null;
      this.geoPos = {};
      this.center = { lng: 0, lat: 0 };
      // if (lngLat) {
      //   // setTimeout(() => {
      //     this.geoPos = this.center = lngLat
      //     this.latVal = lngLat.lat
      //     this.lngVal = lngLat.lng
      //   // }, 100);
      // }
      this.mapVisible = true;
      this.mapLoading = window.$BAIDU$ ? false : true;
    },
    locationSuccessHandler({ point, AddressComponent, marker }) {
      marker.hide();
      this.geoPos = this.center = point;
    },
    mapHandler({ BMap, map }) {
      this.zoom = 15;
      this.mapLoading = false;
      const { propCenterPoint } = this;
      if (propCenterPoint) {
        this.geoPos = this.center = propCenterPoint;
        this.latVal = propCenterPoint.lat;
        this.lngVal = propCenterPoint.lng;
        map.centerAndZoom(
          new BMap.Point(propCenterPoint.lng, propCenterPoint.lat),
          propCenterPoint.zoom || 11
        );
      } else {
        let _this = this;
        let geolocation = new BMap.Geolocation();
        geolocation.getCurrentPosition(
          function(r) {
            if (this.getStatus() == BMAP_STATUS_SUCCESS) {
              // let mk = new BMap.Marker(r.point);
              // map.addOverlay(mk);
              // map.panTo(r.point);
              _this.center = _this.geoPos = r.point;
              _this.latVal = r.point.lat;
              _this.lngVal = r.point.lng;
              // _this.initLocation = true
            } else {
              this.$message.info("failed" + this.getStatus());
            }
          },
          { enableHighAccuracy: true }
        );
      }
    },
    // clearAllOverlays({ type, target }) {},
    getPosition({ type, target, point, pixel, overlay }) {
      target.clearOverlays();
      this.latVal = point.lat;
      this.lngVal = point.lng;
      this.geoPos = this.center = point;
    },
    // 隐藏 marker
    markerssetHandler(pois) {
      pois.forEach(item => {
        item.marker.hide();
      });
    },
    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;
        } catch (error) {
          console.error(error);
        }
      }
    },
    syncCenterAndZoom(e) {
      const centerPoint = e.target.getCenter();
      this.latVal = centerPoint.lat;
      this.lngVal = centerPoint.lng;
      this.geoPos = this.center = centerPoint;
      this.zoom = e.target.getZoom();
    },
    submitCoordinates() {
      if (this.latVal && this.lngVal) {
        this.$emit("addLatLng", {
          lat: this.latVal,
          lng: this.lngVal,
          zoom: this.zoom
        });
        setTimeout(() => {
          this.mapVisible = false;
          this.mapRender = false;
        }, 200);
      } else {
        this.$message({
          showClose: true,
          type: "warning",
          message: this.$t("message.coordinate")
        });
      }
    },
    searchMap() {
      if (this.posCityName.replace(/\s+/g, "")) {
        this.location = this.posCityName;
        this.searchKw = this.posCityName;
      }
    },
    closeMapDialog() {
      this.mapVisible = false
      this.mapRender = false;
      this.propCenterPoint = null
      this.latVal = "";
      this.lngVal = "";
      this.posCityName = "";
      this.location = "";
      this.searchKw = "";
    }
  }
};
</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>