読者です 読者をやめる 読者になる 読者になる

はつねの日記

Kinect, Windows 10 UWP, Windows Azure, IoT, 電子工作

地図を表示するUWPアプリを作成する

UWP Windows10 Windows10Mobile

このエントリは、Windows Phone / Windows 10 Mobile Advent Calendar 2015の12/7エントリです。

 

Windowsストアアプリで地図を使ったアプリを作成するときはVS拡張でBingMapSDKを導入します。

image

一方、WP8.1ストアアプリでは特に何も拡張したり参照設定したりは不要でした。

 

そのため8.1なユニバーサルアプリを作成しようとすると、地図周りのロジックは統一することはできませんでした。

 

UWPアプリではどうなったか?

UWPには、「Windows.UI.Xaml.Controls.Maps」が用意されておりWP8.1ライクな手軽さで地図が扱えます。

<Maps:MapControl Grid.Column="1" Grid.Row="0" Grid.RowSpan="3"
                    x:Name="Bing_Map"
                    ZoomLevel="17"
                    MapServiceToken = "hogehogehoge"
                    ScrollViewer.VerticalScrollBarVisibility="Disabled"
                    HorizontalAlignment="Stretch"
                    VerticalContentAlignment="Stretch"
                    TiltInteractionMode="GestureAndControl"
                    ZoomInteractionMode="GestureAndControl"
                    RotateInteractionMode="GestureAndControl"
                    BusinessLandmarksVisible="True"
                    LandmarksVisible="True"
                    TrafficFlowVisible="True"
                    UseSystemFocusVisuals="True">
</Maps:MapControl>

もちろん、UWPアプリですから、Windows 10でもWindows 10 Mobileでもコードは同じです。

また、どちらでも日本の地図はわかりやすい表示になります。

image

disp

注意点1

MapControlを使う場合は、MapServiceTokenにキーを設定します。

このキーはBing Maps developerサイト(https://www.bingmapsportal.com/)で生成します。

また、以前、Windows 8.1ストアアプリでBing Map SDKを使っていた時に取得したキーは使えませんので、UWP用のキーを取り直しましょう。

注意点2

UWPのXAMLページに、Windows 8.1ストアアプリ用のBing Map SDKの地図をはりつけることができます。

XAMLデザイナーに地図も表示されますし、ローカルコンピューターを実行先にしてデバック実行もできます。

これはWindows8.1ストアアプリで地図を使ったことのある人が陥る罠ともいえます。

当然、Windows 10 Mobile実機やエミュレーターで動作させようとするとエラーになります。UWPアプリなので動くと思っているとこのことに気づくのが遅れます。注意が必要ですね。

UWPでは参照設定なく地図が利用可能です。参照定義にBing Map SDKやそれに付随したC++ Runtimeなどがないか確認してみてくださいね。

 

それでは、UWPで地図アプリ作成をお楽しみください。