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

[薬師寺国安，PROJECT KySS]

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年に薬師寺聖と結成したコラボレーション・ユニット