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

第21回 Bing Mapsで遊んでみよう!(2)

この記事を読むのに必要な時間:およそ 3 分

はじめに

Windows Phone 7のローンチイベントで年末商戦に向けて,アメリカのDell,台湾のHTC,韓国のSamsungとLGの4メーカーから以下の10種類の端末が発表されました。

  • HTC 7 Surround
  • HTC HD 7
  • HTC 7 Trophy
  • HTC 7 Mozart
  • HTC 7 Pro
  • Dell Venue Pro
  • Samsung Focus
  • Samsung Omnia 7
  • LG Optimus
  • LG Quantum

Windows Phone 7の第一弾の端末が既に10月21日にヨーロッパとアジアで発売されました。Microsoftの越川本部長がシンガポールで,どこのお店も売り切れ続出と現地の方々の白熱振りをTwitterで実況されていましたね。

いずれも日本のキャリアから発売される旨の発表はありませんが,日本に向けてのローカライズは進んでいるようです。日本語SDKが出てくるのが待ち遠しいですね。

さて,引き続きBing Mapsを使って遊んでみましょう。今回はGPS(Location Service)を使った現在地の表示をしてみましょう。

実装のための準備をしよう

前回ApplicationBarIconButtonを有効にしました。今回使用する機能を実行するためのアイコンボタンを定義します。

GPSを使って現在地にピンをプロットする「現在地」ボタン,航空写真モードと地図モードを切り替える「写真」ボタン,コード上から意図した箇所にピンを立てる「プロット」ボタンを用意します。

<phone:PhoneApplicationPage.ApplicationBar>
    <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
        <shell:ApplicationBarIconButton 
          IconUri="/Images/icon.png" 
          Click="btnLocation_Click" Text="現在地" />
        <shell:ApplicationBarIconButton 
          IconUri="/Images/icon.png" 
          Click="btnChangeMode_Click" Text="写真" />
        <shell:ApplicationBarIconButton 
          IconUri="/Images/icon.png" 
          Click="btnSetPin_Click" Text="プロット" />
    </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>

航空写真モードと地図モードを切り替える「写真」ボタンは,前回実装した表示モードの切り替えになるので,説明は省かせて頂きます。

ズームレベルを変更する

Bing Mapsには,縮尺を定義する「ズームレベル」があります。0から20までの定義値をもっています。0の場合は世界地図レベル,20の場合は最接近したレベルです。

ただし日本の航空写真は,接近させるとデータがないのか画像が引き延ばされただけのものになってしまいます。綺麗に航空写真を表示させたい場合は,場所によりますが経験上レベルを18あたりにするのが良いかもしれません。

コード上からBing Mapsズームレベルを変更する方法をご紹介します。座標は,またまた僕の職場の近くの大阪駅(34.701189, 135.496016)を指しています。ZoomLevelは数字が大きいほど地図が詳細になり,逆に数字が小さいほどより多くの範囲を表示できます。

判りやすいように,最初から航空写真を表示させるモードにしています。ズームレベルの違いによる差を見てください。

ZoomLevel 10

private void btnLocation_Click(object sender, EventArgs e)
{
    map1.ZoomLevel = 10;
}

図1 ズームレベルを10にした場合の航空写真

図1 ズームレベルを10にした場合の航空写真

ZoomLevel 18

private void btnLocation_Click(object sender, EventArgs e)
{
    map1.ZoomLevel = 18;
}

図2 ズームレベルを18にした場合の航空写真

図2 ズームレベルを18にした場合の航空写真

ピンをプロットする

地図を使っているアプリケーションの場合,例えば目的地を示すためにピンを立てたい場合があります。そのような時は,Pushpinクラスのインスタンスを生成し,ピンを立てる位置を設定し,マップの子要素に追加します。

private void btnSetPin_Click(object sender, EventArgs e)
{
    var pin = new Pushpin();
    pin.Location = new GeoCoordinate(34.701189, 135.496016);
    map1.Children.Add(pin);
}

図3 ピンをプロットする

図3 ピンをプロットする

著者プロフィール

和田健司(わだけんじ)

1982年10月12日生まれ。大阪で働くプログラマ。Microsoft MVP for Device Application Development(Jul 2010 - Jun 2011)。Windows Mobileに傾倒し今に至る。Windows Mobile向けのTipsを書いています。iPhoneアプリ開発を始めました。嫌いな食べ物はカレー。

URL: http://ch3cooh.jp/
Blog: http://d.hatena.ne.jp/ch3cooh393/

コメント

コメントの記入