酢ろぐ！

カレーが嫌いなスマートフォンアプリプログラマのブログ。

Windows PhoneでBing Maps Silverlight Controlを使ってみた

開発-Windows Phone

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

ツールバーの[File]→[New Project]を選択します。Mapコントロールで遊ぶだけですので、Windows Phone Applicationを選択しましょう。名前は適当に「Bing Maps Sample」と付けましょう。MapコントロールにApplication Keyを設定しておかないと以下のような表示になってしまいます。

Bing SDKの認証を行ってDeveloper Keyを取得しましょう。取得の仕方については以下のページをご覧ください。

ToolboxからMapを選び、ドラッグアンドドロップでMainPageに配置してください。

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

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

一つ目のIconButtonでは、現在地へ移動させるように。二つ目ののIconButtonでは、ボタンを押すたびに地図の表示モードを「地図」表示と「写真」表示で切り替えをします。

    <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:ApplicationBar>
    </phone:PhoneApplicationPage.ApplicationBar>

ソースコードの方に、btnLocation_ClickメソッドとbtnChangeMode_Clickメソッドを作ります。

btnLocation_ClickメソッドではGPSで測地した位置座標をMapコントロールに設定しますが、とりあえずここでは僕の職場周辺の大阪駅にしましょう。

private void btnLocation_Click(object sender, EventArgs e)
{
    map1.SetView(new GeoCoordinate(34.701189, 135.496016), 16);
}

btnChangeMode_Clickメソッドは、地図の表示モードを切り替えるにはModeプロパティにインスタンスを設定します。地図にするにはAerialModeのインスタンスを設定します。航空写真で表示するには、RoadModeのインスタンスを設定します。

private void btnChangeMode_Click(object sender, EventArgs e)
{
            ApplicationBarIconButton menuItem
                = ApplicationBar.Buttons[1] as ApplicationBarIconButton;
            if (menuItem == null) return;

            if (map1.Mode is RoadMode)
            {
                menuItem.Text = "地図";
                map1.Mode = new AerialMode();
            }
            else
            {
                menuItem.Text = "写真";
                map1.Mode = new RoadMode();
            }
}

Let's NoteだとVS2010とエミュレータを同時に起動するのが辛いので、実機を持っている方は実機にデプロイして動作確認するのが良いかもしれません。

Map コントロールの表示モードを設定する

Windows PhoneのMapコントロールには、「地図」、「航空写真」と「航空写真（ラベル付き）」の表示モードがあります。Microsoft.Phone.Controls.Maps 名前空間を使用するので、XAMLに以下の名前空間を追加しておきます。

xmlns:maps="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"

例えば、MainPageにてMapコントロールを使用したい場合は、下記のように名前空間を追加しておきます。

<phone:PhoneApplicationPage 
    x:Class="Sample.MainPage"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone"
    xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:maps="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"
    mc:Ignorable="d" d:DesignWidth="480" d:DesignHeight="768"
    FontFamily="{StaticResource PhoneFontFamilyNormal}"
    FontSize="{StaticResource PhoneFontSizeNormal}"
    Foreground="{StaticResource PhoneForegroundBrush}"
    SupportedOrientations="Portrait" Orientation="Portrait"
    shell:SystemTray.IsVisible="True">

地図表示モード

Mapコントロールの表示モードを地図表示モードにします。Modeプロパティを`Road`にします。

XAMLでの表記
<maps:Map Name="map1" Width="460" Height="500" 
    HorizontalAlignment="Left" VerticalAlignment="Top" 
    Mode="Road" />
コードでの表記
map1.Mode = new Microsoft.Phone.Controls.Maps.RoadMode();

上記のXAMLを書くと、下図のように表示されます。

f:id:ch3cooh393:20150415152452p:plain

航空写真表示モード

XAMLでの表記
<maps:Map Name="map1" Width="460" Height="500" 
    HorizontalAlignment="Left" VerticalAlignment="Top" 
    Mode="Road" />
コードでの表記
map1.Mode = new Microsoft.Phone.Controls.Maps.RoadMode();

上記のXAMLを書くと、下図のように表示されます。

f:id:ch3cooh393:20150415152430p:plain

航空写真とラベル表示モード

Mapコントロールの表示モードを航空写真表示モードにします。ModeプロパティをAerialWithLabelsにします。

XAMLでの表記
<maps:Map Name="map1" Width="460" Height="500" 
    HorizontalAlignment="Left" VerticalAlignment="Top" 
    Mode="Road" />
コードでの表記
map1.Mode = new Microsoft.Phone.Controls.Maps.RoadMode();

上記のXAMLを書くと、下図のように表示されます。

f:id:ch3cooh393:20150415152352p:plain