電子国土地図を使ってみる。[Chapter 3]
今回は、GoogleMapsの緯度経度を.NETに値を渡してみます。
これができると、javascriptを.netから制御できるようになりますね。
何をどうしてよいのかわからなかったので、グーグル先生に聞いてみました。
すると、あるんですね。
今回のブログを書くにあたって参考にさせてもらったURLです。
http://www.geocities.jp/i_love_balard/myhome/ajax/javascript_vb.html
http://crimsonpork.blog7.fc2.com/blog-entry-91.html
http://www.weblio.jp/content/WebBrowser.ObjectForScripting+%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3
いや~、同じようなことを考えている方がいるもんですな。 先人に感謝します。
そんなわけで、webbrowserの.net controlについては、各人調べて勉強してください。
とりあえずは、簡単なサンプルを作成してみました。
準備
今回も、特に準備するものは、ありません。
Visual Basic 2010を使います。(たぶんvb.net2008でも大丈夫でしょう。)
vb.net上で作成した理由は、デスクトップGISとの連携や.net Frameworkでhtmlやxmlを利用したいと考えているからです。
vb.netのデザイン
まずは、vb.netを起動して、適当なプロジェクト名で新規作成します。
使用するコントロールは、Toolstrip,StatusStrip,WebBrowserの3つです。 いつもながらかんたんですな。
デザインイメージ
サンプルコード
参考にするプログラムは、超簡単なWebBrowser上にGoogleMapを表示して緯度経度を取得して、vb.netに渡すというのコードです。
短いので、一気にいきます。
コードはこんな感じです。
Imports System Imports System.Web Imports System.Xml Imports System.Security.Permissions Public Class Form1 Private Sub ToolStripButton1_Click(sender As System.Object, e As System.EventArgs) Handles ToolStripButton1.Click 'ObjectForScripting WebBrowserコントロールに表示される ' Webページ内のスクリプトコードからアクセスできるオブジェクトを ' 取得または設定します。 WebBrowser1.ObjectForScripting = New ExternalGMapObj 'クラスのインスタンスを渡す Dim lat As String = ToolStripTextBox1.Text Dim lng As String = ToolStripTextBox2.Text WebBrowser1.DocumentText = htmlDoc(lat, lng) End Sub Private Function htmlDoc(ByVal Lat As Double, ByVal Lng As Double) As String 'HTMLドキュメント GoogleMapなどjavascriptを読み込んだものでもよい。 '当然、PG外部の任意のURLをWebBrowserに表示させてもよい。 'ポイントは '「window.external.[VBのパブリックルーチン]」 'という形で、javascritから.NETアプリケーションにパラメータ・値を投げられることだと思う。 '.NETからDOMの操作はできると想像がつくが、これでその逆もできることになる。 Dim txtHtml As String = "" txtHtml = txtHtml & "<html>" & vbCrLf txtHtml = txtHtml & "<head>" & vbCrLf txtHtml = txtHtml & "<script type=""text/javascript"" src=""http://maps.google.com/maps/api/js?v=3.9&sensor=false""></script>" & vbCrLf txtHtml = txtHtml & "<script type=""text/javascript"">" & vbCrLf txtHtml = txtHtml & " var map;" & vbCrLf txtHtml = txtHtml & " function init() {" & vbCrLf txtHtml = txtHtml & " var latlng = new google.maps.LatLng(" & Lat.ToString & "," & Lng.ToString & ");" & vbCrLf txtHtml = txtHtml & " var myOptions = {" & vbCrLf txtHtml = txtHtml & " zoom: 15," & vbCrLf txtHtml = txtHtml & " center: latlng," & vbCrLf txtHtml = txtHtml & " mapTypeId: google.maps.MapTypeId.ROADMAP," & vbCrLf txtHtml = txtHtml & " overviewMapControl:true," & vbCrLf txtHtml = txtHtml & " scaleControl: true" & vbCrLf txtHtml = txtHtml & " };" & vbCrLf txtHtml = txtHtml & " map = new google.maps.Map(document.getElementById(""map_canvas""), myOptions);" & vbCrLf txtHtml = txtHtml & " google.maps.event.addListener(map, 'click', function(event) {" & vbCrLf txtHtml = txtHtml & " mouseClick(event.latLng);" & vbCrLf txtHtml = txtHtml & " });" & vbCrLf txtHtml = txtHtml & " google.maps.event.addListener(map, 'mousemove', function (event) {" txtHtml = txtHtml & " mousemove(event.latLng);" & vbCrLf txtHtml = txtHtml & " });" & vbCrLf txtHtml = txtHtml & " }" & vbCrLf 'mouse clieck event実装 txtHtml = txtHtml & " function mouseClick(location) {" & vbCrLf txtHtml = txtHtml & " window.external.MouseClick(location.lat(), location.lng());" txtHtml = txtHtml & " }" & vbCrLf 'mouse move evet実装 txtHtml = txtHtml & " function mousemove(location) {" & vbCrLf txtHtml = txtHtml & " window.external.MouseMove(location.lat(), location.lng());" txtHtml = txtHtml & " }" & vbCrLf txtHtml = txtHtml & "</script>" & vbCrLf txtHtml = txtHtml & "</head>" & vbCrLf txtHtml = txtHtml & "<body onload=""init();"">" & vbCrLf txtHtml = txtHtml & " <div id=""map_canvas"" style=""width:100%; height:100%""></div>" & vbCrLf txtHtml = txtHtml & "</body>" & vbCrLf txtHtml = txtHtml & "</html>" & vbCrLf htmlDoc = txtHtml End Function End Class 'PermissionSet 複数の異なる種類のアクセス許可を格納できるコレクションを表します。by MSDN 'SecurityAction.Demand コールスタック内の上位にあるすべての呼び出し元に、 ' 現在のインスタンスによって指定されているアクセス許可が与えられていない場合は、 ' 実行時に強制的にSecurityExceptionを呼び出します。by MSDN 'Name:="FullTrust" システムへのフルアクセス ' 参考http://www.atmarkit.co.jp/fdotnet/technology/idnfw11_08/idnfw11_08_02.html ' ちなみにこれを書かなくても動く。MSのサンプルにはついている。 'ComVisibleAttribute 個々のマネージ型またはマネージメンバ、 ' またはアセンブリ内のすべての型のCOM参照可能範囲を制御します。by MSDN ' これは、マネージ型がCOMから参照できることを示します。 by MSDN <PermissionSet(SecurityAction.Demand, Name:="FullTrust")> _ <System.Runtime.InteropServices.ComVisibleAttribute(True)> _ Public Class ExternalGMapObj Public Sub MouseClick(ByVal lat As Double, ByVal lng As Double) MsgBox("Googlemap" & vbCrLf & _ "緯度:" & Format(lat, "###.######").ToString & vbCrLf & _ "経度:" & Format(lng, "###.######").ToString, MsgBoxStyle.OkOnly, _ "Googlemapから取得") 'Form1.ToolStripStatusLabel2.Text = Format(lat, "###.######").ToString 'Form1.ToolStripStatusLabel4.Text = Format(lng, "###.######").ToString End Sub Public Sub MouseMove(ByVal lat As Double, ByVal lng As Double) 'MsgBox("Googlemap" & vbCrLf & _ ' "緯度:" & lat.ToString & vbCrLf & _ ' "経度:" & lng.ToString, MsgBoxStyle.OkOnly, "Javascriptから取得") Form1.ToolStripStatusLabel2.Text = Format(lat, "###.######").ToString Form1.ToolStripStatusLabel4.Text = Format(lng, "###.######").ToString End Sub End Class
プログラムの説明
プログラムとしては、
-
javascriptから呼び出すExternalGMapObjクラスを作成して、その中でMouseClickとMouseMove subroutineを作成しておきます。
-
「window.external.[VBのパブリックルーチン]」で.NETのpublic subroutineを呼び出します。
簡単にjavascriptの値を.NETに渡すことができました。これができるとjavascriptの値を用いて、.NET側でいろいろと処理することができますね。
プログラムの実行
それでは、実行してみましょう。
javascriptをクリックすると地図が表示されます。
Googlemap上でmouse moveすると、Stastubarの緯度経度が変化します。
mouse moveしている状態
Googlemap上でmouse clickすると、msgboxが表示され、クリックした場所の緯度経度がmsgboxに表示されます。
mouse clickしてmsgboxが表示された状態
次回は、.NETの値をjavascriptへ渡して処理する方法を考えてみましょう。
それでは、今日はここまで。
サンプルコードをこちらにアップしておきます。使用する際は自己責任にて使って下さい。
参考にしたHP
先人に感謝します。
http://www.geocities.jp/i_love_balard/myhome/ajax/javascript_vb.html
http://crimsonpork.blog7.fc2.com/blog-entry-91.html
http://www.weblio.jp/content/WebBrowser.ObjectForScripting+%E3%83%97%E3%83%AD%E3%83%91%E3%83%86%E3%82%A3
最近のコメント