element-ui 结合百度地图标记点位

• • 引入api
  • 利用el-dialog
  • 定义data相关属性
  • 地图相关代码

引入api

import BaiduMap from "vue-baidu-map";

利用el-dialog

<el-dialog
      title="地图"
      :visible.sync="showMap"
      width="50%"
      :append-to-body="true"
      @closed="closeMap"
      style="height: 800px; overflow: hidden"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
    >
      <div v-if="showMap">
        <el-input
          class="addressInput"
          v-model="addressKeyword"
          placeholder="请输入地址来查找相关位置"
        ></el-input>
        <div class="control-btn">
          <el-button type="primary" @click="checkedAddress">确 定</el-button>
          <!-- <el-button @click="closeMap">关 闭</el-button> -->
        </div>
        <baidu-map
          :zoom="zoom"
          @ready="handler"
          style="height: 1080px"
          @click="getClickInfo"
          :scroll-wheel-zoom="true"
          v-loading="loadingMap"
        >
          <bm-view style="width: 100%; height: 500px; flex: 1"></bm-view>
          <bm-local-search
            :keyword="addressKeyword"
            :auto-viewport="true"
            style="display: none"
          ></bm-local-search>
        </baidu-map>
      </div>
    </el-dialog>

定义data相关属性

// 地图相关
      loadingMap: true,
      BMap: "",
      map: "",
      geoc: "",
      showMap: false,
      addressKeyword: "",
      longitude: "",
      latitude: "",
      pointLngLat: "",
      center: { lng: 109.45744048529967, lat: 36.49771311230842 },
      zoom: 18,

地图相关代码

//获取地图信息
    checkedAddress() {
      //地址
      this.form.addrDetail = this.addressKeyword;
      //经纬度
      this.form.addrLongitude = this.longitude;
      this.form.addrLatitude = this.latitude;
      this.showMap = false;
    },

    // 地图相关
    mapOpen() {
      this.top = this.getScrollTop();
      if (this.top) {
        this.setScrollTop(0);
      }
    },
    // 关闭地图后调用
    mapClose() {
      this.setScrollTop(this.top);
      this.top = 0;
      this.showMap = false;
    },
    getScrollTop() {
      let scrollTop = 0;
      if (document.documentElement && document.documentElement.scrollTop) {
        scrollTop = document.documentElement.scrollTop;
      } else if (document.body) {
        scrollTop = document.body.scrollTop;
      }
      return scrollTop;
    },
    setScrollTop(top) {
      if (!isNaN(top)) {
        if (
          document.documentElement &&
          document.documentElement.scrollTop !== undefined
        ) {
          document.documentElement.scrollTop = top;
        } else if (document.body) {
          document.body.scrollTop = top;
        }
      }
    },
    handler({ BMap, map }) {
      this.mapOpen();
      this.BMap = BMap;
      this.map = map;
      this.loadingMap = true;
      var geolocation = new BMap.Geolocation();
      this.geoc = new BMap.Geocoder(); // 地址解析对象
      var $this = this;
      // 调用百度地图api 中的获取当前位置接口
      geolocation.getCurrentPosition(function (r) {
        if ($this.longitude != "" && $this.latitude != "") {
          r.point.lng = $this.longitude;
          r.point.lat = $this.latitude;
        }
        let myGeo = new BMap.Geocoder();
        myGeo.getLocation(
          new BMap.Point(r.point.lng, r.point.lat),
          function (result) {
            if (result) {
              $this.loadingMap = false;
              // console.log(result);
              $this.$set($this, "pointLngLat", {
                lng: result.point.lng,
                lat: result.point.lat,
              });
              map.enableScrollWheelZoom(false); // 开启鼠标滚轮缩放,默认关闭
              // $this.addPoint({ BMap, map });
              map.clearOverlays();
              map.centerAndZoom(
                new BMap.Point(r.point.lng, r.point.lat),
                $this.zoom
              );
              window.map.addOverlay(
                new BMap.Marker(new BMap.Point(r.point.lng, r.point.lat))
              );
            }
          }
        );
      });
      window.map = map;
    },
    getClickInfo(e) {
      let _this = this;
      var myMarker = new BMap.Marker(new BMap.Point(e.point.lng, e.point.lat));
      var gc = new BMap.Geocoder();
      var point = new BMap.Point(e.point.lng, e.point.lat);
      gc.getLocation(point, (res) => {
        _this.addressKeyword = res.address;
        _this.longitude = point.lng;
        _this.latitude = point.lat;
        console.log(_this.addressKeyword); // 地址信息
        var mes =
          "确定位置在:" +
          "经度:" +
          _this.longitude +
          +"  " +
          "维度:" +
          _this.latitude +
          "  " +
          _this.addressKeyword +
          "吗？";
        MessageBox.confirm(mes, "提示", {
          showCancelButton: true,
          confirmButtonText: "确定",
          cancelButtonClass: "取消",
          type: "warning",
        })
          .then(() => {
            window.map.clearOverlays();
            window.map.centerAndZoom(
              new BMap.Point(_this.longitude, _this.latitude),
              _this.zoom
            );
            window.map.addOverlay(myMarker);
          })
          .catch(() => {});
      });
      _this.longitude = e.point.lng;
      _this.latitude = e.point.lat;
    },