- A+
所属分类:Web前端
地图缩放比例ZOOM的获取和设置:template
<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>
地图缩放比例ZOOM的获取和设置:script
<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>