Delphi XE6のFireMonkeyモバイルアプリケーションでTWebBrowserのHTMLページにJavaScriptを実行する(2)

前回のエントリー「Delphi XE6のFireMonkeyモバイルアプリケーションでTWebBrowserのHTMLページにJavaScriptを実行する」の続きです。

TWebBrowserのEvaluateJavaScriptメソッドは、定義されているJavaScriptに引数を与えて実行することができます。

作成するサンプルのアプリケーションでは、ボタンを押すとGoogleマップにマーカーを追加します。

フォームにTButtonとTWebBrowserを配置します。

00

フォームのOnCreateイベントを追加します。
起動時にTWebBrowserにGoogleマップを表示します。

procedure TForm1.FormCreate(Sender: TObject);
const
  HTML =
    '<!DOCTYPE html>' +
    '<html lang="ja">' +
    '<head>' +
    '<meta charset="UTF-8">' +
    '<meta name="viewport" content="initial-scale=1.0, user-scalable=no">' +
    '<style>' +
    'html, body, #map_canvas { width: 100%; height: 100%; }' +
    '</style>' +
    '<script src="http://maps.google.com/maps/api/js?sensor=true"></script>' +
    '<script>' +
    'var map;' +
    'function initialize() {' +
    '  var latlng = new google.maps.LatLng(34.693738, 135.502165);' +
    '  var myOptions = {' +
    '    zoom: 11,' +
    '    center: latlng,' +
    '    mapTypeId: google.maps.MapTypeId.ROADMAP' +
    '  };' +
    '  map = new google.maps.Map(document.getElementById("map_canvas"), myOptions);' +
    '}' +
    'function AddMaker(name, lat, lng) {' +
    '  var marker = new google.maps.Marker({' +
    '    position: new google.maps.LatLng(lat, lng),' +
    '    map: map,' +
    '    title: name' +
    '  });' +
    '  var infowindow = new google.maps.InfoWindow({' +
    '    content: name' +
    '  });' +
    '  google.maps.event.addListener(marker, "click", function() {' +
    '    infowindow.open(map,marker);' +
    '  });' +
    '}' +
    '</script>' +
    '</head>' +
    '<body onload="initialize();">' +
    '<div id="map_canvas"></div>' +
    '</body>' +
    '</html>';
begin
  WebBrowser1.LoadFromStrings(HTML, '');
end;

表示しているHTMLには使用されていないJavaScriptの関数「AddMaker」があります。
このAddMaker関数をDelphiから実行します。

ボタンのOnClickイベントを追加します。

procedure TForm1.Button1Click(Sender: TObject);
begin
  WebBrowser1.EvaluateJavaScript('AddMaker("ユニバーサルスタジオジャパン", 34.665442, 135.432338)');
  WebBrowser1.EvaluateJavaScript('AddMaker("通天閣", 34.652499, 135.506306)');
  WebBrowser1.EvaluateJavaScript('AddMaker("海遊館", 34.654518, 135.428965)');
  WebBrowser1.EvaluateJavaScript('AddMaker("大阪城", 34.687315, 135.526201)');
  WebBrowser1.EvaluateJavaScript('AddMaker("道頓堀", 34.668549, 135.502716)');
end;

アプリケーションを実行します。

01

ボタンを押します。

02

マーカーが追加されました。

マーカーをクリックすると、情報ウィンドウが表示されます。

Screenshot_2014-06-28-19-54-27

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です