百度地圖 - 基礎學習(5): 地圖事件、逆/地址解析

百度地圖 - 基礎學習(5): 地圖事件、逆/地址解析：template

<template>
  <div class="el-col el-col-24">
    <div class="el-col el-col-24 font-size16">
      <div class="el-col el-col-24">
        <div class="color-b2aead">當前鼠標點擊位置地址：</div>
        <div class="color-568dfd">
          <span v-if="currentAddress !== null && currentAddress !== 'getLost'">
            {{
              currentAddress.length
                ? currentAddress
                : "艾瑪，你娃掉海里了，快撈起來！"
            }}
          </span>
          <span v-if="currentAddress === 'getLost'"
            >年輕人你已經迷失了自我，快回去吧！</span
          >
        </div>
      </div>
      <div class="el-col el-col-24">
        <div class="color-b2aead">當前鼠標點擊位置經緯度爲：</div>
        <div class="color-568dfd">
          <span style="margin-right: 10px">
            {{
              currentPoint
                ? currentPoint.lng > 0
                  ? "東經：" + Math.abs(currentPoint.lng)
                  : "西經：" + Math.abs(currentPoint.lng)
                : ""
            }}
          </span>
          <span>
            {{
              currentPoint
                ? currentPoint.lat > 0
                  ? "北緯：" + Math.abs(currentPoint.lat)
                  : "南緯：" + Math.abs(currentPoint.lat)
                : ""
            }}
          </span>
        </div>
      </div>
    </div>

    <div class="el-col el-col-24 font-size16">
      <div class="el-col el-col-24">
        <div class="color-b2aead">地圖中心點變動爲：</div>
        <div class="color-568dfd">
          <span v-if="centerAddress !== null && centerAddress !== 'getLost'">
            {{
              centerAddress.length
                ? centerAddress
                : "艾瑪，你娃掉海里了，快撈起來！"
            }}
          </span>
          <span v-if="centerAddress === 'getLost'"
            >年輕人你已經迷失了自我，快回去吧！</span
          >
        </div>
      </div>
      <div class="el-col el-col-24">
        <div class="color-b2aead">當前地圖中心位置經緯度爲：</div>
        <div class="color-568dfd">
          <span style="margin-right: 10px">
            {{
              centerPoint
                ? centerPoint.lng > 0
                  ? "東經：" + Math.abs(centerPoint.lng)
                  : "西經：" + Math.abs(centerPoint.lng)
                : ""
            }}
          </span>
          <span>
            {{
              centerPoint
                ? centerPoint.lat > 0
                  ? "北緯：" + Math.abs(centerPoint.lat)
                  : "南緯：" + Math.abs(centerPoint.lat)
                : ""
            }}
          </span>
        </div>
      </div>
    </div>

    <el-row class="el-col el-col-24 queryPar-form-wrapper">
      <el-form
        class="el__form-queryPar"
        ref="ruleForm"
        label-position="left"
        label-width="75px"
        :model="ruleForm"
        :inline="true"
      >
        <el-row class="el-col el-col-24 address-search">
          <el-form-item class="inlineBlock-formItem" prop="parameterAddress">
            <input
              type="text"
              id="parameterAddress"
              size="20"
              placeholder="請輸入定位地址關鍵字"
            />
          </el-form-item>
          <el-button
            class="el-button-fun inlineBlock-formItem"
            @click.stop="positioningAddress()"
            >地址定位</el-button
          >
        </el-row>

        <el-row class="el-col el-col-24 queryPar-button-wrapper"></el-row>
      </el-form>
    </el-row>
  </div>
</template>

百度地圖 - 基礎學習(5): 地圖事件、逆/地址解析：script

<script>
const BMap = window.BMap;

export default {
  name: "mapEventAndAddressResolution",
  props: {
    mapInstance: {
      type: Object,
      required: true,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      ruleForm: {
        parameterAddress: ""
      },
      currentAddress: null, // 鼠標點擊位置地址
      currentPoint: null, // 鼠標點擊位置經緯度座標
      centerAddress: null, // 地圖中心位置地址
      centerPoint: null // 地圖中心經緯度座標
    };
  },
  mounted() {
    this.addEventListener();
    this.addAutocomplete();
  },
  methods: {
    // 給地圖實例添加事件監聽
    addEventListener() {
      let that = this;
      function click(type) {
        that.resolutionAddress("point", "click", type.point);
      }

      function dragend() {
        that.resolutionAddress(
          "point",
          "dragend",
          that.mapInstance.getCenter()
        );
      }

      // 點擊事件
      this.mapInstance.addEventListener("click", click);
      // 拖動事件
      this.mapInstance.addEventListener("dragend", dragend);

      this.$once("hook:beforeDestroy", () => {
        this.mapInstance.removeEventListener("click", click);
        this.mapInstance.removeEventListener("dragend", dragend);
      });
    },

    addAutocomplete() {
      this.parameterAddress = this.customMethods.BMapAutocomplete(
        "parameterAddress",
        this.mapInstance
      );

      let that = this;
      this.parameterAddress.addEventListener("onconfirm", function(e) {
        //鼠標點擊下拉列表後的事件
        that.confirmValue = that.customMethods.BMapOnconfirmJoinValue(e);
        that.parameterAddress.setInputValue(that.confirmValue);
      });
    },

    // 地址定位
    positioningAddress() {
      let that = this;
      this.customMethods.BMapGetPlacePoint(
        this.mapInstance,
        this.confirmValue,
        function(data) {
          that.customMethods.BMapSetMarker(that.mapInstance, data, true);
        }
      );
    },

    // 地址解析(地址-> 座標；座標->地址)
    // type: 解析類別；event: 事件類別；par: 須要解析的參數
    resolutionAddress(type, event, par) {
      let that = this;
      let myGeo = new BMap.Geocoder();
      if (type === "address") {
        myGeo.getPoint(
          par,
          function(point) {
            if (point) {
              console.log(point);
              that.newCenter = point;
              // return point;
              // that.mapInstance.centerAndZoom(point, 16);
              // that.mapInstance.addOverlay(new BMap.Marker(point));
            } else {
              alert("您當前位置已經超出地球範圍，地址沒法解析!");
            }
          },
          that.currentCity
        );
      } else {
        that.mapInstance.clearOverlays(); // 地圖中心或點擊位置發生變更後，新添加標註前，刪除舊有標註
        if (Math.abs(par.lat) < 74) {
          myGeo.getLocation(par, function(result) {
            if (result) {
              if (event === "click") {
                that.currentAddress = result.address;
                that.currentPoint = result.point;
                that.centerAddress = null;
                that.centerPoint = null;
              } else {
                that.centerAddress = result.address;
                that.centerPoint = result.point;
                that.currentAddress = null;
                that.currentPoint = null;
                //北緯和南緯，分別用「N」和「S」表示；東經和西經，分別用「E」和「W」表示。北緯爲正數，南緯爲負數；東經爲正數，西經爲負數。
              }
              that.confirmValue = result.address;
              that.parameterAddress.setInputValue("");
              that.customMethods.BMapSetMarker(
                that.mapInstance,
                result.point,
                true
              );
            } else {
              alert("您當前位置已經超出地球範圍，沒法進行定位!");
            }
          });
        } else {
          if (event === "click") {
            that.currentAddress = "getLost";
            that.currentPoint = null;
            that.centerAddress = null;
            that.centerPoint = null;
          } else {
            that.centerAddress = "getLost";
            that.centerPoint = null;
            that.currentAddress = null;
            that.currentPoint = null;
            //北緯和南緯，分別用「N」和「S」表示；東經和西經，分別用「E」和「W」表示。北緯爲正數，南緯爲負數；東經爲正數，西經爲負數。
          }
        }
      }
    }
  }
};
</script>