UWPで地図を使う - ごった煮

UWPは、ストアアプリの時と違い、Windows Phone時代のようにデフォルトで地図のコントロールが使えるので、GPSの使い方のテストのついでに試してみました。

とりあえず使ってみる

使い方は、超簡単です。下記のようにXAMLにコントロールを貼り付けるだけ(以下のコードは、貼り付けので<>が全角になってるのでコピペする際は注意)

＜Page xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" xmlns:local="using:uwp_map" 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" x:Class="uwp_map.MainPage" mc:Ignorable="d"＞

＜Grid Background="{ThemeResource ApplicationPageBackgroundThemeBrush}"＞
    ＜Maps:MapControl x:Name="Maps" /＞
＜/Grid＞

＜/Page＞

これで以下のように地図が出るアプリができます。

地図のトークンは相変わらず必須なので、ここからUWP用のキーを取得してXAMLのMapServiceTokenに設定してください。

8.1用のキーは使えないみたいなので必ずUWP用を取得しましょう

GPSで位置情報を取得する

地図上に現在位置を表示してみたいので、とりあえず自分の位置情報を取得してみます。

位置情報にアクセスするので、マニフェストファイルで位置情報に許可を事前に出しておいてください。

        /// 
        /// 端末のGPS座標を返す
        /// 
        /// 
        private async Task GetDeviceLocation()
        {
            var geoLocator = new Geolocator();
            return await geoLocator.GetGeopositionAsync();
        }

        /// 
        /// 地図に表示するための座標を返す
        /// 
        /// 
        private async Task getGeopoint()
        {
            var positon = await GetDeviceLocation();
            return positon.Coordinate.Point;
        }

これで、地図に表示できる座標が取得できます。

地図にアイコンを表示する

座標が取れたら、その位置にアイコンを表示します。

        private async void ShowGeoLocator()
        {
            var icon = new MapIcon();
            icon.Location = await getGeopoint();
            icon.NormalizedAnchorPoint = new Point(0.5, 1.0);
            icon.Title = "house";
            Maps.MapElements.Add(icon);
        }

8.1とかでは、上記のコードを実行すると、以下のような感じのアイコンが表示されます。