nuits.jp blog

C#, Xamarin, WPFを中心に書いています。Microsoft MVP for Visual Studio and Development Technologies。なお掲載内容は個人の見解であり、所属する企業を代表するものではありません。

Xamarin.Formsで住所と座標(緯度経度)を相互変換する:Android編

こんな記事を書いていて、進捗があるんだかないんだか、分からない感じでしたが一応進めてるよってメッセージも込めて、表題の件をまとめてみました。

nuits.hatenadiary.jp

地図系アプリを作っていると、地名から座標を検索したり、タップした座標から住所を取得したりしたくなるケースって多々あるのではないでしょうか?
今回はそれらを提供するGeocodingをXamarin.Forms上で実装する方法を説明します。

制限事項

なお本稿は、タイトルの通りAndroid上での動作確認しかまだ行っておりません。
iOS向けの権限設定をすればそのまま動くとは思いますが、今回は対象外とさせていただきます。 UWPはそもそもXamarin.Forms.Maps自体がまだ未対応なので。。。

事前準備

まず、Xamarin.Forms上でXamarin.Forms.Mapsを利用できるようにします。
本記事ではその手順の詳細は省かせていただきます。
以下のサイトなどを参考にしていただければ、問題なくできると思います。

qiita.com

www.buildinsider.net

制限事項

今回、Xamarin.Forms.Mapsでマップ自体は表示できるエミュレーター上で試したのですが、Geocodingが正しく動きませんでした。
実際に試される場合、Androidの実機をUSB接続して動作確認をお願いいたします。

実機でデバックする場合、以下のサイトが参考になります。

shunsukekawai.hatenablog.com

ただ、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

これで完成です!

動作確認

それでは実際に動作を確認してみましょう。

条件に、「東京都」を入れて検索してみました。

f:id:nuitsjp:20160329170417p:plain

都庁上にピンが設定され、その住所が表示されていることが見て取れますね。
もういっちょ。
「東京駅」!

f:id:nuitsjp:20160329170610p:plain

なんでじゃ!?
JavaAndroidアプリ作ったときはもう少し精度高かったような?
そもそも、Google Mapではちゃんと東京駅にいくのになぁ。

ま、取りあえず動いたってことで今回は良しと?しておきます。

さいごに

今回作成したソースコードGitHub上に公開しています。
良かったらご利用ください。

github.com

では!