react-native-mapsでzoom levelをset/getする方法

react-native-maps

こいつを使って地図を表示しているんだけど、素のGoogleMapSDKと違って、zoom levelの設定や取得のメソッドが無い。
という訳で、いつもの通りGoogle先生。

zoom levelをsetする方法

Zoom level

ここに書いてあるように、latitudeDeltaの値で調整する。
0.01刻みで変更しつつ調整した。

var { width, height } = Dimensions.get('window');
const ASPECT_RATIO = width / height;

const LATITUDE_DELTA = 0.02;
const LONGITUDE_DELTA = LATITUDE_DELTA * ASPECT_RATIO;

こんな感じ。

zoom levelをgetする方法

How can get Map zoom level?

ここの式を利用する。
ただ、ピンチインアウトで拡大縮小すると少数になったのと、数字が取れれば良かったので+1は削除して、こんな感じでやっている。

var zoom: number = Math.floor(Math.log2(360 * ((width/256)/region.longitudeDelta)))

とりあえず、これで望みはかなった。