使ってみよう! Bing API/SDK

第30回 はじめよう!Metro スタイル アプリ開発──使ってみよう!Bing Maps SDK for Metro style apps

この記事を読むのに必要な時間:およそ 7 分

地図の表示

それでは,地図を表示させてみましょう。

プロジェクト内のMainPage.xamlを開きます。XAMLの編集画面で,Pageタグに名前空間の宣言を追加します。

xmlns:bm="using:Bing.Maps"

Gridタグの中に,次のようにMapコントロールを追加します。BING_MAPS_KEYの部分は,作成したBing Maps Keyの値に置き換えてください。

<bm:Map Credentials="BING_MAPS_KEY" x:Name="MyMap"></bm:Map>

ここまでの内容は図8のようになります。

図8 Mapコントロールの追加

図8 Mapコントロールの追加

ここまでを実行してみましょう。図9のようにツールバーでローカルコンピューターを選択して,デバッグを開始します。

図9 デバッグの実行

図9 デバッグの実行

アプリが起動して,画面全体に地図が表示されましたね。動作を確認したら,Visual Studioの画面に戻って,実行を停止します(メニュー「デバッグ」「デバッグの停止⁠⁠。

ここで,ローカルコンピューターのかわりにSimulatorを選択して実行すると,タブレットのシミュレーターで動作確認ができます図10⁠。右側にある各ボタンから,デバイスの解像度の変更や回転,経緯度の指定などが行えます。

図10 シミュレーターでのデバッグ

図10 シミュレーターでのデバッグ

基本的な地図の操作

次は,基本的な地図の操作をしてみましょう。

MainPage.xaml.vb(C#の場合は,MainPage.xaml.cs)ファイルを,ソリューションエクスプローラーから開きます。ここに地図の基本的な操作を行うコードを書いていきます。

次のようコンストラクタを追加して,地図を操作するコードを書きます。コードでは,表示する地点の指定,ズームレベルの指定,地図の種類の指定,そして,プッシュピンの追加を行っています。

MainPage.xaml.vb ⁠Visual Basicの場合)

' (ファイルの先頭に Imports Bing.Maps を追加すること)
Sub New()
    InitializeComponent()

    ' 地図の中心の経緯度の指定
    MyMap.Center = New Location(35.71, 139.8107)

    ' ズームレベルの指定
    MyMap.ZoomLevel = 17.5

    ' 地図の種類の指定
    MyMap.MapType = MapType.Birdseye

    ' プッシュピンの追加
    Dim pin = New Bing.Maps.Pushpin
    MapLayer.SetPosition(pin, New Location(35.71, 139.8107))
    MyMap.Children.Add(pin)
End Sub

C#の場合は,既に記述されているコンストラクタに追記します。

MainPage.xaml.cs ⁠C#の場合)

// (ファイルの先頭に using Bing.Maps; を追加すること)
public MainPage()
{
    this.InitializeComponent();

    // 地図の中心の経緯度の指定
    MyMap.Center = new Location(35.71, 139.8107);

    // ズームレベルの指定
    MyMap.ZoomLevel = 17.5;

    // 地図の種類の指定
    MyMap.MapType = MapType.Birdseye;

    // プッシュピンの追加
    var pin = new Bing.Maps.Pushpin();
    MapLayer.SetPosition(pin, new Location(35.71, 139.8107));
    MyMap.Children.Add(pin);
}

ここまでを実行すると,小さい東京スカイツリーが表示されます図11⁠。執筆時点で使われている航空写真(概観図)は,建設前のようですね。また,概観図の場合,日本語とアルファベットの地名の表記が混じっています。プッシュピンは,図のように丸いオブジェクトで表現されます。

図11 地図の基本的な操作

図11 地図の基本的な操作

同じ内容をXAMLで記述すると次のようになります。

MainPage.xaml

<bm:Map Credentials="BingMapsKey"
        Name="MyMap"
        ZoomLevel="17.5">
    <bm:Map.Center>
        <bm:Location Latitude="35.71" Longitude="139.8107" />
    </bm:Map.Center>
    <bm:Map.Children>
        <bm:Pushpin>
            <bm:MapLayer.Position>
                <bm:Location Latitude="35.71" Longitude="139.8107" />
            </bm:MapLayer.Position>
        </bm:Pushpin>
    </bm:Map.Children>
</bm:Map>

ちなみに,C++のプロジェクトを選択した場合も同様にXAMLを記述して同じMetroスタイル アプリが作れます。

著者プロフィール

松江祐輔(まつえゆうすけ)

日本システムウエア株式会社 勤務。現在,ハードウェア設計・検証業務を担当。大学生・大学院生時代はベンチャー企業 有限会社ミレニアムシステムズにプログラマーとして従事。趣味はプログラミング。好きな言語はVisual Basic。Microsoft MVP for Windows Live Platform(Jul 2010 - Jun 2011),Windows Live(Jul 2011 - Jun 2013)。

URL:http://katamari.jp