はじめてのBing Maps Silverlight Control
Download Bing Maps Silverlight Control SDK from Official Microsoft Download Center
Silverlight用のBingMapsコントロールがリリースされたので、勉強がてら簡単なサンプルを作成してみます。
お題はコレ。
↑テキストボックスにキーワード(例えば東京タワーとか)を入力したら、その場所を表示する、という単純なの。
UIはSilverlighで作成。サーバー側はキーワードを受け取ってジオコードを返す。後は、そのジオコードをBingMapsに渡すだけです。
<UserControl xClass="BingMapsSample.MainPage" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlnsx="http://schemas.microsoft.com/winfx/2006/xaml" xmlnsd="http://schemas.microsoft.com/expression/blend/2008" xmlnsmc="http://schemas.openxmlformats.org/markup-compatibility/2006" mcIgnorable="d" xmlnsm="clr-namespace:Microsoft.Maps.MapControl;assembly=Microsoft.Maps.MapControl" d:DesignHeight="300" d:DesignWidth="400"> <Grid xName="LayoutRoot" Background="White"> <GridRowDefinitions> <RowDefinition Height="Auto"> <RowDefinition Height="*"> </GridRowDefinitions> <GridColumnDefinitions> <ColumnDefinition> <ColumnDefinition Width="Auto"> </GridColumnDefinitions> <TextBox Name="address" GridRow="0"></TextBox> <Button GridRow="0" GridColumn="1" Content="Go" Click="Button_Click"> <mMap Name="map" GridRow="1" GridColumnSpan="2" CredentialsProvider="key" Mode="Aerial" > </Grid> </UserControl>
↑まずは、テキストボックスとボタンとBingMapsしか無い手抜きUI。
CredentialsProvider="key"
↑keyは各自で入手してください。
次に、UIのコード部分。
using System; using System.Collections.Generic; using System.Linq; using System.Net; using System.Windows; using System.Windows.Controls; using System.Windows.Documents; using System.Windows.Input; using System.Windows.Media; using System.Windows.Media.Animation; using System.Windows.Shapes; using Microsoft.Maps.MapControl.Design; using System.Json; namespace BingMapsSample { public partial class MainPage : UserControl { public MainPage() { InitializeComponent(); } private void Button_Click(object sender, RoutedEventArgs e) { WebClient client = new WebClient(); string url = "http://localhost:52378/GeoCode/Get/" + Uri.EscapeUriString(address.Text); client.DownloadStringCompleted += new DownloadStringCompletedEventHandler(client_DownloadStringCompleted); client.DownloadStringAsync(new Uri(url), null); } void client_DownloadStringCompleted(object sender, DownloadStringCompletedEventArgs e) { if (e.Error != null) return; var result = e.Result; var val = JsonValue.Parse(result); var coordinates = val["Placemark"][0]["Point"]["coordinates"]; map.SetView(new Microsoft.Maps.MapControl.Location(coordinates[1], coordinates[0]), 20); } } }
入力したキーワードを取得して、GeocodeControllerのGetメソッドを呼び出して、戻ってきた結果からジオコードを取得するだけ。GeocodeControllerは、ASP.NET MVCのコントローラでこれから作るものです。
で、そのコントローラ。
using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.Mvc; using System.Web.Mvc.Ajax; using System.Net; using System.IO; using System.Text; namespace BingMapsSample.Web.Controllers { public class GeocodeController : Controller { // // GET: /Geocode/ public ActionResult Index() { return View(); } public ActionResult Get() { const string URL = "http://maps.google.com/maps/geo?q="; WebClient client = new WebClient(); string url = URL + Uri.EscapeUriString(RouteData.Values["id"].ToString()); var stream = client.OpenRead(new Uri(url)); var text = new StreamReader(stream, Encoding.UTF8).ReadToEnd(); return Content(text); } } }
maps.google.comにアクセスするだけですね。
これで画像のようなサンプルの完成です。記事にしたら大したことありませんが、久々のSilverlightだったり、不慣れなASP.NET MVCだったり、初めてのJsonValueだったりで、悪戦苦闘しました。(^^;