とりあえず使ってみる

使い方は、超簡単です。下記のように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>

 

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

image

地図のトークンは相変わらず必須なので、ここ から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とかでは、上記のコードを実行すると、以下のような感じのアイコンが表示されます。

image

もう少し拡大すると、アイコンの横にTitleで設定したテキストが表示されます。

NormalizedAnchorPointは、値が0, 0だと表示する座標に対して、アイコンの左上が原点となって表示されるので、適当に値を入れて真ん中とか矢印のあたりが座標を示すようにするとよりいい感じです。

 

まとめ

ストアアプリ時代みたいに別途SDKを入れる必要がなくなったのは、かなり楽になった感じです。

アイコンに画像を入れたりとかもできるらしいのでそれはまた今度。

CATEGORIES