2D、3D、Streetside ビューでの地図の表示Display maps with 2D, 3D, and Streetside views

地図を表示するには、マップ プレースカードと呼ばれる簡易非表示に対応したウィンドウか、フル機能を備えたマップ コントロールを使うことができます。You can show a map in light dismissable window called a map placecard or in a full featured map control.

地図サンプルをダウンロードして、このガイドで説明されている機能のいくつかを試してみてください。Download the map sample to try out some the features described in this guide.

プレースカードへの地図の表示Display map in a placecard

UI 要素またはユーザーがタッチするアプリの領域の上下左右に軽量なポップアップ ウィンドウを開いて、その内部に地図を表示することができます。You can show users a map inside of a light-weight pop-up window above, below or to the side of a UI element or an area of an app where the user touches. 地図には、アプリ内の情報に関連する都市や住所を表示できます。The map can show a city or address that relates to information in your app.

次のプレースカードは、シアトルの街を表示します。This placecard shows the city of Seattle.

シアトルの街を表示するプレースカード

プレースカードのボタンの下にシアトルを表示するコードを次に示します。Here's the code that makes Seattle appear in a placecard below a button.

private void Seattle_Click(object sender, RoutedEventArgs e)
{
    Geopoint seattlePoint = new Geopoint
        (new BasicGeoposition { Latitude = 47.6062, Longitude = -122.3321 });

    PlaceInfo spaceNeedlePlace = PlaceInfo.Create(seattlePoint);

    FrameworkElement targetElement = (FrameworkElement)sender;

    GeneralTransform generalTransform =
        targetElement.TransformToVisual((FrameworkElement)targetElement.Parent);

    Rect rectangle = generalTransform.TransformBounds(new Rect(new Point
        (targetElement.Margin.Left, targetElement.Margin.Top), targetElement.RenderSize));

    spaceNeedlePlace.Show(rectangle, Windows.UI.Popups.Placement.Below);
}

次のプレースカードは、シアトルにある Space Needle の場所を表示します。This placecard shows the location of the Space Needle in Seattle.

Space Needle の場所を表示するプレースカード

プレースカードのボタンの下に Space Needle を表示するコードを次に示します。Here's the code that makes the Space Needle appear in a placecard below a button.

private void SpaceNeedle_Click(object sender, RoutedEventArgs e)
{
    Geopoint spaceNeedlePoint = new Geopoint
        (new BasicGeoposition { Latitude = 47.6205, Longitude = -122.3493 });

    PlaceInfoCreateOptions options = new PlaceInfoCreateOptions();

    options.DisplayAddress = "400 Broad St, Seattle, WA 98109";
    options.DisplayName = "Seattle Space Needle";

    PlaceInfo spaceNeedlePlace =  PlaceInfo.Create(spaceNeedlePoint, options);

    FrameworkElement targetElement = (FrameworkElement)sender;

    GeneralTransform generalTransform =
        targetElement.TransformToVisual((FrameworkElement)targetElement.Parent);

    Rect rectangle = generalTransform.TransformBounds(new Rect(new Point
        (targetElement.Margin.Left, targetElement.Margin.Top), targetElement.RenderSize));

    spaceNeedlePlace.Show(rectangle, Windows.UI.Popups.Placement.Below);
}

コントロールでの地図の表示Display map in a control

機能豊富でカスタマイズ可能なマップ データをアプリに表示するには、マップ コントロールを使います。Use a map control to show rich and customizable map data in your app. マップ コントロールでは、道路地図、航空写真、3D ビュー、ルート案内、検索結果、交通情報を表示できます。A map control can display road maps, aerial, 3D, views, directions, search results, and traffic. マップ上には、現在地、ルート、関心のあるポイントを表示できます。On a map, you can display the user's location, directions, and points of interest. また、航空写真 3D ビュー、Streetside ビュー、交通情報、乗り換え情報、周辺情報を表示することもできます。A map can also show aerial 3D views, Streetside views, traffic, transit, and local businesses.

アプリ固有の地理情報または一般的な地理情報を表示できるアプリ内でマップが必要な場合に、マップ コントロールを使います。Use a map control when you want a map within your app that allows users to view app-specific or general geographic information. アプリにマップ コントロールを含めておくことで、ユーザーはアプリの外部に移動することなく情報を得ることができます。Having a map control in your app means that users don't have to go outside your app to get that information.

注意

その情報を得るためにユーザーがアプリの外部に移動してもかまわない場合は、Windows マップ アプリを利用することも検討してください。If you don't mind users going outside your app, consider using the Windows Maps app to provide that information. アプリから Windows マップ アプリを起動し、特定の地図、ルート案内、検索結果を表示することができます。Your app can launch the Windows Maps app to display specific maps, directions, and search results. 詳しくは、「Windows マップ アプリの起動」をご覧ください。For more info, see Launch the Windows Maps app.

アプリへのマップ コントロールの追加Add a map control to your app

XAML ページに地図を表示するには、MapControl を追加します。Display a map on a XAML page by adding a MapControl. MapControl を使うには、XAML ページまたはコード内に Windows.UI.Xaml.Controls.Maps 名前空間の宣言が必要です。To use the MapControl, you must declare the Windows.UI.Xaml.Controls.Maps namespace in the XAML page or in your code. ツールボックスからコントロールをドラッグすると、この名前空間宣言が自動的に追加されます。If you drag the control from the Toolbox, this namespace declaration is added automatically. XAML ページに MapControl を手動で追加する場合は、ページの上部に名前空間宣言を手動で追加する必要があります。If you add the MapControl to the XAML page manually, you must add the namespace declaration manually at the top of the page.

次の例では、基本的なマップ コントロールを表示し、タッチ入力を受け付けるだけでなくズーム コントロールとチルト コントロールを表示するように地図を構成しています。The following example displays a basic map control and configures the map to display the zoom and tilt controls in addition to accepting touch inputs.

<Page
    x:Class="MapsAndLocation1.DisplayMaps"
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:local="using:MapsAndLocation1"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    xmlns:Maps="using:Windows.UI.Xaml.Controls.Maps"
    mc:Ignorable="d">

 <Grid x:Name="pageGrid" Background="{ThemeResource ApplicationPageBackgroundThemeBrush}">

    <Maps:MapControl
       x:Name="MapControl1"            
       ZoomInteractionMode="GestureAndControl"
       TiltInteractionMode="GestureAndControl"   
       MapServiceToken="EnterYourAuthenticationKeyHere"/>

 </Grid>
</Page>

コードにマップ コントロールを追加する場合は、コード ファイルの先頭で手動で名前空間を宣言する必要があります。If you add the map control in your code, you must declare the namespace manually at the top of the code file.

using Windows.UI.Xaml.Controls.Maps;
...

// Add the MapControl and the specify maps authentication key.
MapControl MapControl2 = new MapControl();
MapControl2.ZoomInteractionMode = MapInteractionMode.GestureAndControl;
MapControl2.TiltInteractionMode = MapInteractionMode.GestureAndControl;
MapControl2.MapServiceToken = "EnterYourAuthenticationKeyHere";
pageGrid.Children.Add(MapControl2);

マップ認証キーの取得と設定Get and set a maps authentication key

MapControl やマップ サービスを使用する前に、マップ認証キーを MapServiceToken プロパティの値として指定する必要があります。Before you can use MapControl and map services, you must specify the maps authentication key as the value of the MapServiceToken property. 前に示した例では、EnterYourAuthenticationKeyHereBing Maps Developer Center から取得したキーで置き換えます。In the previous examples, replace EnterYourAuthenticationKeyHere with the key you get from the Bing Maps Developer Center. マップ認証キーを指定するまでは、コントロールの下に [警告: MapServiceToken が指定されていません] というテキストが表示されます。The text Warning: MapServiceToken not specified continues to appear below the control until you specify the maps authentication key. マップ認証キーを取得して設定する方法について詳しくは、「マップ認証キーの要求」をご覧ください。For more info about getting and setting a maps authentication key, see Request a maps authentication key.

地図の場所の設定Set the location of a map

地図を表示するときは、特定の場所を示すように設定することも、ユーザーの現在の場所を使うこともできます。Point the map to any location that you want or use the user's current location.

地図の開始位置の設定Set a starting location for the map

コードで MapControlCenter プロパティを指定するか、または XAML マークアップでプロパティをバインドすることにより、地図上の表示位置を設定します。Set the location to display on the map by specifying the Center property of the MapControl in your code or by binding the property in your XAML markup. シアトル市を中心とした地図を表示する例を次に示します。The following example displays a map with the city of Seattle as its center.

注意

文字列は Geopoint に変換できないため、データ バインディングを使わない限り、XAML マークアップで Center プロパティに対する値を指定できません。Since a string can't be converted to a Geopoint, you can't specify a value for the Center property in XAML markup unless you use data binding. (この制限は、MapControl.Location 添付プロパティにも適用されます)。(This limitation also applies to the MapControl.Location attached property.)

protected override void OnNavigatedTo(NavigationEventArgs e)
{
   // Specify a known location.
   BasicGeoposition cityPosition = new BasicGeoposition() { Latitude = 47.604, Longitude = -122.329 };
   Geopoint cityCenter = new Geopoint(cityPosition);

   // Set the map location.
   MapControl1.Center = cityCenter;
   MapControl1.ZoomLevel = 12;
   MapControl1.LandmarksVisible = true;
}

マップ コントロールの例。

地図の現在位置の設定Set the current location of the map

ユーザーの位置情報にアクセスするには、先にアプリで RequestAccessAsync メソッドを呼び出す必要があります。Before your app can access the user’s location, your app must call the RequestAccessAsync method. このときに、アプリをフォアグラウンドで実行し、RequestAccessAsync を UI スレッドから呼び出す必要があります。At that time, your app must be in the foreground and RequestAccessAsync must be called from the UI thread. 位置情報に対するアクセス許可をユーザーがアプリに与えるまで、アプリは位置情報にアクセスできません。Until the user grants your app permission to their location, your app can't access location data.

Geolocator クラスの GetGeopositionAsync メソッドを使って、デバイスの現在の位置情報を取得します (位置情報にアクセスできる場合)。Get the current location of the device (if location is available) by using the GetGeopositionAsync method of the Geolocator class. 対応する Geopoint を取得するには、geoposition オブジェクトの geocoordinate の Point プロパティを使います。To obtain the corresponding Geopoint, use the Point property of the geoposition's geocoordinate. 詳しくは、「現在の位置情報の取得」をご覧ください。For more info, see Get current location.

// Set your current location.
var accessStatus = await Geolocator.RequestAccessAsync();
switch (accessStatus)
{
   case GeolocationAccessStatus.Allowed:

      // Get the current location.
      Geolocator geolocator = new Geolocator();
      Geoposition pos = await geolocator.GetGeopositionAsync();
      Geopoint myLocation = pos.Coordinate.Point;

      // Set the map location.
      MapControl1.Center = myLocation;
      MapControl1.ZoomLevel = 12;
      MapControl1.LandmarksVisible = true;
      break;

   case GeolocationAccessStatus.Denied:
      // Handle the case  if access to location is denied.
      break;

   case GeolocationAccessStatus.Unspecified:
      // Handle the case if  an unspecified error occurs.
      break;
}

地図にデバイスの位置を表示するときは、位置情報の精度に基づいてグラフィックスを表示してズーム レベルを設定することを検討します。When you display your device's location on a map, consider displaying graphics and setting the zoom level based on the accuracy of the location data. 詳しくは、「位置認識アプリのガイドライン」をご覧ください。For more info, see Guidelines for location-aware apps.

地図の位置の変更Change the location of the map

2D 地図に表示する位置を変更するには、TrySetViewAsync メソッドのいずれかのオーバーロードを呼び出します。To change the location that appears in a 2D map, call one of the overloads of the TrySetViewAsync method. そのメソッドを使って、CenterZoomLevelHeadingPitch の新しい値を指定します。Use that method to specify new values for Center, ZoomLevel, Heading, and Pitch. また、ビューが変わるときに使うアニメーションをオプションで指定することもできます。そのためには、MapAnimationKind 列挙値の定数を指定します。You can also specify an optional animation to use when the view changes by providing a constant from the MapAnimationKind enumeration.

3D 地図の場所を変更するには、代わりに TrySetSceneAsync メソッドを使います。To change the location of a 3D map, use the TrySetSceneAsync method instead. 詳しくは、「航空写真 3D ビューの表示」をご覧ください。For more info, see Display aerial 3D views.

地図上に GeoboundingBox の内容を表示するには、TrySetViewBoundsAsync メソッドを呼び出します。Call the TrySetViewBoundsAsync method to display the contents of a GeoboundingBox on the map. たとえばこのメソッドを使うと、地図上にルートやルートの一部を表示することができます。Use this method, for example, to display a route or a portion of a route on the map. 詳しくは、「地図へのルートとルート案内の表示」をご覧ください。For more info, see Display routes and directions on a map.

地図の外観の変更Change the appearance of a map

地図の外観をカスタマイズするには、マップ コントロールの StyleSheet プロパティを既存の MapStyleSheet オブジェクトに設定します。To customize the look and feel of the map, set the StyleSheet property of the map control to any of the existing MapStyleSheet objects.

myMap.StyleSheet = MapStyleSheet.RoadDark();

濃色スタイルの地図

また、JSON を使用してカスタム スタイルを定義し、その JSON を使用して MapStyleSheet オブジェクトを作成することもできます。You can also use JSON to define custom styles and then use that JSON to create a MapStyleSheet object.

対話的にマップ スタイル シート エディターアプリケーションを使用して、JSON のスタイル シートを作成できます。Style sheet JSON can be created interactively using the Map Style Sheet Editor application.

myMap.StyleSheet = MapStyleSheet.ParseFromJson(@"
    {
        ""version"": ""1.0"",
        ""settings"": {
            ""landColor"": ""#FFFFFF"",
            ""spaceColor"": ""#000000""
        },
        ""elements"": {
            ""mapElement"": {
                ""labelColor"": ""#000000"",
                ""labelOutlineColor"": ""#FFFFFF""
            },
            ""water"": {
                ""fillColor"": ""#DDDDDD""
            },
            ""area"": {
                ""fillColor"": ""#EEEEEE""
            },
            ""political"": {
                ""borderStrokeColor"": ""#CCCCCC"",
                ""borderOutlineColor"": ""#00000000""
            }
        }
    }
");

カスタム スタイルの地図

完全な JSON エントリのリファレンスについては、「マップ スタイル シート リファレンス」をご覧ください。For the complete JSON entry reference, see Map style sheet reference.

最初は既存のシートを使用して、次に JSON を使用して要素を上書きできます。You can start with an existing sheet and then use JSON to override any elements that you want. この例では、最初は既存のスタイルを使用し、次に JSON を使用して水域の色のみを変更しています。This example, starts with an existing style and uses JSON to change only the color of water areas.

 MapStyleSheet \customSheet = MapStyleSheet.ParseFromJson(@"
    {
        ""version"": ""1.0"",
        ""elements"": {
            ""water"": {
                ""fillColor"": ""#DDDDDD""
            }
        }
    }
");

MapStyleSheet builtInSheet = MapStyleSheet.RoadDark();

myMap.StyleSheet = MapStyleSheet.Combine(new List<MapStyleSheet> { builtInSheet, customSheet });

複数のスタイルの地図

注意

2 番目のスタイル シートで定義するスタイルは、最初のスタイルを上書きします。Styles that you define in the second style sheet override the styles in the first.

向きと視点の設定Set orientation and perspective

マップ カメラを拡大、縮小、回転、傾けることで、求める効果をもたらす適切な角度に設定できます。Zoom in, zoom out, rotate, and tilt the map's camera to get just the right angle for the effect that you want. 次のプロパティをお試しください。Try these properties.

  • 地図の中心を地理的位置に設定するには、Center プロパティを設定します。Set the center of the map to a geographic point by setting the Center property.
  • ZoomLevel プロパティに 1 ~ 20 度の値を設定することにより、地図のズーム レベルを設定します。Set the zoom level of the map by setting the ZoomLevel property to a value between 1 and 20.
  • Heading プロパティを設定することにより地図の回転を設定します。ここでは 0 度または 360 度 = 北、90 度 = 東、180 度 = 南、270 度 = 西です。Set the rotation of the map by setting the Heading property, where 0 or 360 degrees = North, 90 = East, 180 = South, and 270 = West.
  • DesiredPitch プロパティに 0 ~ 65 度の値を設定することにより、地図の傾きを設定します。Set the tilt of the map by setting the DesiredPitch property to a value between 0 and 65 degrees.

地図機能を表示または非表示にするShow and hide map features

道路やランドマークなどの地図機能を表示または非表示にするには、MapControl の次のプロパティの値を設定します。Show or hide map features such as roads and landmarks by setting the values of the following properties of the MapControl.

  • 地図に建物やランドマークを表示するには、LandmarksVisible プロパティを有効または無効にします。Display buildings and landmarks on the map by enabling or disabling the LandmarksVisible property.

    注意

    建物の表示と非表示を切り替えることはできますが、3 次元表示を無効にすることはできません。You can show or hide buildings, but you can't prevent them from appearing 3 dimensions.

  • 地図に公共階段などの歩行者用の施設を表示するには、PedestrianFeaturesVisible プロパティを有効または無効にします。Display pedestrian features such as public stairs on the map by enabling or disabling the PedestrianFeaturesVisible property.

  • 地図に交通情報を表示するには、TrafficFlowVisible プロパティを有効または無効にします。Display traffic on the map by enabling or disabling the TrafficFlowVisible property.
  • 地図に透かしを表示するかどうかを指定するには、WatermarkMode プロパティを MapWatermarkMode 定数のいずれかに設定します。Specify whether the watermark is displayed on the map by setting the WatermarkMode property to one of the MapWatermarkMode constants.
  • 地図に自動車ルートや徒歩ルートを表示するには、マップ コントロールの Routes コレクションに MapRouteView を追加します。Display a driving or walking route on the map by adding a MapRouteView to the Routes collection of the Map control. 詳しい情報と例については、「地図へのルートとルート案内の表示」をご覧ください。For more info and an example, see Display routes and directions on a map.

MapControl でプッシュピン、図形、XAML コントロールを表示する方法については、「関心のあるポイント (POI) の地図への表示」をご覧ください。For info about how to display pushpins, shapes, and XAML controls in the MapControl, see Display points of interest (POI) on a map.

Streetside ビューの表示Display Streetside views

Streetside ビューは、視点がストリート レベルにある場合の場所の見え方を示すもので、マップ コントロールの上に表示されます。A Streetside view is a street-level perspective of a location that appears on top of the map control.

マップ コントロールの Streetside ビューの例。

Streetside ビューの「内部」での操作は、マップ コントロールにもともと表示されている地図とは独立していることを考慮します。Consider the experience "inside" the Streetside view separate from the map originally displayed in the map control. たとえば、Streetside ビューで場所を変更しても、Streetside ビューの「下」にある地図の場所や外観は変わりません。For example, changing the location in the Streetside view does not change the location or appearance of the map "under" the Streetside view. コントロールの右上隅にある [X] をクリックして Streetside ビューを閉じると、元の地図は Streetside ビューが表示される前のままです。After you close the Streetside view (by clicking the X in the upper right corner of the control), the original map remains unchanged.

Streetside ビューを表示するにはTo display a Streetside view

  1. IsStreetsideSupported を確認して、Streetside ビューがデバイスでサポートされているかどうかを調べます。Determine if Streetside views are supported on the device by checking IsStreetsideSupported.
  2. Streetside ビューがサポートされている場合は、FindNearbyAsync を呼び出し、指定した位置の近くに StreetsidePanorama を作成します。If Streetside view is supported, create a StreetsidePanorama near the specified location by calling FindNearbyAsync.
  3. StreetsidePanorama が null でないかどうかを確認し、近隣のパノラマ写真があるかどうかを調べます。Determine if a nearby panorama was found by checking if the StreetsidePanorama is not null
  4. 近隣のパノラマ写真があった場合、StreetsideExperience を作成し、マップ コントロールの CustomExperience プロパティに設定します。If a nearby panorama was found, create a StreetsideExperience for the map control's CustomExperience property.

次の例は、前掲の画像に似た Streetside ビューを表示する方法を示しています。This example shows how to display a Streetside view similar to the previous image.

マップ コントロールのサイズが小さすぎる場合は、概観の地図は表示されません。Note The overview map will not appear if the map control is sized too small.

private async void showStreetsideView()
{
   // Check if Streetside is supported.
   if (MapControl1.IsStreetsideSupported)
   {
      // Find a panorama near Avenue Gustave Eiffel.
      BasicGeoposition cityPosition = new BasicGeoposition() { Latitude = 48.858, Longitude = 2.295};
      Geopoint cityCenter = new Geopoint(cityPosition);
      StreetsidePanorama panoramaNearCity = await StreetsidePanorama.FindNearbyAsync(cityCenter);

      // Set the Streetside view if a panorama exists.
      if (panoramaNearCity != null)
      {
         // Create the Streetside view.
         StreetsideExperience ssView = new StreetsideExperience(panoramaNearCity);
         ssView.OverviewMapVisible = true;
         MapControl1.CustomExperience = ssView;
      }
   }
   else
   {
      // If Streetside is not supported
      ContentDialog viewNotSupportedDialog = new ContentDialog()
      {
         Title = "Streetside is not supported",
         Content ="\nStreetside views are not supported on this device.",
         PrimaryButtonText = "OK"
      };
      await viewNotSupportedDialog.ShowAsync();            
   }
}

航空写真 3D ビューの表示Display aerial 3D views

MapScene クラスを使って、地図の 3D 視点を指定します。Specify a 3D perspective of the map by using the MapScene class. マップ シーンは、地図に表示される 3D ビューを表します。The map scene represents the 3D view that appears in the map. MapCamera クラスは、このようなビューが表示されるカメラの位置を表します。The MapCamera class represents the position of the camera that would display such a view.

マップ シーンの場所と MapCamera の場所を示す図

建物などの地物を地図表面に 3D 表示するには、マップ コントロールの Style プロパティを MapStyle.Aerial3DWithRoads に設定します。To make buildings and other features on the map surface appear in 3D, set the map control's Style property to MapStyle.Aerial3DWithRoads. Aerial3DWithRoads スタイルの 3D ビューの例を次に示します。This is an example of a 3D view with the Aerial3DWithRoads style.

3D 地図ビューの例。

3D ビューを表示するにはTo display a 3D view

  1. Is3DSupported を確認して、3D ビューがデバイスでサポートされているかどうかを調べます。Determine if 3D views are supported on the device by checking Is3DSupported.
  2. 3D ビューがサポートされている場合は、マップ コントロールの Style プロパティを MapStyle.Aerial3DWithRoads に設定します。If 3D views is supported, set the map control's Style property to MapStyle.Aerial3DWithRoads.
  3. CreateFromLocationAndRadiusCreateFromCamera などの多数の CreateFrom メソッドの中から MapScene オブジェクトを作成します。Create a MapScene object using one of the many CreateFrom methods, such as CreateFromLocationAndRadius and CreateFromCamera.
  4. TrySetSceneAsync を呼び出して、3D ビューを表示します。Call TrySetSceneAsync to display the 3D view. また、ビューが変わるときに使うアニメーションをオプションで指定することもできます。そのためには、MapAnimationKind 列挙値の定数を指定します。You can also specify an optional animation to use when the view changes by providing a constant from the MapAnimationKind enumeration.

次の例は、3D ビューを表示する方法を示しています。This example shows how to display a 3D view.

private async void display3DLocation()
{
   if (MapControl1.Is3DSupported)
   {
      // Set the aerial 3D view.
      MapControl1.Style = MapStyle.Aerial3DWithRoads;

      // Specify the location.
      BasicGeoposition hwGeoposition = new BasicGeoposition() { Latitude = 43.773251, Longitude = 11.255474};
      Geopoint hwPoint = new Geopoint(hwGeoposition);

      // Create the map scene.
      MapScene hwScene = MapScene.CreateFromLocationAndRadius(hwPoint,
                                                                           80, /* show this many meters around */
                                                                           0, /* looking at it to the North*/
                                                                           60 /* degrees pitch */);
      // Set the 3D view with animation.
      await MapControl1.TrySetSceneAsync(hwScene,MapAnimationKind.Bow);
   }
   else
   {
      // If 3D views are not supported, display dialog.
      ContentDialog viewNotSupportedDialog = new ContentDialog()
      {
         Title = "3D is not supported",
         Content = "\n3D views are not supported on this device.",
         PrimaryButtonText = "OK"
      };
      await viewNotSupportedDialog.ShowAsync();
   }
}

位置に関する情報の取得Get info about locations

地図上の位置に関する情報を取得するには、MapControl の次のメソッドを呼び出します。Get info about locations on the map by calling the following methods of the MapControl.

  • GetLocationFromOffset メソッド - マップ コントロールのビューポート内の指定したポイントに対応する地理的な位置情報を取得します。GetLocationFromOffset method - Get the geographic location that corresponds to the specified point in the viewport of the Map control.
  • GetOffsetFromLocation メソッド - 指定した地理的な位置情報に対応するマップ コントロールのビューポート内のポイントを取得します。GetOffsetFromLocation method - Get the point in the viewport of the Map control that corresponds to the specified geographic location.
  • IsLocationInView メソッド - 指定した地理的な位置がマップ コントロールのビューポート内に現在表示されているかどうかを調べます。IsLocationInView method - Determine whether the specified geographic location is currently visible in the viewport of the Map control.
  • FindMapElementsAtOffset メソッド - マップ コントロールのビューポート内の指定したポイントにある地図上の要素を取得します。FindMapElementsAtOffset method - Get the elements on the map located at the specified point in the viewport of the Map control.

操作と変更の処理Handle interaction and changes

地図上でのユーザー入力ジェスチャを処理するには、MapControl の次のイベントを処理します。Handle user input gestures on the map by handling the following events of the MapControl. 地図上の地理的な位置、およびジェスチャが行われたビューポート内の実際の位置に関する情報を取得するには、MapInputEventArgsLocation プロパティと Position プロパティの値を確認します。Get info about the geographic location on the map and the physical position in the viewport where the gesture occurred by checking the values of the Location and Position properties of the MapInputEventArgs.

地図が読み込まれている最中であるか、完全に読み込まれたかどうかを判断するには、コントロールの LoadingStatusChanged イベントを処理します。Determine whether the map is loading or completely loaded by handling the control's LoadingStatusChanged event.

ユーザーやアプリによる地図の設定変更に対応するには、MapControl の次のイベントを処理します。Handle changes that happen when the user or the app changes the settings of the map by handling the following events of the MapControl. マップのガイドラインGuidelines for maps

推奨される運用方法Best practice recommendations

  • ユーザーが地理情報を表示するためにパンとズームを過度に使用しなくて済むように、十分な画面領域 (または画面全体) を使用してマップを表示します。Use ample screen space (or the entire screen) to display the map so that users don't have to pan and zoom excessively to view geographical information.

  • 静的な情報ビューの提示をするためにのみマップを使う場合、小さなマップを使う方が適している場合があります。If the map is only used to present a static, informational view, then using a smaller map might be more appropriate. 小さく静的なマップを使う場合は、使いやすさを考えてサイズを決めます。画面上の領域を十分節約できる程度に小さく、判読しにくくならない程度に大きくします。If you go with a smaller, static map, base its dimensions on usability—small enough to conserve enough screen real estate, but large enough to remain legible.

  • マップ シーンに関心のあるポイントを埋め込むには、MapElements を使います。その他の情報も、マップ シーンのオーバーレイとして表示される一時的な UI に表示できます。Embed the points of interest in the map scene using map elements; any additional information can be displayed as transient UI that overlays the map scene.