Bing Mapsで遊ぼう！
第1回　‐SilverlightでBing Mapsを表示しよう‐

Bing Maps Keyを取得し、BlendでBing Mapsアプリを作成

地図の任意の位置を表示する

　せっかく使えるようになったBing Mapsなので、任意の位置を表示してみましょう。

　Mapコントロールは経度と緯度、拡大率を指定することでどの場所もすぐに呼び出すことができます。次の例では画面左下に日本と弊社クラスメソッドの位置に移動するためのボタンを設置してあります。また、上部には経度、緯度、拡大率を知るためそれぞれに対応したLatitudeプロパティ、Longitudeプロパティ、ZoomLevelプロパティが表示されるようになっています。

MainPage.xaml

<UserControl
    xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
    xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
    xmlns:Microsoft_Maps_MapControl="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl"
    xmlns:d="http://schemas.microsoft.com/expression/blend/2008"
    xmlns:mc="http://schemas.openxmlformats.org/markup-compatibility/2006"
    mc:Ignorable="d" xmlns:Microsoft_Maps_MapControl1="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl.Common"
    x:Class="BingMapApp.MainPage" d:DesignWidth="800" d:DesignHeight="600">

    <Grid x:Name="LayoutRoot" Background="White">
        <Microsoft_Maps_MapControl:Map x:Name="BingMaps" CredentialsProvider="Bing Maps Key" d:LayoutOverrides="Width, Height" Margin="0,20,0,0" ZoomLevel="2" d:IsLocked="True"/>
        <TextBlock Height="16" HorizontalAlignment="Left" Margin="0,4,0,0" VerticalAlignment="Top" Width="100" TextWrapping="Wrap" TextAlignment="Right" Text="Latitude:" d:IsLocked="True"/>
        <TextBox Margin="100,0,0,0" VerticalAlignment="Top" Text="{Binding Center.Latitude, ElementName=BingMaps, Mode=OneWay}" TextWrapping="Wrap" HorizontalAlignment="Left" Height="20" Width="100" IsReadOnly="True" d:IsLocked="True"/>
        <TextBlock Height="16" HorizontalAlignment="Left" Margin="200,4,0,0" VerticalAlignment="Top" Width="100" TextWrapping="Wrap" Text="Longitude:" TextAlignment="Right" d:IsLocked="True"/>
        <TextBox Height="20" Margin="300,0,0,0" VerticalAlignment="Top" Text="{Binding Center.Longitude, ElementName=BingMaps, Mode=OneWay}" TextWrapping="Wrap" Width="100" HorizontalAlignment="Left" IsReadOnly="True" d:IsLocked="True"/>
        <TextBlock Height="16" HorizontalAlignment="Left" Margin="400,4,0,0" VerticalAlignment="Top" Width="100" TextWrapping="Wrap" Text="ZoomLevel:" TextAlignment="Right" d:IsLocked="True"/>
        <TextBox Height="20" Margin="500,0,0,0" VerticalAlignment="Top" Text="{Binding ZoomLevel, ElementName=BingMaps, Mode=OneWay}" TextWrapping="Wrap" Width="100" HorizontalAlignment="Left" IsReadOnly="True" d:IsLocked="True"/>
        <Button x:Name="JapanBtn" HorizontalAlignment="Left" Margin="8,0,0,8" VerticalAlignment="Bottom" Width="100" Content="日本" Click="JapanBtn_Click" d:LayoutOverrides="HorizontalAlignment" Height="50"/>
        <Button x:Name="ClassmethodBtn" Height="50" HorizontalAlignment="Left" Margin="112,0,0,8" VerticalAlignment="Bottom" Width="100" Content="クラスメソッド" Click="ClassmethodBtn_Click" d:LayoutOverrides="HorizontalAlignment"/>
    </Grid>
</UserControl>

　ボタンはクリックしたらそれぞれの位置に地図が移動するようにします。SetView関数を利用することで任意の位置に移動させることができます。

MainPage.xaml.cs

using System;
using System.Windows;
using System.Windows.Controls;
using System.Windows.Documents;
using System.Windows.Ink;
using System.Windows.Input;
using System.Windows.Media;
using System.Windows.Media.Animation;
using System.Windows.Shapes;
using Microsoft.Maps.MapControl;

namespace BingMapApp
{
    public partial class MainPage : UserControl
    {
        public MainPage()
        {
            InitializeComponent();
        }

        private void JapanBtn_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            //おおよその日本経緯度原点を指定
            Location center = new Location(35, 139);
            //拡大率は5
            BingMaps.SetView(center, 5);
        }

        private void ClassmethodBtn_Click(object sender, System.Windows.RoutedEventArgs e)
        {
            //クラスメソッドの経度緯度を指定
            Location center = new Location(35.7036, 139.7439);
            //拡大率は19
            BingMaps.SetView(center, 19);
        }
    }
}

　詳しいリファレンスについてはBing Maps Silverlight Control SDKドキュメント（英語）を参照してください。

　今回の記事ではここまでになります。次回は任意の位置にピンを配置したり地図上に画像を張り付けたりする機能を実装してみます。