Bing Mapsで地図を表示させよう

次に、入力ボックスに住所を入力して［OK］ボタンをクリックした時の処理を実装します（リスト4）。

今回は、住所から経度、緯度を取得するGeocoding APIを使用する。GeoCoding APIに関しては、下記のURLを参照してほしい。

http://www.geocoding.jp/api/ 引数qに住所を指定する。この場合は、addressTextBox.Textに入力された値を指定している。String.Format("http://www.geocoding.jp/api/?v=1.1&q={0}", addressTextBox)を変数addressUriに格納しておく。新しいHttpClientのインスタンスmyHttpClientオブジェクトを作成する。GetStringAsyncメソッドでaddressUriの応答本体を文字列として受け取り、変数myResponseに格納する。XElement.Parseメソッドで結果XMLを格納しているmyResponseを文字列として読み込む。メンバー変数myAddressLatitudeに要素の子要素の値(緯度)を格納する。メンバー変数myAddressLongitudeに要素の子要素の値(経度)を格納する。地図内を一度クリアして、DataShowプロシージャを実行する。

リスト4　［OK］ ボタンをクリックした時の処理

    Private Async Sub okButton_Click(sender As Object, e As RoutedEventArgs) Handles okButton.Click
        If addressTextBox.Text <> String.Empty Then
            Dim addressUri = String.Format("http://www.geocoding.jp/api/?v=1.1&q={0}", addressTextBox.Text)
            Dim myHttpClient As New HttpClient
            Dim myResponse = Await myHttpClient.GetStringAsync(New Uri(addressUri, UriKind.Absolute))
            Dim xmldoc As XElement = XElement.Parse(myResponse)
            myAddressLatitude = xmldoc.Descendants("coordinate").Elements("lat").Value
            myAddressLongitude = xmldoc.Descendants("coordinate").Elements("lng").Value
            myMap.Children.Clear()
            DataShow()
        Else
            Exit Sub
        End If
    End Sub

次は、入力した住所の位置にプッシュピンを立て、その位置までズームインする処理です。プッシュピンは、今回は画像で代用しています。この画像をタップすると住所が表示され、表示された住所をタップすると住所が消える仕組みになっています（リスト5）。

新しいImageクラスのインスタンスmyPinオブジェクトを作成する。myPinオブジェクトのWidthとHeightを指定し、Sourceプロパティに、ソリューションエクスプローラー内のImageフォルダーに取り込んでおいた画像を指定する。地理的位置に関連付けされた緯度と経度で初期化された、新しいLocationクラスのインスタンスmyLocationオブジェクトを作成する。Locationクラスは、地図上の場所の標高と座標値を含むクラスです。MapLayerクラスのSetPositionメソッドで、マップレイヤー内にピンの位置を設定する。myMapにAddメソッドでピンを追加する。SetViewメソッドで、指定された中心部に位置、ズーム レベル、方位、およびピッチにマップビューを設定します。この場合myLocationの位置に14レベルでズームインする。

次は、住所を表示させる領域を作成する。

新しいStackPanelのインスタンスmyStackPanelオブジェクトを作成する。Marginプロパティに5を指定して余白を設ける。背景色をNavyに指定する。このStackPanelオブジェクトのインスタンスを、非表示としておく。新しいTextBlockのインスタンスmyAddressTextBlockオブジェクトを作成する。文字色をRedに指定する。文字サイズに24を指定し、パディングに5を指定する。Textプロパティに住所を入力したaddressTextBox.Textの値と、文字列「【場所】=」を連結して指定する。myStackPanelオブジェクトにmyAddresstextBlockオブジェクトを追加する。

Locationをメンバー変数myAddressLatitudeが格納している緯度とmyAddressLongitudeが格納している経度で初期化し、MapLayerクラスのSetPositionメソッドで、マップレイヤー内にmyStackPanelオブジェクトの位置を設定する。MapLayerクラスは、地図上の要素の位置を保持しているマップレイヤーを表すクラスです。

AddHandlerステートメントで、プッシュピンがタップされた時のイベントハンドラを追加する。myStackPanelオブジェクトが表示状態になり、住所が表示される。AddHandlerステートメントで、住所の表示された、myStackPanelがタップされた時のイベントハンドラを追加する。myStackPanelオブジェクトが非表示になる。

リスト5 指定した位置にズームインしてプッシュピンを立てる

    Private Sub DataShow()
        myMap.Children.Clear()
        Dim myPin As New Image
        Dim myLocation As Location
        With myPin
            .Width = 96
            .Height = 96
            .Source = New BitmapImage(New Uri("ms-appx:///Image/pin.png", UriKind.Absolute))
        End With
        myLocation = New Location(CDbl(myAddressLatitude), CDbl(myAddressLongitude))
        MapLayer.SetPosition(myPin, myLocation)
        myMap.Children.Add(myPin)
        myMap.SetView(myLocation, 14)

        Dim myStackPanel As New StackPanel
        myStackPanel.Margin = New Thickness(5)
        myStackPanel.Background = New SolidColorBrush(Colors.Navy)
        myStackPanel.Visibility = Xaml.Visibility.Collapsed

        Dim myAddressTextBlock As New TextBlock
        myAddressTextBlock.Foreground = New SolidColorBrush(Colors.Red)
        myAddressTextBlock.Width = 400
        myAddressTextBlock.TextWrapping = TextWrapping.Wrap
        myAddressTextBlock.FontSize = 24
        myAddressTextBlock.Padding = New Thickness(5)
        myAddressTextBlock.Text = "【場所】=" & addressTextBox.Text

        myStackPanel.Children.Add(myAddressTextBlock)

        MapLayer.SetPosition(myStackPanel, New Location(CDbl(myAddressLatitude), CDbl(myAddressLongitude)))
        myMap.Children.Add(myStackPanel)

        AddHandler myPin.Tapped, Sub()
                                     myStackPanel.Visibility = Xaml.Visibility.Visible
                                 End Sub

        AddHandler myStackPanel.Tapped, Sub()
                                            myStackPanel.Visibility = Xaml.Visibility.Collapsed
                                        End Sub
    End Sub
End Class

最後にプログラムを実行してみましょう。まず表示された画面に住所を入力します（図10）。次に［OK］ボタンをタップするとその位置にズームインします（図11）。そして、プッシュピンをタップすると住所が表示されます（図12）。

図10　住所を入力する

図11　［OK］ボタンをタップする

図12 プッシュピンをタップすると住所が表示される

以上の処理を実行するのに要したコードは67行です（ただしXAMLコードは含んでいません）。

今回は、これで終わりです。Bing Mapsを使用できるようにするまでには、いろいろな手順を踏む必要がありますが、これは最初の1回だけで、次からはこれらの設定は不要です。ただし、「参照設定」に「Microsoft Visual C++ 2013 Runtime Package」を追加する処理と、「構成マネージャ」の設定はその都度必要になってきます。Bing Mapsが使用できるようになると、Google Places API等を使って、各施設の位置を表示させることも簡単にできるようになります。今回は、住所から緯度・経度を取得するのに、GeoCooding APIを使用しました。これは大変に便利で筆者はよく利用しています。参考URLも記述しておいたので、ぜひ読んでいろいろ試してください。

今回のBing Mapsの使い方はごく基本的な使い方を紹介しました。プッシュピンの位置に風景画像を表示させたり、自分の現在位置を取得することも可能です。また機会があれば紹介したいと思います。

次回は、WebViewコントロールの使い方を紹介します。お楽しみに。