百度地图 - 基础学习(2): 地图缩放级别ZOOM的获取和设置

前面在创建地图实例后，对其进行初始化时，调用了BMap.Map.centerAndZoom()方法，该方法接收两个参数：1、中心点坐标Point，2、地图缩放级别zoom(3-19级) 。这里第一次出现zoom。

ZOOM：地图缩放级别，即当前地图区域放大显示的级别，值为3到19的整数。数字越小，地图显示的范围区域越大，但比较模糊，只是一个区域概念，无法具体。反之数字越大，地图显示的范围区域越小，但更详细，更精确。

that.mapInstance.centerAndZoom(
  new BMap.Point(r.longitude, r.latitude),
  13 // 这里的13就是初始化时设置的zoom
); // 地图初始化,设置中心点坐标(本地)和地图缩放比例。Point也可以设定为一个固定值，如天安门()

 

1、获取当前ZOOM：

// 获取地图当前缩放级别Zoom
getZoom() {
  return this.mapInstance.getZoom(); // 前面地图初始化时已获取map实例(this.mapInstance)，故这里直接通过api获取
}

，若后续地图操作和交互中并未修改过zoom值，则此时获取的zoom为地图初始化时的zoom。修改过的zoom值，则获取的是修改过后的值。

2、设置ZOOM：

// 设置地图缩放级别Zoom
setZoom(newZoom) {
  this.mapInstance.setZoom(newZoom); // 前面地图初始化时已获取map实例，故这里直接通过api设置。
  // setZoom方法接受正整数(3~19)或小数(3.0~19.0)，虽然接受小数，实际上是取了整的，按整数设置。故最好输入正整数
},

3、总结：实际开发过程中，可能不会如此单调的直接调用两个API，更多的估计是通过这两个API进行地图适度的放大和缩小，如：搜索某具体地址时，通过给zoom设置一个较大值，从而将地图放大，以求显示得更精确；同理在搜索一个较大区域时，将zoom值变小，从而使得地图可以显示更大的区域。

 

组件源码备份：

<template>
  <el-row class="el-col el-col-24 queryPar-form-wrapper">
    <el-form
      class="el__form-queryPar"
      ref="ruleForm"
      label-position="top"
      :model="ruleForm"
    >
      <el-form-item prop="mapZoom">
        <el-input
          type="text"
          placeholder="请输入地图缩放级别,区间为3~19"
          v-model.trim="ruleForm.mapZoom"
        ></el-input>
      </el-form-item>
    </el-form>
    <el-row class="el-col el-col-24 queryPar-button-wrapper">
      <el-button
        class="el-button-fun"
        @click.stop="setZoom('setZoom', ruleForm.mapZoom)"
        >设置级别</el-button
      >
      <el-button class="el-button-fun" @click.stop="setZoom('amplification')"
        >放大一级</el-button
      >
    </el-row>
    <el-row class="el-col el-col-24 queryPar-button-wrapper">
      <el-button class="el-button-fun" @click.stop="setZoom('narrow')"
        >缩小一级</el-button
      >
      <el-button class="el-button-fun" @click.stop="getZoom('current')"
        >获取当前ZOOM</el-button
      >
    </el-row>

    <el-row class="el-col el-col-24 font-size16" v-if="currentZoom">
      <label class="color-b2aead">当前地图缩放级别为：</label>
      <label class="color-568dfd">{{ currentZoom ? currentZoom : "" }}</label>
    </el-row>
  </el-row>
</template>

<script>
export default {
  name: "mapZoom",
  props: {
    mapInstance: {
      type: Object,
      required: true,
      default: () => {
        return {};
      }
    }
  },
  data() {
    return {
      ruleForm: {
        mapZoom: null
      },
      currentZoom: null
    };
  },

  methods: {
    // 设置地图缩放级别Zoom
    setZoom(type, zoom) {
      let newZoom = 0;
      switch (type) {
        case "amplification": {
          newZoom = this.getZoom() + 1;
          break;
        }
        case "narrow": {
          newZoom = this.getZoom() - 1;
          break;
        }
        case "setZoom": {
          if (zoom) {
            newZoom = Number(zoom);
          } else {
            return;
          }
          break;
        }
      }
      this.currentZoom = null;
      this.mapInstance.setZoom(newZoom); // 前面地图初始化时已获取map实例，故这里直接通过api设置。
      // setZoom方法接受正整数(3~19)或小数(3.0~19.0)，虽然接受小数，实际上是取了整的，按整数设置。故最好输入正整数
    },

    // 获取地图当前缩放级别Zoom
    getZoom(type) {
      let tempZoom = this.mapInstance.getZoom(); // 前面地图初始化时已获取map实例(this.mapInstance)，故这里直接通过api获取
      if (!type) {
        return tempZoom;
      } else {
        this.currentZoom = tempZoom;
      }
    }
  }
};
</script>

<style scoped>
.el__form-queryPar >>> .el-form-item__content {
  width: 100%;
}
.queryPar-button-wrapper,
.font-size16 {
  margin-top: 10px;
}
</style>