関心のあるポイント (POI) の地図への表示

[Windows 10 の UWP アプリ向けに更新。 Windows 8.x の記事については、アーカイブをご覧ください ]

プッシュピン、画像、図形、XAML UI 要素を使って、関心のあるポイント (POI) を地図に追加します。 POI は、地図上の特定のポイントであり、関心のあるものを表します。 たとえば、企業、市区町村、友人の所在地を示すことができます。

ヒント アプリで POI を表示する方法について詳しくは、GitHub の Windows-universal-samples リポジトリから次のサンプルをダウンロードしてください。

地図にプッシュピン、画像、図形を表示するには、MapIcon オブジェクト、MapPolygon オブジェクト、MapPolyline オブジェクトをマップ コントロールの MapElements コレクションに追加します。 プログラムでデータ バインディングを使うか、項目を追加します。XAML マークアップで宣言を使って MapElements コレクションにバインドすることはできません。

XAML ユーザー インターフェイス要素 (ButtonHyperlinkButtonTextBlock など) を地図に表示するには、それらの要素を MapControlChildren として追加します。 また、それらの要素を MapItemsControl に追加したり、MapItemsControl を項目や項目のコレクションにバインドしたりすることもできます。

以上の説明をまとめると次のようになります。

地図に配置する要素の数が多い場合、地図にタイル画像をオーバーレイすることを検討します。 地図に道路情報を表示するには、「ルートとルート案内の表示」をご覧ください。

MapIcon の追加

MapIcon クラスを使って、プッシュピンなどの画像をオプションのテキストと共に地図に表示します。 既定の画像をそのまま使うか、Image プロパティを使ってカスタム画像を指定できます。 次の画像はそれぞれ、Title プロパティに値を指定しない、短いタイトル、長いタイトル、非常に長いタイトルを指定した場合の MapIcon の既定の画像です。

さまざまな長さのタイトルを含むサンプルの MapIcon。

次の例では、シアトル市の地図を表示して、既定の画像とオプションのタイトルを使って MapIcon を追加し、スペース ニードルの場所を示しています。 また、アイコンを地図の中央に配置し、拡大しています。 マップ コントロールを使用する方法に関する一般的な情報については、「2D、3D、Streetside ビューでの地図の表示」をご覧ください。

      private void displayPOIButton_Click(object sender, RoutedEventArgs e)
      {
         // Specify a known location.
         BasicGeoposition snPosition = new BasicGeoposition() { Latitude = 47.620, Longitude = -122.349 };
         Geopoint snPoint = new Geopoint(snPosition);

         // Create a MapIcon.
         MapIcon mapIcon1 = new MapIcon();
         mapIcon1.Location = snPoint;
         mapIcon1.NormalizedAnchorPoint = new Point(0.5, 1.0);
         mapIcon1.Title = "Space Needle";
         mapIcon1.ZIndex = 0;

         // Add the MapIcon to the map.
         MapControl1.MapElements.Add(mapIcon1);

         // Center the map over the POI.
         MapControl1.Center = snPoint;
         MapControl1.ZoomLevel = 14;
      }

この例では、次の POI (中央の既定の画像) が地図に表示されます。

MapIcon を使った地図

次のコード行では、プロジェクトの Assets フォルダーに保存されているカスタム イメージを使って MapIcon が表示されます。 MapIconImage プロパティでは、RandomAccessStreamReference 型の値が想定されています。 この型では、Windows.Storage.Streams 名前空間用に using ステートメントが必要になります。

ヒント 複数の地図アイコンに同じ画像を使う場合は、パフォーマンスが最大限に高まるように、ページ レベルまたはアプリ レベルで RandomAccessStreamReference を宣言します。

    MapIcon1.Image =
        RandomAccessStreamReference.CreateFromUri(new Uri("ms-appx:///Assets/customicon.png"));

MapIcon クラスを使うときは、次の考慮事項を念頭に置いてください。

  • Image プロパティがサポートしている最大画像サイズは 2048 × 2048 ピクセルです。
  • 既定では、地図アイコンの画像は必ず表示されるとは限りません。 このクラスが地図上の他の要素やラベルを覆い隠す場合には、このクラスは非表示になることがあります。 地図アイコンを表示したままにするには、このアイコンの CollisionBehaviorDesired プロパティを MapElementCollisionBehavior.RemainVisible に設定します。
  • MapIcon のオプションの Title は、必ず表示されるとは限りません。 テキストが表示されない場合は、MapControlZoomLevel プロパティの値を減らして、地図を縮小してください。
  • 地図上の特定の場所を指す MapIcon 画像 (たとえば、プッシュピンや矢印など) を表示する場合は、NormalizedAnchorPoint プロパティの値を画像上にあるポインターのおおよその位置に設定することを検討してください。 NormalizedAnchorPoint の値を、画像の左上隅を示す既定値 (0, 0) のままにした場合、地図の ZoomLevel を変更すると、画像が別の場所を示した状態になる可能性があります。

MapPolygon の追加

MapPolygon クラスを使って、マルチポイント図形を地図に表示します。 次の例は、UWP の地図サンプルから抜粋したもので、地図に赤色のボックス (境界線は青色) を表示します。

private void mapPolygonAddButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
   double centerLatitude = myMap.Center.Position.Latitude;
   double centerLongitude = myMap.Center.Position.Longitude;
   MapPolygon mapPolygon = new MapPolygon();
   mapPolygon.Path = new Geopath(new List<BasicGeoposition>() {
         new BasicGeoposition() {Latitude=centerLatitude+0.0005, Longitude=centerLongitude-0.001 },                
         new BasicGeoposition() {Latitude=centerLatitude-0.0005, Longitude=centerLongitude-0.001 },                
         new BasicGeoposition() {Latitude=centerLatitude-0.0005, Longitude=centerLongitude+0.001 },
         new BasicGeoposition() {Latitude=centerLatitude+0.0005, Longitude=centerLongitude+0.001 },

   });

   mapPolygon.ZIndex = 1;
   mapPolygon.FillColor = Colors.Red;
   mapPolygon.StrokeColor = Colors.Blue;
   mapPolygon.StrokeThickness = 3;
   mapPolygon.StrokeDashed = false;
   myMap.MapElements.Add(mapPolygon);
}

MapPolyline の追加

MapPolyline クラスを使って、線を地図に表示します。 次の例は、UWP の地図サンプルから抜粋したもので、地図に破線を表示します。

private void mapPolylineAddButton_Click(object sender, Windows.UI.Xaml.RoutedEventArgs e)
{
   double centerLatitude = myMap.Center.Position.Latitude;
   double centerLongitude = myMap.Center.Position.Longitude;
   MapPolyline mapPolyline = new MapPolyline();
   mapPolyline.Path = new Geopath(new List<BasicGeoposition>() {                
         new BasicGeoposition() {Latitude=centerLatitude-0.0005, Longitude=centerLongitude-0.001 },                
         new BasicGeoposition() {Latitude=centerLatitude+0.0005, Longitude=centerLongitude+0.001 },
   });

   mapPolyline.StrokeColor = Colors.Black;
   mapPolyline.StrokeThickness = 3;
   mapPolyline.StrokeDashed = true;
   myMap.MapElements.Add(mapPolyline);
}

XAML の追加

XAML を使って、カスタム UI 要素を地図に表示します。 XAML を地図に配置するには、XAML の位置と正規化されたアンカー ポイントを指定します。

  • SetLocation を呼び出して、XAML を地図に配置する位置を設定します。
  • SetNormalizedAnchorPoint を呼び出して、指定した位置に対応する XAML 上の相対位置を設定します。

次の例では、シアトル市の地図を表示して、XAML の Border コントロールを追加し、スペース ニードルの場所を示しています。 また、そのエリアを地図の中央に配置し、拡大しています。 マップ コントロールを使用する方法に関する一般的な情報については、「 2D、3D、Streetside ビューでの地図の表示」をご覧ください。

private void displayXAMLButton_Click(object sender, RoutedEventArgs e)
{
   // Specify a known location.
   BasicGeoposition snPosition = new BasicGeoposition() { Latitude = 47.620, Longitude = -122.349 };
   Geopoint snPoint = new Geopoint(snPosition);

   // Create a XAML border.
   Border border = new Border
   {
      Height = 100,
      Width = 100,
      BorderBrush = new SolidColorBrush(Windows.UI.Colors.Blue),
      BorderThickness = new Thickness(5),
   };

   // Center the map over the POI.
   MapControl1.Center = snPoint;
   MapControl1.ZoomLevel = 14;

   // Add XAML to the map.
   MapControl1.Children.Add(border);
   MapControl.SetLocation(border, snPoint);
   MapControl.SetNormalizedAnchorPoint(border, new Point(0.5, 0.5));
}

この例では、地図に青色の境界線が表示されます。

地図上の関心がある場所に表示された xaml のスクリーンショット

次の例では、データ バインディングを使って、ページの XAML マークアップで XAML UI 要素を直接追加する方法を示しています。 コンテンツを表示する他の XAML 要素と同様に、ChildrenMapControl の既定のコンテンツ プロパティであり、XAML マークアップで明示的に指定する必要はありません。

次の例では、2 つの XAML コントロールを MapControl の暗黙的な子として表示する方法を示しています。

<maps:MapControl>
    <TextBox Text="Seattle" maps:MapControl.Location="{Binding SeattleLocation}"/>
    <TextBox Text="Bellevue" maps:MapControl.Location="{Binding BellevueLocation}"/>
</maps:MapControl>

次の例では、MapItemsControl に含まれている 2 つの XAML コントロールを表示する方法を示しています。

<maps:MapControl>
  <maps:MapItemsControl>
    <TextBox Text="Seattle" maps:MapControl.Location="{Binding SeattleLocation}"/>
    <TextBox Text="Bellevue" maps:MapControl.Location="{Binding BellevueLocation}"/>
  </maps:MapItemsControl>
</maps:MapControl>

次の例では、MapItemsControl にバインドされている XAML 要素のコレクションが表示されます。

<maps:MapControl x:Name="MapControl" MapTapped="MapTapped" MapDoubleTapped="MapTapped" MapHolding="MapTapped">
  <maps:MapItemsControl ItemsSource="{Binding StateOverlays}">
    <maps:MapItemsControl.ItemTemplate>
      <DataTemplate>
        <StackPanel Background="Black" Tapped="Overlay_Tapped">
          <TextBlock maps:MapControl.Location="{Binding Location}" Text="{Binding Name}" maps:MapControl.NormalizedAnchorPoint="0.5,0.5" FontSize="20" Margin="5"/>
        </StackPanel>
      </DataTemplate>
    </maps:MapItemsControl.ItemTemplate>
  </maps:MapItemsControl>
</maps:MapControl>