パノラマページを作成する（前編）
2011年7月15日(金)
XAML(BingMap.xaml)の編集
BingMaps.xamlをリスト3のように編集します。
リスト3 編集されたXAMLコード(BingMaps.xaml)
01 | （１）Mapの資格情報プロバイダーを設定する<my:Map.CredentialsProvider>プロパティ要素内に、<my:ApplicationIdCredentialsProvider>要素を記述し、ApplicationIdプロパティにMaps Account Centerより取得したKeyを指定します。このサンプルでは「XXXXXXXXXXXXX」を指定していますので、動作させる場合は、各自がKeyを取得して、サンプルコードの「XXXXXXXXXXXXX」内に入力してください。 |
02 | <phone:PhoneApplicationPage |
03 | x:Class="WP7_Panorama.BingMaps" |
05 | xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" |
06 | xmlns:phone="clr-namespace:Microsoft.Phone.Controls;assembly=Microsoft.Phone" |
07 | xmlns:shell="clr-namespace:Microsoft.Phone.Shell;assembly=Microsoft.Phone" |
08 | xmlns:d="http://schemas.microsoft.com/expression/blend/2008" |
10 | FontFamily="{StaticResource PhoneFontFamilyNormal}" |
11 | FontSize="{StaticResource PhoneFontSizeNormal}" |
12 | Foreground="{StaticResource PhoneForegroundBrush}" |
13 | SupportedOrientations="Portrait" Orientation="Portrait" |
14 | mc:Ignorable="d" d:DesignHeight="768" d:DesignWidth="480" |
15 | shell:SystemTray.IsVisible="True" xmlns:my="clr-namespace:Microsoft.Phone.Controls.Maps;assembly=Microsoft.Phone.Controls.Maps"> |
16 | |
17 | <!--LayoutRoot is the root grid where all page content is placed--> |
18 | <Grid x:Name="LayoutRoot" Background="Transparent"> |
19 | <Grid.RowDefinitions> |
20 | <RowDefinition Height="Auto"/> |
21 | <RowDefinition Height="*"/> |
22 | </Grid.RowDefinitions> |
23 | |
24 | <!--TitlePanel contains the name of the application and page title--> |
25 | <StackPanel x:Name="TitlePanel" Grid.Row="0" Margin="12,17,0,28"> |
26 | <TextBlock x:Name="ApplicationTitle" Text="APPLICATION" Style="{StaticResource PhoneTextNormalStyle}"/> |
27 | <TextBlock x:Name="PageTitle" Margin="9,-7,0,0" Style="{StaticResource PhoneTextTitle1Style}"/> |
28 | <Button x:Name="Button1" Content="道路を表示中"/> |
29 | </StackPanel> |
30 | |
31 | <!--ContentPanel - place additional content here--> |
32 | <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"> |
33 | <my:Map Height="569" HorizontalAlignment="Left" Margin="20,23,0,0" Name="Map1" VerticalAlignment="Top" Width="424"> ■（１） |
34 | <my:Map.CredentialsProvider> |
35 | <my:ApplicationIdCredentialsProvider ApplicationId="XXXXXXXXXXXXX" /> |
36 | </my:Map.CredentialsProvider> |
37 | </my:Map> |
38 | </Grid> |
39 | </Grid> |
40 | ～コード略～ |
41 | </phone:PhoneApplicationPage> |
リスト1のAddress.xmlを見るとわかりますが、緯度と経度が設定されています。任意の場所の緯度と経度を取得する方法について解説します。
Bing Mapsで任意の場所の緯度と経度を取得する方法
下記URLからBingの地図検索画面に入ります。
→参照：bing 地図
検索入力ボックスに場所を入力します。この例では「愛媛県松山市道後」と入力します（図12）。
|
|
| 図12：Bing地図検索画面の入力ボックスに「愛媛県松山市道後」と入力した（クリックで拡大） |
「検索」の虫眼鏡アイコンをクリックします。「愛媛県松山市道後」近辺の地図が表示されます。画面左下にある「地図を共有します」アイコンをクリックします（図13）。
|
|
| 図13：画面左下にある「地図を共有します」アイコンをクリックする（クリックで拡大） |
すると、「共有」ダイアログボックスが開き、「リンクのコピー」欄に、
http://www.bing.com/maps/?v=2&cp=33.85146146218196~132.7818511666665&lvl=16&dir=0&sty=r&FORM=LMLTCC
と表示されます。cp=33.85146146218196~132.7818511666665 の最初の値が「緯度」で～以降の値が「経度」です。cp=緯度～経度となっています。このサンプルでは小数点以下4桁までを取得して、リスト1のように緯度と経度をXML文書内に記述しています（図14）。
|
|
| 図14：緯度と経度が表示される |
検索入力ボックスに住所を入力して、必要な緯度と経度を取得してください。
＜後編に続きます＞
連載バックナンバー
Think ITメルマガ会員登録受付中
Think ITでは、技術情報が詰まったメールマガジン「Think IT Weekly」の配信サービスを提供しています。メルマガ会員登録を済ませれば、メルマガだけでなく、さまざまな限定特典を入手できるようになります。
