前面在創建地圖實體后，對其進行初始化時，呼叫了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 >
<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 >
<el-button
class="el-button-fun"
@click.stop="setZoom('setZoom', ruleForm.mapZoom)"
>設定級別</el-button
>
<el-button @click.stop="setZoom('amplification')"
>放大一級</el-button
>
</el-row>
<el-row >
<el-button @click.stop="setZoom('narrow')"
>縮小一級</el-button
>
<el-button @click.stop="getZoom('current')"
>獲取當前ZOOM</el-button
>
</el-row>
<el-row v-if="currentZoom">
<label >當前地圖縮放級別為：</label>
<label >{{ 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>
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/244636.html
標籤：JavaScript