情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

方法: Windows Phone の Bing マップ Silverlight コントロールを使用する

2012/02/09

このトピックでは、Windows Phone の Bing Maps Silverlight コントロールの使用方法を示します。この完成したマップ コントロール サンプルについては、「Windows Phone のコード サンプル」を参照してください。

注注:

次の手順は、Visual Studio 2010 Express for Windows Phone 向けです。 Visual Studio 2010 Professional や Visual Studio 2010 Ultimate のアドインを使用している場合は、メニュー コマンドやウィンドウのレイアウトが多少異なる場合があります。

このトピックでは、Windows Phone プロジェクトでの Bing Maps Silverlight コントロールの使用方法を示します。完成したサンプルにはマップ コントロールが含まれ、マップ モードをロード モード航空モードの間で切り替えるための 2 つのボタンと、マップを拡大および縮小するための 2 つのボタンが提供されます。

新しいプロジェクトを作成するには

  1. Windows Phone SDK を App Hub からダウンロードしてインストールしてあることを確認します。

  2. Windows のスタート メニューから Visual Studio 2010 Express for Windows Phone を起動します。

  3. [ファイル | 新しいプロジェクト] メニュー コマンドをクリックして、新しいプロジェクトを作成します。

  4. [新しいプロジェクト] ウィンドウが表示されます。Visual C# のテンプレートを展開してから、Silverlight for Windows Phone のテンプレートを選択します。

  5. Windows Phone Application テンプレートを選択します。目的のプロジェクトの [名前] を入力します。

  6. [OK] をクリックします。新しプロジェクトが作成され、Visual Studio デザイナー ウィンドウで MainPage.xaml が開きます。

次の手順では、Visual Studio デザイナーを使用してアプリケーションのコントロールをレイアウトします。コントロールを追加した後の最終的なレイアウトは、次のスクリーンショットのようになります。

MapLayout

アプリケーションのコントロールを追加するには

  1. Visual Studio のツールボックスで、Map コントロールを選択します。デザイナーで新しい Map コントロールを作成します。コントロールの既定の名前は map1 です。

  2. Visual Studio のツールボックスで、Button コントロールを選択します。デザイナーで Map コントロールの下に新しい Button コントロールを 4 つ作成します。4 つのボタンのテキストを、Road ModeAerial ModeZoom InZoom Out に設定します。4 つのボタンの名前を、buttonRoadbuttonAerialbuttonZoomInbuttonZoomOut に設定します。

            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <my:Map Height="462" HorizontalAlignment="Left" Margin="6,6,0,0" Name="map1" VerticalAlignment="Top" Width="444" />
    
                <Button Content="Road Mode" Height="72" HorizontalAlignment="Left" Margin="6,474,0,0" Name="buttonRoad" VerticalAlignment="Top" Width="207" />
                <Button Content="Aerial Mode" Height="72" HorizontalAlignment="Left" Margin="243,474,0,0" Name="buttonAerial" VerticalAlignment="Top" Width="207" />
                <Button Content="Zoom In" Height="72" HorizontalAlignment="Left" Margin="6,535,0,0" Name="buttonZoomIn" VerticalAlignment="Top" Width="207" />
                <Button Content="Zoom Out" Height="72" HorizontalAlignment="Left" Margin="243,535,0,0" Name="buttonZoomOut" VerticalAlignment="Top" Width="207" />
            </Grid>
    
    
    
  3. 図とまったく同じレイアウトにしたい場合は、上記の XAML をコピーして貼り付け、それを使用して MainPage.xaml ファイルのグリッド レイアウトを置き換えてください。

  4. アプリケーション ウィンドウのタイトルも適切なものに変更してかまいません。

この手順では、4 つのボタンを実装するコードを追加します。

コードを追加するには

  1. MainPage.xaml.cs ファイルの using Microsoft.Phone.Controls.Maps;using ステートメントを追加します。

  2. Road Mode ボタン コントロールをダブルクリックします。これにより、buttonRoad_Click イベント ハンドラーが MainPage.xaml.cs ファイルに作成されます。次のようにモードを設定してメソッドを実装します。

            private void buttonRoad_Click(object sender, RoutedEventArgs e)
            {
                map1.Mode = new RoadMode();
            }
    
    
  3. Aerial Mode ボタン コントロールをダブルクリックします。これにより、buttonAerial_Click イベント ハンドラーが MainPage.xaml.cs ファイルに作成されます。次のようにモードを設定してメソッドを実装します。

            private void buttonAerial_Click(object sender, RoutedEventArgs e)
            {
                map1.Mode = new AerialMode();
            }
    
    
  4. Zoom In ボタン コントロールをダブルクリックします。これにより、buttonZoomIn_Click イベント ハンドラーが MainPage.xaml.cs ファイルに作成されます。次のようにズーム値を設定してメソッドを実装します。

            private void buttonZoomIn_Click(object sender, RoutedEventArgs e)
            {
                double zoom;
                zoom = map1.ZoomLevel;
                map1.ZoomLevel = ++zoom;
            }
    
    
  5. Zoom Out ボタン コントロールをダブルクリックします。これにより、buttonZoomOut_Click イベント ハンドラーが MainPage.xaml.cs ファイルに作成されます。次のようにズーム値を設定してメソッドを実装します。

            private void buttonZoomOut_Click(object sender, RoutedEventArgs e)
            {
                double zoom;
                zoom = map1.ZoomLevel;
                map1.ZoomLevel = --zoom;
            }
    
    
  6. ボタンの XAML が更新されて、イベント ハンドラーが組み込まれます。

            <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
                <my:Map Height="462" HorizontalAlignment="Left" Margin="6,6,0,0" Name="map1" VerticalAlignment="Top" Width="444" />
                <Button Content="Zoom In" Height="72" HorizontalAlignment="Left" Margin="6,535,0,0" Name="buttonZoomIn" VerticalAlignment="Top" Width="207" Click="buttonZoomIn_Click" />
                <Button Content="Road Mode" Height="72" HorizontalAlignment="Left" Margin="6,474,0,0" Name="buttonRoad" VerticalAlignment="Top" Width="207" Click="buttonRoad_Click" />
                <Button Content="Zoom Out" Height="72" HorizontalAlignment="Left" Margin="243,535,0,0" Name="buttonZoomOut" VerticalAlignment="Top" Width="207" Click="buttonZoomOut_Click" />
                <Button Content="Aerial Mode" Height="72" HorizontalAlignment="Left" Margin="243,474,0,0" Name="buttonAerial" VerticalAlignment="Top" Width="207" Click="buttonAerial_Click" />
            </Grid>
    
    
    

アプリケーションが完成しました。この手順では、アプリケーションのビルド、実行、およびデバッグを行います。

MapRunning
注注:

このサンプルを実行すると、マップ コントロールの背景に "無効な資格情報" のメッセージが表示されます。キーを取得して使用する方法については、「Bing マップ キーの取得」および「Bing マップ キーを使用してコントロールにアクセスする」を参照してください。

アプリケーションをビルドしてデバッグするには

  1. [デバッグ]、[ソリューションのビルド] の順にメニュー コマンドを選択してソリューションをビルドします。プロジェクトのビルドは、[エラー一覧] ウィンドウにはエラーが表示されずに行われる必要があります。[エラー一覧] ウィンドウをまだ開いていない場合は、[表示]、[その他のウィンドウ]、[エラー一覧] の順にメニュー コマンドを選択して開きます。エラーがある場合、前述の手順を確認してエラーしを修正し、ソリューションをもう一度ビルドします。

  2. [デバッグ]、[デバッグ開始] の順にメニュー コマンドを選択してアプリケーションを実行します。これによってエミュレーター ウィンドウが開き、アプリケーションが起動します。使用しているデスクトップ コンピューターでインターネットにアクセスできることを確認します。その後、ボタンをクリックし、マップ コントロールが応答することを確認して、アプリケーションをテストします。

  3. コードにデバッグ ブレークポイントを設定するには、コードの目的の行にカーソルを置き、[デバッグ]、[ブレークポイントの設定/解除] の順にメニュー コマンドを選択します。

  4. デバッグを停止するには、[デバッグ]、[デバッグの停止] メニュー コマンドを選択します。

表示:
© 2015 Microsoft