連載
» 2013年12月02日 18時00分 公開

手書きで入力した住所の位置をBing Maps SDKで地図上に表示するには2カ月で160本作った還暦開発者が送る10のアプリ開発ノウハウ(8)(5/5 ページ)

[薬師寺国安,PROJECT KySS]
前のページへ 1|2|3|4|5       

Bing Mapの表示されるページのロジックコードを記述する(BingMapsPage.xaml.vb)

 次に、[ソリューション・エクスプローラー]内の「BiltShowImage.xaml」を展開して表示される、「BingMapsPage.xaml.vb」のコードを記述する。

 ここではコードが長くなるため、一部省略している。全てのコードは、サンプルをダウンロードして「BingMapsPage.xaml.vb」ファイルで確認してほしい。

ページがアクティブになった時の処理(OnNavigatedToメソッド処理)

    Protected Overrides Sub OnNavigatedTo(e As Navigation.NavigationEventArgs)
        Dim myResult = DirectCast(e.Parameter, MapPosition)
        Dim myLatitude = myResult.myLatitude
        Dim myLongitude = myResult.myLogitude
        Dim myAddress = myResult.myAddress
        myMap.Center = New Location(CDbl(myLatitude), CDbl(myLongitude))
        addressTextBox.Text = myAddress
        Dim myEllipse As New Ellipse
        With myEllipse
            .Fill = New SolidColorBrush(Colors.Crimson)
            .StrokeThickness = 3
            .Stroke = New SolidColorBrush(Colors.Navy)
            .Width = 30
            .Height = 30
        End With
        Dim myStackPanel As New StackPanel
        myStackPanel.Margin = New Thickness(5)
        myStackPanel.Background = New SolidColorBrush(Colors.Navy)
        myStackPanel.Visibility = Xaml.Visibility.Collapsed
        Dim myTextBlock As New TextBlock
        myTextBlock.Foreground = New SolidColorBrush(Colors.Red)
        myTextBlock.FontSize = 24
        myTextBlock.Text = myAddress
        myStackPanel.Children.Add(myTextBlock)
        Dim myLocation As Location
        myLocation = New Location(CDbl(myLatitude), CDbl(myLongitude))
        MapLayer.SetPosition(myEllipse, myLocation)
        myMap.Children.Add(myEllipse)
        myMap.SetView(myLocation, 12)
        MapLayer.SetPosition(myStackPanel, New Location(CDbl(myLatitude), CDbl(myLongitude)))
        myMap.Children.Add(myStackPanel)
        AddHandler myEllipse.Tapped, Sub()
                                         myStackPanel.Visibility = Xaml.Visibility.Visible
                                     End Sub
        AddHandler myStackPanel.Tapped, Sub()
                                            myStackPanel.Visibility = Xaml.Visibility.Collapsed
                                        End Sub
    End Sub
End Class

 MainMageから送られた値(e.Parameter)をMapPosition構造体に変換し、myResultで参照する。

 myLatitude変数に構造体のmyLatitudeの値(緯度)を格納する。myLongitude変数に構造体のmyLongitudeの値(経度)を格納する。myAddress変数に構造体のmyAddressの値(住所)を格納する。

 MapのCenterプロパティにDouble型に変換したmyLatitudeとmyLongitudeの値を指定する。addressTextBoxに住所を表示する。

 新しいEllipseのインスタンスmyEllipseオブジェクトを作成する。FillプロパティにCrimsonを指定し、Crimson色で塗りつぶす。枠線の太さを3に指定し、枠線の色をNavyに指定する。WidthとHeightは「30」とする。直径30pxの円が描かれる。

 新しいStackPanelのインスタンスmyStackpanelオブジェクトを作成する。Marginプロパティに「5」を指定して余白を設ける。背景色にNavyを指定する。初期状態ではmyStackPanelオブジェクトを非表示としておく。

 次に、TextBlockの新しいインスタンスmyTextBlockオブジェクトを作成する。文字色をRedに指定する。文字サイズは24、TextプロパティにはmyAddress変数の値を指定する。myStackPanelオブジェクトにmyTextBlockオブジェクトを追加する。

 myLatitudeとmyLongitudeで初期化された、新しいLocationのオブジェクト、myLocationを作成する。

 MapLayerクラスのSetPositionメソッドで、マップレイヤ内に要素の位置を設定する。この場合、myLatitudeとmyLongitudeの位置に円をセットする。MapLayerクラスは、地図上の要素の位置を保持しているマップレイヤを表すクラスだ。MapにAddメソッドでmyEllipseオブジェクトを追加する。SetViewメソッドで、その住所の位置をズームインして表示させる。

 同様に、MapLayerクラスのSetPositionメソッドで、マップレイヤ内に要素の位置を設定する。この場合、myLatitudeとmyLongitudeの位置にStackPanelをセットする。MapにAddメソッドでmyStackPanelオブジェクトを追加する。

 円がタップされた時は、myStackPanelオブジェクトを表示する。住所の書かれたTextBlockが表示される。myStackPanelオブジェクトがタップされた時は、myStackPanelオブジェクトを非表示にする。住所の表示されたTextBlockも非表示になる。

次回は、選択した画像をトリミングして保存させる

 今回はここまでだ。また次回の記事でお会いしよう。次回は、選択した画像をトリミングして保存させる方法を紹介する。

著者プロフィール

PROJECT KySS 薬師寺 国安(やくしじ くにやす)

1950年生まれ。フリーVBプログラマ。高級婦人服メーカーの事務職に在職中、趣味でVBやActiveXに取り組み、記事を執筆。2003年よりフリー。.NETやRIAに関する執筆多数。Windowsストアアプリも多数公開中(約270本)。

 

Microsoft MVP for Development Platforms - Client App Dev (Oct 2003-Sep 2012)。

Microsoft MVP for Development Platforms - Windows Phone Development(Oct 2012-Sep 2013)。

Microsoft MVP for Development Platforms - Client Development(Oct 2013-Sep 2014)。

PROJECT KySSは、1997年に薬師寺聖と結成したコラボレーション・ユニット


前のページへ 1|2|3|4|5       

Copyright © ITmedia, Inc. All Rights Reserved.

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。