Mapsの基礎知識
- 緯度(latitude)・経度(longitude)で位置を特定する
- Apple Maps / Google Maps などの 地図API を使って、緯度・経度を基準にベースの地図を表示する。
できること
- ⭐️⭐️⭐️⭐️⭐️地図の表示
- ⭐️⭐️⭐️⭐️マーカーの設置(ピンのこと)
- ⭐️⭐️⭐️円の描画(半径○m以内を笑んで囲う設定)
- ⭐️ポリライン（線）の描画 (ピン同士を結ぶ線)
- ⭐️ポリゴン（多角形）の描画(ポケモンのポリゴンみたいなもの)
- ⭐️⭐️⭐️アノテーション（ピンの側につけれるテキストや画像など）
- ⭐️⭐️カメラ操作(カメラの視点をどこにおくかの設定)
- ⭐️⭐️地図の機能設定（標準搭載されているコンパスや位置情報ボタン）
- ⭐️⭐️⭐️⭐️イベントハンドリング(どこをクリックしたのかなどを取得できる)
見た目
円やピン触ってみて思ったこと
自社サービスで使っていきたいなと思っていたんですが、問題ないのかなと思います。
ユーザーが歩いた場所を1分単位ぐらいでDBに送り広告主に見てもらう際にこのExpo Mapsで要件を満たせるのかなと思いました。
実際にModal出したり複雑なロジックをすると不便に感じたりする部分もあると思いますので、その時はまたこのブログを更新できればと思います。
Propsの説明
- ref={mapRef}: コンポーネントへの参照。
- style={{ flex: 1 }}: コンポーネントの見た目を指定（ここでは全画面表示）。
- cameraPosition={{ coordinates, zoom }}:
- markers={markers}:
- マーカーを配置（位置・タイトル・色などを設定可能）。
- { id: "sapporo", title: "札幌駅", lat: 43.068661, lon: 141.350755, tintColor: "green" }のような項目があるので入れると自動でピンが表示される
- polylines={polylines}:
- 複数の座標を結ぶ線を描画。
- {id, coordinates, latitude, longitude, color, width, style}が設定できる。
- polygons={polygons}: 多角形を描画。
- circles={circles}: 円を描画。
- annotations={annotations}: 注釈（ラベルやアイコン付き表示）を追加。
- uiSettings={{ ... }}: 地図UIのON/OFF（コンパス・現在地ボタン・スケールバー・3D切替など）。
- properties={{ ... }}: 地図の表示設定（現在地表示・交通情報・地図タイプ・標高・強調表示・オブジェクト選択・タップ判定範囲）。
- onMapClick={(e) => ...}: 地図クリック時のイベントを取得。
- onMarkerClick={(e) => ...}: マーカークリック時のイベントを取得。
- onPolylineClick={(e) => ...}: ポリライン（線）クリック時のイベントを取得。
- onPolygonClick={(e) => ...}: ポリゴン（多角形）クリック時のイベントを取得。
- onCircleClick={(e) => ...}: 円クリック時のイベントを取得。
- onCameraMove={(e) => ...}: カメラ移動時のイベントを取得。
手順
手順に関しては割愛させていただきます。
公式ブログとYoutubeを見れば簡単にできました。
https://docs.expo.dev/versions/latest/sdk/maps/
https://www.youtube.com/watch?v=jDCuaIQ9vd0
気をつける点
- android環境でのpropertiesのisMyLocationEnabledを最初からtrueにするとCrashします。
おすすめTips
このようにGoogle Maps APIキーをconfigファイルに入れないといけないですが、EAS EnviromentのGlobal環境に入れておくことでどのプロジェクトでも使用できます。
Production, Preview, Developmentだけに適用して本番環境はそれぞれ取得しにいくのが良いのかなと思っています。
"config": {
"googleMaps": {
"apiKey": "${EXPO_PUBLIC_GOOGLE_MAPS_API_KEY}"
}
}
最後に
株式会社 革新技術では、Expoを使用したアプリ開発が得意です！
どんなアプリを作れるのか興味ある方はお問い合わせかホームページを見ていただけますと幸いです。
アプリ実績: https://www.kakushin-gijutu.com/work/app
お問い合わせ: https://www.kakushin-gijutu.com/contact
採用もしていますのでご興味ある方はお話ししましょう！！
