WPFでBingMapsを使う

最新推荐文章于 2024-10-02 05:39:15 发布

weixin_30478619

最新推荐文章于 2024-10-02 05:39:15 发布

阅读量516

点赞数

文章标签： javascript xhtml ViewUI

原文链接：http://www.cnblogs.com/iphone6/archive/2011/11/28/2265787.html

版权

この間書いたポストの中に出てきたBingMapをWPFアプリケーションで使う方法を紹介します。
ブラウザアプリで使う場合、迷わずMaps Silverlight Controlを使ってくださいね（このネタは誰か別のエバが書いているのでそちらを参照してね）。

さて、ここでは、WPFアプリケーションにBingMapsを埋め込む簡単な方法を紹介します。現在のところWindows Sensor APIは、COMのWrapperを噛まさないと、Silverlightからはアクセスできないので、BingMapsをセンサーでコントロールしたい、といったような場合は、こちらが便利。

まずは、WPFアプリケーションプロジェクトを一つ作成し、WebBrowserコントロールをツールボックスからドラッグ＆ドロップして貼り付けます。

<Window x:Class="WpfApplLocation.MainWindow" xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation" xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml" Title="MainWindow" Height="600" Width="820"> <StackPanel Orientation="Vertical"> <WebBrowser Name="webBrowser1" MinHeight="500" /> </StackPanel> </Window>

WebBrowserコントロールの、SourceプロパティにURLを設定すると、そのURLの内容が表示されます。例えばTextBoxをXAML上に配置して、そのTextBoxの文字列と、Sourceプロパティを連結すると、簡単なブラウザをWeb上で構築することも可能です。

ここでは、以下のようなHTMLファイルをプロジェクトに追加します。名前は、BingMapCtrl.htmとしておきます。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html> <head> <title></title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <script type="text/javascript" 　　　　　src="http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=6.2"> </script> <script type="text/javascript"> var map = null; var LA = new VELatLong(35.644679, 139.734523); var pinPoint = null; var pinPixel = null; var locationHistoryPolyLine = null; var locationHistoryArray = new Array(); function GetMap() { map = new VEMap('myMap'); map.LoadMap(LA, 14, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1); AddPin(); } function SetParams(lat, long, zoom) { LA.Latitude = lat; LA.Longitude = long; map.LoadMap(LA, zoom, VEMapStyle.Road, false, VEMapMode.Mode2D, true, 1); AddPin(); } </script> </head> <body onload="GetMap();"> <div id='myMap' style="position:relative; width:400px; height:400px;"></div> <input id="btnGetInfo" type="button" value="Get Scene Information" name="getinfo" onclick="getInfo();"> <br/> (zoom out 5 clicks to get latitude/longitude and zoom level) </body> </html>

このHTMLの中には、JavaScriptで記述されたBingMapを表示するためのfunctionやコードが記述されています。

プロジェクトにリソースとしてHTMLファイルを用意する場合には、Windowのロード時にHTMLファイルの中身をWebBrowserコントロールのNavigateToStringメソッドを使って流し込みます。

System.Reflection.Assembly current =
    System.Reflection.Assembly.GetExecutingAssembly();
string sourcePath = this.GetType().Namespace + ".BingMapCtrl.htm";
System.IO.TextReader reader =
    new System.IO.StreamReader(
        current.GetManifestResourceStream(sourcePath));

string htmlContent = reader.ReadToEnd();
try
{
    webBrowser1.NavigateToString(htmlContent);
}
catch (Exception ex)
{
    MessageBox.Show(ex.Message);
}

これで、WPFアプリを実行すると、BingMapがWPFアプリとして表示されるはず。
WebBrowserコントロールには、InvokeScriptというメソッドが用意されていて、このメソッドを使って、WebBrowserコントロールにロードされているHTMLに記述された、JavaScriptのfunctionをコールすることができるんです。
例えば、こんな感じ。

string zoom = "14";
webBrowser1.InvokeScript(
    "SetParams",
    new object[] {
        location.Coordinate.Latitude,
        location.Coordinate.Longitude,
        zoom });

これで、HTMLファイルのSetParamsメソッドがコールされて、BingMapの表示の中心点が変わります。
TechDays2010のManagedのLocationライブラリに関するセッションでお見せしたデモは、こちらを使いました。GeoLocationProviderから取得した緯度経度情報を、InvokeScriptメソッドを通じて、JavaScriptのSetParamsをコールし、更に、そのfunctionの中で、BingMapsのAJAX Control APIを呼んであげればよいわけです。

AJAX Control APIでは、地図を3Dに切り替え（動かすPCにBingMaps 3D controlがインストールされている必要あり）ることもできます。APIを通じて、視点の方向や高さを変えることができるので、例えば3軸加速度センサーで、飛んでる感じのアプリを作るなんてことも、できるんです。

BingMaps AJAX APIの詳細は、http://www.microsoft.com/maps/isdk/ajax　で紹介されているので、参考にしてくださいね。

…試にSensor Development Kitのボードで作ってみようと思ったのだが、直進/後進/左右旋回はすぐ思いつくけど、上昇下降の操作方法が思いつかないんだよねぇ。やっぱ脳波センサーで完全集中で月まで（って表示しないし）一っ跳びとか集中途切れて真っ逆さまに墜落？…

转载于:https://www.cnblogs.com/iphone6/archive/2011/11/28/2265787.html