百度地图 – 基础学习(2): 地图缩放比例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="请输入地图缩放级别,区间为4~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方法接受正整数(4~19)或小数(4.0~19.0)，虽然接受小数，实际上是取了整的，按整数设置。故最好输入正整数     },      // 获取地图当前缩放比例Zoom     getZoom(type) {       let tempZoom = this.mapInstance.getZoom(); // 前面地图初始化时已获取map实例，故这里直接通过api获取       if (!type) {         return tempZoom;       } else {         this.currentZoom = tempZoom;       }     }   } }; </script>