百度地图 - 基础学习(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>