Bing Maps SDK for Windows Apps:地図上に画像を表示する

プッシュピンを置くのエントリで紹介しましたが、MapLayerクラスのSetPositionメソッドは、MapクラスもしくはMapクラス内のMapLayerクラスの子要素であるDependencyオブジェクトに座標位置を設定するための静的メソッドです。

つまりDependencyオブジェクトであれば座標位置を設定して地図上に表示することができます。というわけで今回は以下の猫画像を地図上のタップした位置に表示してみたいと思います。

以下が画像をMapクラスに追加するコードです。

[C#]

//猫画像を初期化
var catImage = new Image();
catImage.Source = new BitmapImage(new Uri(@"ms-appx:///Assets/cat.png", UriKind.Absolute));
catImage.Height = 50;
catImage.Width = 50;

//猫画像にBing.Maps.MapLayer.SetPositionでタップした座標位置を設定
Bing.Maps.MapLayer.SetPosition(catImage, [表示する座標位置]);

//マップに猫画像を追加
myMap.Children.Add(catImage);


このコードをMapクラスのタップイベント内で実行します。地図上のタップした位置に○○を表示する手順はタップした位置にプッシュピンを置くを読んでみてください

[C#]

private void myMap_Tapped(object sender, TappedRoutedEventArgs e)
{
	//Mapクラスを原点としたタップ位置を取得
	Point p = e.GetPosition(myMap);

	//タップ位置を座標値に変換
	Bing.Maps.Location loc;
	if (myMap.TryPixelToLocation(p, out loc))
	{
		//猫画像を初期化
		var catImage = new Image();
		catImage.Source = new BitmapImage(new Uri(@"ms-appx:///Assets/cat.png", UriKind.Absolute));
		catImage.Height = 50;
		catImage.Width = 50;

		//猫画像にBing.Maps.MapLayer.SetPositionでタップした座標位置を設定
		Bing.Maps.MapLayer.SetPosition(catImage, loc);

		//マップに猫画像を追加
		myMap.Children.Add(catImage);
	}
}

実行結果

実行結果です。タップした位置に猫画像が表示されます。