PR

Bing Maps上の好きな場所をマークして情報を表示するプログラムを作る

2013年2月28日(木)
薬師寺 国安

今回は、地図上にある任意の場所をマークして情報を表示するプログラミングサンプルを紹介します。

サンプルでは、筆者の地元である四国八十八か所の霊場をBing Maps上に表示します。札所の番号が付いた円が表示されているので、タップすると札所名と所在地が表示されます。[検索]ボタンも表示され、ボタンをクリックするとBing起動して、該当する札所情報をInternet Explorer10に表示します。

図1:四国八十八か所の霊場の位置に札所の番号が表示された円が表示されている(左)/図2:任意の札所をタップすると札所名と所在地、[検索]ボタンが表示される(右)(クリックで拡大)
図3:[検索]ボタンをタップすると該当する札所に関する情報がInternet Explorer10に表示される(左)/図4:該当するデータをタップすると情報が表示される(右)(クリックで拡大)

四国八十八か所の地図に戻るには、画面の左隅上にマウスポインターを移動してマウスポインターを下方向にずらすことで、最近使用したアプリの一覧が表示されます。その中から、現在実行しているアプリを選択します。この箇所の画像はキャプチャできませんので、実際に自分で試してみてください。次に紹介する動画の中で説明しています。

実際に動かした動画は下記のようになります。Windows Store Applicationの動画を撮るアプリケーションが存在していませんので、スマホで撮った動画です。見難い点はご了承願います。

サンプル一式は、会員限定特典としてダウンロードできます。記事末尾をご確認ください。

プロジェクトの作成

VS 2012のメニューから[ファイル(F)/新規作成(N)/プロジェクト(P)]と選択します。次に、「テンプレート」から「Windows ストア」を選択し、右に表示される項目名から「新しいアプリケーション(XAML)」を選択します。「名前(N)」には任意のプロジェクト名を指定します。ここでは「Win8_Michitomo」という名前を付けています。

ソリューションエクスプローラー内のプロジェクト内に、マウスの右クリックで表示されるメニューの「追加(D)/新しい項目(W)」から、リスト1のXML文書ファイル(Michitomo.xml)を追加します。

ダウンロードされたサンプルファイルにはXML文書ファイルは追加済みです。

リスト1 XML文書ファイル(Michitomo.xml)

<?xml version="1.0"?>
<遍路>
  <札所番号="1" 所在県="徳島県" 所在地="徳島県大麻町板東126" 緯度="34.1593899" 経度="134.5030885" ルビ="りょうぜんじ">霊山寺</札所>
  <札所番号="2" 所在県="徳島県" 所在地="徳島県鳴門市大麻町字檜ダンの上12" 緯度="34.15565101" 経度="134.49034826" ルビ="ごくらくじ">極楽寺</札所>
  <札所番号="3" 所在県="徳島県" 所在地="徳島県板野郡板野町大寺66" 緯度="34.14743168" 経度="134.46853091" ルビ="こんせんじ">金泉寺</札所>
  <札所番号="4" 所在県="徳島県" 所在地="徳島県板野郡板野町黒谷5" 緯度="34.1513026632698" 経度="134.43085658" ルビ="だいにちじ">大日寺</札所>
  <札所番号="5" 所在県="徳島県" 所在地="徳島県板野郡板野町羅漢字林東5" 緯度="34.13716523" 経度="134.43195684" ルビ="じぞうじ">地蔵寺</札所>
  ~<札所></札所>繰り返し~
</遍路>

「拡張機能と更新プログラム」から「Bing Maps SDK for Windows store apps」のインストール

Bing MapsをWindows ストアから使用するには、あらかじめ「Bing Maps SDK for Windows store apps」をインストールしておく必要があります。

まず、VS2012のメニューの「ツール(T)/拡張機能と更新プログラム(U)」と選択します。表示される画面の左から、「オンライン」を選択します。すると「Bing Maps SDK for Windows store apps」の「ダウンロード」が出てきますので「ダウンロード」をクリックします。

「ダウンロード」をクリックすると「ダウンロード」が開始されます。「ダウンロード」が完了すると「インストール」が出てきますので、これをクリックしてインストールします。インストールが完了すると、「Bing Maps SDK for Windows store apps」の右隅上にインストール済みのアイコンが付きます

[今すぐ再起動]をクリックしてVS2012を再起動してください。

画像付きの詳細な解説については、前回の「Bing Maps上に地震の震源地を表示する」を参照してください。

Think IT会員限定特典
  • Bing Maps上にマークした場所の情報を表示するWindowsアプリ

薬師寺国安事務所

薬師寺国安事務所代表。Visual Basic プログラミングと、マイクロソフト系の技術をテーマとした、書籍や記事の執筆を行う。
1950年生まれ。事務系のサラリーマンだった40歳から趣味でプログラミングを始め、1996年より独学でActiveXに取り組む。1997年に薬師寺聖とコラボレーション・ユニット PROJECT KySS を結成。2003年よりフリーになり、PROJECT KySS の活動に本格的に参加、.NETやRIAに関する書籍や記事を多数執筆する傍ら、受託案件のプログラミングも手掛ける。Windows Phoneアプリ開発を経て、現在はWindows ストア アプリを多数公開中

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)。Microsoft MVP for Development Platforms-Windows Platform Development (Oct 2014-Sep 2015)。

連載バックナンバー

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています