エクスポート (0) 印刷
すべて展開
情報
要求されたトピックは次のとおりです。しかし、このトピックはこのライブラリには含まれていません。

Windows Phone 8 のマップとナビゲーション

2014/06/18

対象: Windows Phone 8 および Windows Phone Silverlight 8.1 のみ

Windows Phone 8 の新しい Maps API を使用して、マップベースのアプリを開発し、位置情報機能と検索機能を組み込むことができます。このトピックでは、新しいマップ コントロール、マップ モード、およびマップ ビューを紹介します。

メモメモ:

Windows Phone 8 の新しい Maps API は、Windows Phone OS 7.1 で使用可能な Bing Maps とは異なっています。Bing Maps コントロールは Windows Phone 8 でも引き続きサポートされますが、ただし非推奨です。通常、Bing Maps を使用する必要があるのは、Windows Phone OS 7.1 から Windows Phone 8 にアップグレードした既存のアプリを使用する場合だけです。

Icon to indicate an SDK sample

このトピックで説明している一部のタスクを実演するサンプルについては、「Simple Map control sample」を参照してください。

プッシュピンなどの Maps API の便利な拡張機能については、Windows Phone Toolkit をダウンロードしてください。

このトピックは、次のセクションで構成されています。

Windows Phone 8 アプリでマップを表示するには、Map コントロールを使用します。詳細については、「Windows Phone 8 でマップ コントロールをページに追加する方法」を参照してください。

重要:重要:

このコントロールを使用するには、アプリ マニフェスト ファイルで ID_CAP_MAP 機能を選択する必要があります。詳細については、「Windows Phone 8 のアプリ マニフェスト ファイルを変更する方法」を参照してください。

XAML を使用してマップを表示する

XAML を使用して Windows Phone 8 アプリで Map コントロールを表示する方法を、次のコード例で示します。


<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
    <maps:Map />
</Grid>

XAML を記述してコントロールを追加するには、phone:PhoneApplicationPage 要素に次の xmlns 宣言を追加することも必要です。Toolbox から Map コントロールをドラッグ アンド ドロップする場合、この宣言は自動的に追加されます。

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

コードを使用してマップを表示する

コードを使用して Windows Phone 8 アプリで Map コントロールを表示する方法を、次のコード例で示します。

using Microsoft.Phone.Maps.Controls;

...

    Map MyMap = new Map();
    ContentPanel.Children.Add(MyMap);

組み込み型起動ツールを使ったマップの表示

このトピックでは、アプリの内部にマップを表示するコードの作成方法について説明します。マップを表示するだけの場合は、組み込みの Maps アプリを起動する Maps タスクを使用することもできます。詳細については、「Windows Phone 8 の Maps タスクを使用する方法」を参照してください。

次の表には、マップの表示または管理を行う組み込みの起動ツールのすべてが一覧表示されています。詳細については、「Windows Phone 8 のランチャーとセレクター」を参照してください。

ランチャー

詳細

Maps タスク

組み込みの Maps アプリを起動し、オプションで位置をマークします。

Windows Phone 8 の Maps タスクを使用する方法

Maps ルート案内タスク

組み込みの Maps アプリを起動し、ルート案内を表示します。

Windows Phone 8 の Maps ルート案内タスクを使用する方法

MapDownloader タスク

オフラインで使用するために、マップをダウンロードします。

Windows Phone 8 の MapDownloader タスクを使用する方法

MapUpdater タスク

以前ダウンロードしたオフライン マップに更新がないかチェックします。

Windows Phone 8 の MapUpdaterTask を使用する方法

マップを表示した後、まず最初に実行する操作の 1 つは、中心とズーム レベルの設定です。

メモメモ:

マップ コントロールの初期化中、CenterChanged および ZoomLevelChanged イベントが初期化後それぞれ 1 回発生します。これらのイベントを処理する際に、コントロールを初期化してからユーザーが操作するまでの間にイベントが発生した場合、最初に発生したイベントがコードで適切に処理されることを確認してください。

マップの中心の指定

Map コントロールの中心を設定するには、このコントロールの Center プロパティを使用します。XAML を使用してこのプロパティを設定するには、Center プロパティに (緯度, 経度) ペアを割り当てます。

XAML を使用して、Map の中心を設定する方法を次のコード例に示します。


<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <maps:Map x:Name="MyMap" Center="47.6097, -122.3331" />
</Grid>


コードを使用して、Map の中心を設定する方法を次のコード例に示します。

using Microsoft.Phone.Maps.Controls;
using System.Device.Location;

...

    Map MyMap = new Map();
    MyMap.Center = new GeoCoordinate(47.6097, -122.3331);
    ContentPanel.Children.Add(MyMap);
}

注意注意:

Latitude プロパティと Longitude プロパティを使用して Map コントロールの中心を設定しないでください。代わりに、前出のコード例のように、新しい GeoCoordinate オブジェクトを作成して、Center プロパティに割り当てます。

マップのズーム レベルの指定

ZoomLevel プロパティを使用して、マップを表示する初期解像度を設定します。ZoomLevel プロパティの値は 1 ~ 20 であり、1 は完全ズーム アウト マップに相当し、より高いズーム レベルではより高い解像度でズームされます。XAML とコードで ZoomLevel プロパティを使用してマップのズーム レベルを設定する方法を次のコード例に示します。

XAML で ZoomLevel プロパティを使用してマップのズーム レベルを設定する方法を次のコード例に示します。


<!--ContentPanel - place additional content here-->
<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
   <maps:Map x:Name="MyMap" Center="47.6097, -122.3331" ZoomLevel="10"/>
</Grid>


コードで ZoomLevel プロパティを使用してマップのズーム レベルを設定する方法を次のコード例に示します。

using Microsoft.Phone.Maps.Controls;
using System.Device.Location;

...

    Map MyMap = new Map();
    MyMap.Center = new GeoCoordinate(47.6097, -122.3331);
    MyMap.ZoomLevel = 10;
    ContentPanel.Children.Add(MyMap);
}

Map コントロールの Center プロパティには、System.Device.Location 名前空間からの GeoCoordinate 型の値が必要です。Windows.Devices.Geolocation 名前空間からの位置情報サービスを使用している場合は、Map コントロールで使用するために Windows.Devices.Geolocation.Geocoordinate 値を System.Device.Location.GeoCoordinate に変換する必要があります。

この変換を行う拡張メソッドのほか、Maps API のその他の便利な拡張機能を取得するには、Windows Phone Toolkit をダウンロードします。以下は、独自のコードを作成する場合に GeocoordinateGeoCoordinate に変換するために使用できるメソッドの例です。

using System;
using System.Device.Location; // Contains the GeoCoordinate class.
using Windows.Devices.Geolocation; // Contains the Geocoordinate class.

namespace CoordinateConverter
{
    public static class CoordinateConverter
    {
        public static GeoCoordinate ConvertGeocoordinate(Geocoordinate geocoordinate)
        {
            return new GeoCoordinate
                (
                geocoordinate.Latitude,
                geocoordinate.Longitude,
                geocoordinate.Altitude ?? Double.NaN,
                geocoordinate.Accuracy,
                geocoordinate.AltitudeAccuracy ?? Double.NaN,
                geocoordinate.Speed ?? Double.NaN,
                geocoordinate.Heading ?? Double.NaN
                );
        }
    }
}

マップにはランドマークや歩行者向けの特徴など、その他の要素も表示できます。

  • ランドマーク。 Map コントロールでランドマークを表示するには、LandmarksEnabled プロパティを true に設定します。ランドマークは、ZoomLevel プロパティが 16 以上の値に設定されている場合にのみマップに表示されます。

  • 歩行者機能。 公共の階段などの歩行者機能を表示するには、Map コントロールで PedestrianFeaturesEnabledtrue に設定します。歩行者機能は、ZoomLevel プロパティが 16 以上の値に設定されている場合にのみマップに表示されます。

次の図は、ランドマークと歩行者機能が有効になっているマップを示します。

Landmarks and Pedestrian Features

XAML で PedestrianFeaturesEnabled プロパティと LandmarksEnabled プロパティを設定する方法の例を次に示します。

<!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <maps:Map Center="47.6097, -122.3331" ZoomLevel="16" LandmarksEnabled="true" PedestrianFeaturesEnabled="true"/>
        </Grid>

コードでこれらのプロパティを設定する方法を次の例に示します。

using Microsoft.Phone.Maps.Controls;
using System.Device.Location;

...

    Map MyMap = new Map();
    MyMap.Center = new GeoCoordinate(47.6097, -122.3331);
    MyMap.ZoomLevel = 16;
    MyMap.LandmarksEnabled = true;
    MyMap.PedestrianFeaturesEnabled = true;
    ContentPanel.Children.Add(MyMap);
}

マップの中心とズーム レベルを設定したら、地図製作モードを設定することもできます。地図製作モードは、座標系の表示および画面座標から Map コントロールのワールド座標への変換を定義します。Map コントロールの CartographicMode プロパティを使用して、マップの地図製作モードを設定できます。このプロパティは、MapCartographicMode 列挙体から値を受け取ります。MapCartographicMode 列挙体では、次の種類の地図製作モードがサポートされています。

  • Road: 標準的な既定の 2-D マップを表示します。

  • Aerial: 航空写真マップを表示します。

  • Hybrid: 航空写真のマップに道路とラベルをオーバーレイして表示します。

  • Terrain: 物理的なレリーフ画像を表示し、高度や水域の特徴 (山や川など) を示します。

次の図は、4 種類の地図製作モードを示しています。

Cartographic Modes

次の例では、既定の Road モードでマップを表示しています。アプリ バーのボタンを使用して、AerialHybrid、および Terrain モードでマップを表示できます。

メモメモ:

以下のサンプルをテストするには、プロジェクトに Images フォルダーを作成し、アプリ バー ボタンのイメージを指定する必要があります。

<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
   <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
   </Grid.RowDefinitions>
   <!--TitlePanel contains the name of the application and page title-->
   <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
      <TextBlock x:Name="ApplicationTitle" Text="Maps" Style="{StaticResource PhoneTextNormalStyle}"/>
      <TextBlock x:Name="PageTitle" Text="map modes" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
   </StackPanel>
   <!--ContentPanel - place additional content here-->
   <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
      <maps:Map x:Name="MyMap"  Center="13.0810, 80.2740" ZoomLevel="10"/>
   </Grid>
</Grid>
<!--Sample code showing usage of ApplicationBar-->
<phone:PhoneApplicationPage.ApplicationBar>
   <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
      <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Road" Click="Road_Click"/>
      <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Aerial" Click="Aerial_Click"/>
      <shell:ApplicationBarIconButton IconUri="/Images/appbar_button3.png" Text="Hybrid" Click="Hybrid_Click"/>
      <shell:ApplicationBarIconButton IconUri="/Images/appbar_button4.png" Text="Terrain" Click="Terrain_Click"/>
   </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
void Road_Click(object sender, EventArgs args)
{
   MyMap.CartographicMode = MapCartographicMode.Road;
}

void Aerial_Click(object sender, EventArgs args)
{
   MyMap.CartographicMode = MapCartographicMode.Aerial;
}

void Hybrid_Click(object sender, EventArgs args)
{
   MyMap.CartographicMode = MapCartographicMode.Hybrid;
}

void Terrain_Click(object sender, EventArgs args)
{
   MyMap.CartographicMode = MapCartographicMode.Terrain;
}

ColorMode プロパティを使用して、ライト カラー モードまたはダーク モードでマップを表示できます。このプロパティが受け取ることができる値 (Light または Dark) は、MapColorMode 列挙体に含まれている指定値です。デフォルトは Light です。

次の図で、最初のマップは Light カラー モード、2 番目のマップは Dark カラー モードです。

Color Modes

次のコード例では、既定のライト モードでマップを表示しています。アプリ バーのボタンを使用して、ライト モードまたはダーク モードでマップを表示できます。

メモメモ:

以下のサンプルをテストするには、プロジェクトに Images フォルダーを作成し、アプリ バー ボタンのイメージを指定する必要があります。

<!--LayoutRoot is the root grid where all page content is placed-->
    <Grid x:Name="LayoutRoot" Background="Transparent">
        <Grid.RowDefinitions>
            <RowDefinition Height="Auto"/>
            <RowDefinition Height="*"/>
        </Grid.RowDefinitions>
        <!--TitlePanel contains the name of the application and page title-->
        <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
            <TextBlock x:Name="ApplicationTitle" Text="Maps" Style="{StaticResource PhoneTextNormalStyle}"/>
            <TextBlock x:Name="PageTitle" Text="color modes" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
        </StackPanel>
        <!--ContentPanel - place additional content here-->
        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
            <maps:Map x:Name="MyMap" />
        </Grid>
    </Grid>
    <!--Sample code showing usage of ApplicationBar-->
    <phone:PhoneApplicationPage.ApplicationBar>
        <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button1.png" Text="Light" Click="Light_Click"/>
            <shell:ApplicationBarIconButton IconUri="/Images/appbar_button2.png" Text="Dark" Click="Dark_Click"/>
        </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>
void Light_Click(object sender, EventArgs args)
{
   MyMap.ColorMode = MapColorMode.Light;
}

void Dark_Click(object sender, EventArgs args)
{
   MyMap.ColorMode = MapColorMode.Dark;
}

マップ アプリの一般的なシナリオとして、マップ内の 1 つの位置から別の位置への移動や、1 つのビューから別のビューへの移動があります。パン、ズーム、回転、または傾斜の結果、マップの位置が変わるたびに、新しいマップ ビューが定義されます。

コードでマップを定義するには、SetView メソッドを使用します。SetView メソッドのオーバーロードに渡すことができるパラメーターには、ビューの中心、ズーム レベル、方位、傾斜角度、LocationRectangle、1 つのビューから別のビューへの移動に使われるアニメーションの種類などがあります。

SetView パラメーター

SetView メソッドのパラメーターについて、次のリストで説明します。

  • center: このパラメーターを使用して、マップ ビューの中心を渡します。このパラメーターは GeoCoordinate オブジェクトとして定義されます。

  • zoomLevel: このパラメーターは、マップに表示可能な詳細のレベルを表します。1 ~ 20 の値を指定できます。表示可能な詳細の最大レベルは、ズーム インする位置によって決まります。領域によっては、他の領域よりもさらに大きくズーム インできる場合があります。ズーム レベルが高いほど、マップ内のビューがさらにズームされます。ズーム レベル 1 は、最もズーム アウトされたビューを表します。

  • heading: このパラメーターは、マップ上で “上” に相当する方位を指定します。マップを回転する度数を表す、0 ~ 360 の範囲の値で指定します。たとえば、0 または 360 は北、90 は西、180 は南、270 は東を表します。次の図は方位を示しています。

    Heading
  • pitch: このパラメーターは、マップを傾ける角度を指定します。マップを傾ける度数を表す、0 ~ 180 の範囲の値を指定します。次の図は傾斜角度を示しています。

    Pitch
  • boundingRectangle: このパラメーターは、Map コントロールを含む LocationRectangle オブジェクトを表します。

  • animationKind: このパラメーターを使用して、ビューを変化させるときに表示するアニメーションの種類を設定します。使用可能なアニメーション設定は、MapAnimationKind 列挙体に含まれています。animationKind パラメーターとして None を渡すと、ビューの変化はアニメーションでは表示されず、マップが新しいビューにスナップします。

アニメーションの例

次の例では、既定の中心とズーム レベルを使用してマップを表示しています。アプリ バーで [変更] ボタンをクリックすると、マップが新しい中心とズーム レベルで表示されます。[アニメーション] ボタンをクリックすると、マップがアニメーション化され、新しい中心とズーム レベルで表示されます。


<!--LayoutRoot is the root grid where all page content is placed-->
<Grid x:Name="LayoutRoot" Background="Transparent">
   <Grid.RowDefinitions>
      <RowDefinition Height="Auto"/>
      <RowDefinition Height="*"/>
   </Grid.RowDefinitions>

   <!--TitlePanel contains the name of the application and page title-->
   <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28">
      <TextBlock x:Name="ApplicationTitle" Text="Maps" Style="{StaticResource PhoneTextNormalStyle}"/>
      <TextBlock x:Name="PageTitle" Text="MapView" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/>
   </StackPanel>

   <!--ContentPanel - place additional content here-->
   <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">
      <maps:Map x:Name="MyMap"  Center="13.0810, 80.2740" ZoomLevel="10"/>
   </Grid>
</Grid>

<!--Sample code showing usage of ApplicationBar-->
<phone:PhoneApplicationPage.ApplicationBar>
   <shell:ApplicationBar IsVisible="True" IsMenuEnabled="True">
      <shell:ApplicationBarIconButton x:Name="BtnZoom"  IconUri="/Images/appbar_button2.png" Text="Change" Click="OnCenterZoom_Click"/>
      <shell:ApplicationBarIconButton x:Name="BtnCenter"  IconUri="/Images/appbar_button1.png" Text="Animate" Click="OnAnimate_Click"/>
   </shell:ApplicationBar>
</phone:PhoneApplicationPage.ApplicationBar>


void OnCenterZoom_Click(object sender, EventArgs args)
{
   MyMap.Center = new GeoCoordinate(47.6097, -122.3331);
   MyMap.ZoomLevel = 18;
}

void OnAnimate_Click(object sender, EventArgs args)
{
   MyMap.SetView(new GeoCoordinate(47.6097, -122.3331), 15, MapAnimationKind.Parabolic);
}

アプリでマップ サービスを使用するには、マップ サービス アプリケーション ID とトークンをアプリのコード内に含める必要があります。詳細については、「Windows Phone 8 でマップ コントロールをページに追加する方法」を参照してください。

マップ サービスの継続的な使用は、使用条件によって管理されます。マップ サービスの一部は Nokia によって提供されているため、Microsoft はマップ サービスを使用している開発者 ID を Nokia と共有する場合があります。

表示:
© 2015 Microsoft