Windows Phoneアプリケーション開発入門

第20回Bing Mapsで遊んでみよう!(1)

はじめに

RTWのリリース後、今までWindows Phone 7アプリケーションはC#でしか開発ができませんでしたが、VB.NET開発者向けに「Microsoft Visual Basic CTP for Windows Phone Developer Tools」が9月23日にリリースされています。

Windows Mobile 6.5でVB.NETを使っていた方々にも、Windows Phone 7アプリケーション開発へ参入していけるのではないかと思っています。まだCTP版ということでMarketplaceへは登録ができないようです。ただC#のRTWと環境的には変わりありませんので、アドインの完成までにVB.NETでアプリケーションを作っておくのもよいかもしれませんね。

RTWからの新しいコントロール「Bing Maps」

さて、Windows Phone Develop Tools RTWから標準コントロールとして、Bing Maps Contorlが追加されました。今回はBing Maps Controlを使って少し遊んでみましょう。

実際にVisual Studio上からの操作に入る前に、MapコントロールにBing Maps Keyを設定しておかないと、アプリケーションの実行時に以下のスクリーンショットのようにエラーが表示されてしまいます。

図1 エラーが表示されたBing Maps
図1 エラーが表示されたBing Maps

Bing Maps Keyを取得する

Bing Mapsの利用にはKeyが必要になりますので、Bing Maps Account Centerより取得しましょう。Windows Live IDをお持ちの方は、オレンジ色のボタン「Sign in」をクリックしてください。Windows Live IDをお持ちでない方は「Create」を選択してください。

図2 既にWindows Live IDがある場合は「Sing in」
図2 既にWindows Live IDがある場合は「Sing in」を

必要事項を明記のうえ、Mapsアカウントを作成します。

図3 Mapsアカウントの作成
図3 Mapsアカウントの作成

アカウントの作成が問題なく完了すると、アカウントの詳細情報が書かれた画面へ遷移しますが、ここでは特に必要な情報はありません。

図4 アカウントの詳細情報
図4 アカウントの詳細情報

左端にあるメニューの中から「Create or view keys」を探してください。Bing Maps Keyの発行を行いましょう。

図5 ⁠Create or view keys」をクリックします
図5 「Create or view keys」をクリックします

過去にBing Maps Keyを発行したアプリについても情報が記載されています。今回は新しくKeyを作成しましょう。⁠Application name」⁠Application URL」⁠Application Type」の欄を記入し、右下の「Create key」をクリックしてください。

図6 Bing Maps Keyの発行
図6 Bing Maps Keyの発行

こちらもキーの作成が問題なく完了すると、同じ画面の下の方にBing Maps Keyが表示されます。のちほどこのKeyを使います。

図7 Bing Maps Keyが表示されます
図7 Bing Maps Keyが表示されます

Bing Maps Sampleアプリを作ってみよう

ツールバーの[File⁠⁠→⁠New Project]を選択します。Mapコントロールで遊ぶだけですので、Windows Phone Applicationを選択しましょう。名前は適当に「Bing Maps Sample」と付けましょう。

ToolboxからMapコントロールを選び、ドラッグアンドドロップでMainPageに配置してください。以下のようなXAMLになっているかと思います。

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <my:Map Height="596" HorizontalAlignment="Left" 
            Margin="0,6,0,0" Name="map1" 
            VerticalAlignment="Top" Width="450" />
</Grid>

CredentialsProviderプロパティに先ほど取得したBing Maps Keyを入れてください。

<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <my:Map Height="596" HorizontalAlignment="Left" 
            Margin="0,6,0,0" Name="map1" 
            VerticalAlignment="Top" Width="450" 
            CredentialsProvider="【Bing Maps Keyを入れる】" />
</Grid>

さてアプリを実行してみましょう。エラーが消えているのが確認できましたでしょうか。

図8 
図8 

位置座標を設定して表示する

大阪駅を中心に表示させてみましょう。大阪駅の位置は大ざっぱですが、34.701189, 135.496016辺りになります。一番簡単なのはプロパティウィンドウで設定を行うことです。

図9 プロパティウィンドウで設定を行う
図9 プロパティウィンドウで設定を行う

コードから動的に場所を変更したい場合は、上記と同じくCenterプロパティに位置座標を設定してください。MainPage.xamlにSystem.Device.Location名前空間をusing宣言しておきます。

// for location
using System.Device.Location;

マップのLoadedイベントで、位置情報をCenterプロパティに設定します。

private void map1_Loaded(object sender, RoutedEventArgs e)
{
    map1.Center = new GeoCoordinate(34.701189, 135.496016);
}

航空写真モードで表示する

Mapコントロールに対する操作を行うため、コメントアウトされているApplicationBarIconButtonを有効にします。

一つ目のIconButtonでは地図の表示モードを「地図」表示に、二つ目ののIconButtonでは、⁠写真」表示で切り替えをします。

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
          <shell:ApplicationBarIconButton 
            IconUri="/Images/icon.png" 
            Click="btnRoadMode_Click" Text="地図" />
          <shell:ApplicationBarIconButton 
            IconUri="/Images/icon.png" 
            Click="btnAerialMode_Click" Text="写真" />
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

ソースコードのほうに、btnAerialMode_ClickメソッドとbtnRoadMode_Clickメソッドを作ります。btnChangeMode_Clickメソッドは、地図の表示モードを切り替えるにはModeプロパティにインスタンスを設定します。

表示モードを地図にするにはRoadModeのインスタンスを設定します。

private void btnRoadMode_Click(object sender, EventArgs e)
{
    map1.Mode = new Microsoft.Phone.Controls.Maps.RoadMode();
}
図10 地図の表示モード
図10 地図の表示モード

航空写真で表示するには、AerialModeのインスタンスを設定します。

private void btnAerialMode_Click(object sender, EventArgs e)
{
    map1.Mode = new Microsoft.Phone.Controls.Maps.AerialMode();
}
図11 航空写真の表示モード
図11 航空写真の表示モード

さいごに

Bing Mapsコントロールを使って、Windows Phone 7で地図を表示するのはいかがでしたでしょうか。まだWindows Phone 7自体が日本で発売される予定がないためか、路地レベルの地図には対応していないようでした。この辺りは今後のアップデートに期待したいですね。

次回は、引き続きBing Mapsコントロールを活用したTipsをご紹介します。よりWindows Phone 7らしいセンサーを使った地図の活用もご紹介していけたらと思います。

以上で今回は終わりです。ありがとうございました。

おすすめ記事

記事・ニュース一覧