🍣

【RN】react-native-maps番外編①「OSの地図アプリを開く」

2021/10/20に公開

JavaScript

はじめに

ReactNativeで地図を扱う上ではreact-native-mapsを使うケースがほとんどだと思います。
自分の過去記事の中でも何回か使い方に触れてきました。

地図にデータをプロットしたりと、一通りのことは公式を読み進めればできると思いますが、応用的な内容として「OS内蔵の地図アプリを開く」といったものがあります。

今回は、react-native-mapsのLatlng型から、OS内蔵の地図アプリを開く方法について紹介します。

前提条件

react-native-mapsは組み込み済み
地図にプロットしたデータからLatlngを抽出済み

Latlng型とは？

文字通り「緯度経度」を表す型です。
react-native-mapsの型定義では以下のようになっています。

export interface LatLng  {
  latitude: number;
  longitude: number;
}

Markerのプロパティや、地図を起点として様々なイベントはこのLatlngを値として持っています。
※例えば、地図の任意の位置をタップしたイベント等

実際の処理

まず先に処理の全体像を紹介します。

import {Linking, Platform} from 'react-native';
import {Latlng} from 'react-native-maps';

const openMapWithLatlng = (latlng: LatLng, label: string): void => {
  // OSによって呼び出すアプリのスキーマが異なる
  const scheme = Platform.select({ ios: 'maps:0,0?q=', android: 'geo:0,0?q=' });
  // 緯度経度を「,」で結合する
  const latLng = `${latlng.latitude},${latlng.longitude}`;
  // 諸々の情報を結合
  const url = Platform.select({
    ios: `${scheme}${label}@${latLng}`,
    android: `${scheme}${latLng}(${label})`
  });

  // 開く
  Linking.openURL(url);
}

続いて細かく解説していきます。

`Platform.select`でOS依存の値を抽出

今回の目的であるOS内蔵の地図アプリの開き方は当然OSによって異なります。
具体的には最終的にLinking.openURLをするのですが、そのリンクが違うというわけです。

そこでPlatform.selectを使ってリンクを組み立てていきます。

Platform.selectはコードが動作するOS毎に指定した値を返却してくれます。

const hoge = Platform.select({
    ios: 'aaa',
    android: 'bbb'
});

// iOSで実行したらaaa
// Androidで実行したらbbb
console.log(hoge);

ちなみにOSごとのリンクは接頭辞がgeoかmapsかだったり、緯度経度の指定の仕方が違ったりします。

最終的に組み立てたリンクに場所名を含める

最終的には地図アプリが開き、指定した地点にマーカーが乗った状態になります。
そのマーカーが乗った場所の名称を指定する必要があります。

関数中におけるlabelがそれに該当し、ここには建物名などランドマーク的な要素が入ります。

まとめ

今回はreact-native-mapsのLatlngを使ってOS内蔵の地図アプリを開く処理について紹介しました。

他のアプリと連携できるようになると、途端にアプリがリッチな感じになりますね。

今回の内容が役立てば幸いです。