こんな記事を書いていて、進捗があるんだかないんだか、分からない感じでしたが一応進めてるよってメッセージも込めて、表題の件をまとめてみました。
地図系アプリを作っていると、地名から座標を検索したり、タップした座標から住所を取得したりしたくなるケースって多々あるのではないでしょうか?
今回はそれらを提供するGeocodingをXamarin.Forms上で実装する方法を説明します。
制限事項
なお本稿は、タイトルの通りAndroid上での動作確認しかまだ行っておりません。
iOS向けの権限設定をすればそのまま動くとは思いますが、今回は対象外とさせていただきます。
UWPはそもそもXamarin.Forms.Maps自体がまだ未対応なので。。。
事前準備
まず、Xamarin.Forms上でXamarin.Forms.Mapsを利用できるようにします。
本記事ではその手順の詳細は省かせていただきます。
以下のサイトなどを参考にしていただければ、問題なくできると思います。
制限事項
今回、Xamarin.Forms.Mapsでマップ自体は表示できるエミュレーター上で試したのですが、Geocodingが正しく動きませんでした。
実際に試される場合、Androidの実機をUSB接続して動作確認をお願いいたします。
実機でデバックする場合、以下のサイトが参考になります。
ただ、USBドライバの設定自体は、実機のメーカーのドライバがあるようであれば、そちらの方が設定は圧倒的に楽だと思います。
前提条件
まず初めに、事前準備に記載した通り、Xamarin.Forms.Mapsで地図が正しく動作するソリューションを作成してある前提とさせていただきます。
今回はそのソリューションに対して修正していきます。
手順
概要
以下の流れで修正していきます。
1. ContentPageを継承したMapPageクラスを作成する
2. Appクラスのコンストラクタを修正する
3. MapPageクラスにフィールドを追加
4. MapPageクラスのコンストラクタの修正
5. MapPageクラスにGeocodingのコードを追加
以上です。 では詳細に説明していきます。
1.ContentPageを継承したMapPageクラスを作成する
ソリューション名と同じ名前のプロジェクト(PCLプロジェクト)に新たにMapPageクラスを追加してください。
既に存在する場合、一旦削除するか名前を変更してください。
2.Appクラスのコンストラクタを修正する
App.csファイルを開き、コンストラクタを修正します。
以下のように、上の手順で作成したMapPageクラスのインスタンスを作成し、MainPageプロパティに設定してください。
Xamarin.FormsでGeocoding:Android編.01.cs
3.MapPageクラスにフィールドを追加
続いて、先ほど作成したMapPageクラスのメンバー変数として以下を追加してください。
Xamarin.FormsでGeocoding:Android編.02.cs
4.MapPageクラスのコンストラクタの修正
続いてMapPageのコンストラクタを以下のように修正します。
Xamarin.FormsでGeocoding:Android編.03.cs
画面上部に検索バーを表示し、その下に地図を表示する画面を作成します。
5. MapPageクラスにGeocodingのコードを追加
それでは、いよいよGeocodingのコードを追加していきます。
処理の概要としては、検索バーで入力された条件に従い、Geocoderを利用して地名から緯度・経度を取得します。
その後、取得された座標から、今度は住所を逆引きします。
その上で、取得した座標上に住所を表示するピンを設置します。
細かい処理はコード内にコメントを記載しておきましたので確認ください。
では、手順4.の中で、SearchBarのSearchButtonPressedに設定したメソッドを追加してください。
以下の通りです。
Xamarin.FormsでGeocoding:Android編.04.cs
これで完成です!
動作確認
それでは実際に動作を確認してみましょう。
条件に、「東京都」を入れて検索してみました。
都庁上にピンが設定され、その住所が表示されていることが見て取れますね。
もういっちょ。
「東京駅」!
なんでじゃ!?
JavaでAndroidアプリ作ったときはもう少し精度高かったような?
そもそも、Google Mapではちゃんと東京駅にいくのになぁ。
ま、取りあえず動いたってことで今回は良しと?しておきます。
さいごに
今回作成したソースコードはGitHub上に公開しています。
良かったらご利用ください。
では!