[ SwiftUI ][ Mapbox ] iOS アプリ で Mapbox 地図に マーカー ピン を立てる

eye-catch

関連する 前回の記事で SwiftUI を使って iOS 上に Mapbox の地図を表示することができたので、次の ステップ として地図に マーカー (ピン) を立てて、特定の地点を指し示すようにしてみたいと思います。 Xcode: 13.2.1 iOS: 15.2 Swift: 5.5 mapbox-maps-ios: v10.2.0 Mapbox 公式 ドキュメント の説明 Mapbox 公式 ドキュメント には Example として、以下のように コペンハーゲン に マーカー を表示する サンプル が掲載されています。まずは、その サンプル の内容を確認していくことにします。 引用元: https://docs.mapbox.com/ios/maps/examples/point-annotation/ UIViewController 前回の記事同様、 公式 サイト で提供されているのは UIViewController のものですので、 SwiftUI で扱うためには UIViewControllerRepresentable を用いる必要があります。 考え方は前回の記事と同様ですので、詳細については前回の記事を参考にしてください。 MapBox MapView の生成 サンプル で紹介されている ViewController では最初に マップ の中心を指定し、 マップ を生成しています。 ただし、このままでは マップ を表示することができないため、以下のように修正していきます。 ”Your Access Token” には有効な アクセストークン を指定してください。 myResourceOptions として アクセストークンをセット MapInitOptions に resourceOptions パラメータ を追加 ここで、いくつか馴染みの薄そうな アイテム について補足していきます。 CLLocationCoordinate2D CLLocationCoordinate2D は 緯度  と 経度 を パラメータ として生成する位置情報のオブジェクトです。今回の例では マップ の中心座標として利用しています。 MapInitOptions ResourceOptions として accessToken を指定したり、 CameraOptions として 中心座標や縮尺などを指定した マップ 生成時の オプション 用 オブジェクト です。  cameraState … Read more

SwiftUI で Apple 地図 ( Maps ) を実装する方法 – ピン を 複数 立てる方法 等 –

スマホ アプリ の強みとして「 地図 の表示」や 「場所に ピン を立てること」 が挙げられると思います。 SwiftUI を用いて実装できる 地図 サービス には いくつかの種類がありますが 本記事では Apple 純正の Map を取り上げ、 SwiftUI を用いて 以下を実装する方法について説明していきます。 緯度経度情報を基に 地図 を表示する方法 1 つの ピン を立てる方法 複数 ピン を立てる方法 Xcode: 13.1 iOS: 14.5 Swift: 5 緯度経度を基に 地図 を表示 まずはじめに 緯度経度を基に地図を表示してみたいと思います。 Apple Developer サイト の情報 に従って Apple Park の地図を表示してみます。 MapKit を インポート @State 変数 として MKCoordinateRegion 型の変数 region を作成 MKCoordinateRegion は 以下を引数にもつ 引数 説明 center 中心地点を CLLocationCoordinate2D を 緯度経度 を基に指定 latitudinalMeters 地図に表示する 南北方向の広さを メートル で指定 longitudinalMeters 地図に表示する 東西方向の広さを メートル で指定 Map オブジェクト には 上述した region 変数を引数に指定 ContentView で この View (AppleParkMap) を呼び出す形にして ビルド してみると以下のような結果となります。 コード 上は 東西 南北 共に 750 m としていますが、縦長の画面に表示するため、 南北 750 m として表示されます。 なお … Read more