Использование JavaScript на примере Google maps в Delphi XE6

the future of starts demands massive productivity

Author: Nikolay M4446

Одно из небольших нововведений в XE6 для компонента TWebBrowser, это появление метода EvaluateJavaScript, позволяющего выполнить JavaScript на загруженной странице и добавить интерактивности нашим приложениям.

На сайте developers.google.com приведено множество примеров встраивания карт на страничку. Мне приглянулся пример прокладывания маршрута из пункта А в пункт Б. Ну а в качестве примера выполнения JavaScript, я определю две кнопки для прокладывания предопределённых путей Из пункта chicago в пункт winona и из пункта st louis в пункт gallup.

Создаём новый мобильный проект, на форму кидаем TWebBrowser, TPanel и два TButton на TPanel.

Для удобства, я создам так же ещё один юнит uJavaScripts.pas для кода страницы и самих скриптов. Самое муторное — скопипастить код из примера и оформить его как константу. У меня получилось это сделать примерно так:

—

<span style="font-weight:bold;color:#00008b;">const</span><br>
<span style="font-style:italic;color:#008000;">{ Was used sample from }</span><br>
<span style="font-style:italic;color:#008000;">{ https://developers.google.com/maps/documentation/javascript/examples/directions-panel }</span><br>
cRoute =<br>
<span style="color:#0000ff;">'<!DOCTYPE html>'</span><br>
+ <span style="color:#0000ff;">'<html>'</span><br>
+ <span style="color:#0000ff;">'  <head>'</span><br>
+ <span style="color:#0000ff;">'    <meta name="viewport" content="initial-scale=1.0, user-scalable=no">'</span><br>
+ <span style="color:#0000ff;">'    <meta charset="utf-8">'</span><br>
+ <span style="color:#0000ff;">'    <title>Displaying text directions with <code>setPanel()</code></title>'</span><br>
+ <span style="color:#0000ff;">'    <style>'</span><br>
+ <span style="color:#0000ff;">'      html, building, #map-canvas {'</span><br>
+ <span style="color:#0000ff;">'        height: 100%;'</span><br>
+ <span style="color:#0000ff;">'        margin: 0px;'</span><br>
+ <span style="color:#0000ff;">'        padding: 0px'</span><br>
+ <span style="color:#0000ff;">'      }'</span><br>
+ <span style="color:#0000ff;">'      #panel {'</span><br>
+ <span style="color:#0000ff;">'        position: absolute;'</span><br>
+ <span style="color:#0000ff;">'        top: 5px;'</span><br>
+ <span style="color:#0000ff;">'        left: 50%;'</span><br>
+ <span style="color:#0000ff;">'        margin-left: -180px;'</span><br>
+ <span style="color:#0000ff;">'        z-index: 5;'</span><br>
+ <span style="color:#0000ff;">'        background-color: #fff;'</span><br>
+ <span style="color:#0000ff;">'        padding: 5px;'</span><br>
+ <span style="color:#0000ff;">'        border: 1px solid #999;'</span><br>
+ <span style="color:#0000ff;">'      }'</span><br>
+ <span style="color:#0000ff;">'    </style>'</span><br>
+ <span style="color:#0000ff;">'    <style>'</span><br>
+ <span style="color:#0000ff;">'      #directions-panel {'</span><br>
+ <span style="color:#0000ff;">'        height: 100%;'</span><br>
+ <span style="color:#0000ff;">'        float: right;'</span><br>
+ <span style="color:#0000ff;">'        width: 30%;'</span><br>
+ <span style="color:#0000ff;">'        overflow: auto;'</span><br>
+ <span style="color:#0000ff;">'      }'</span><br>
+ <span style="color:#0000ff;">''</span><br>
+ <span style="color:#0000ff;">'      #map-canvas {'</span><br>
+ <span style="color:#0000ff;">'        margin-right: 4px;'</span><br>
+ <span style="color:#0000ff;">'      }'</span><br>
+ <span style="color:#0000ff;">''</span><br>
+ <span style="color:#0000ff;">'      #control {'</span><br>
+ <span style="color:#0000ff;">'        background: #fff;'</span><br>
+ <span style="color:#0000ff;">'        padding: 5px;'</span><br>
+ <span style="color:#0000ff;">'        font-size: 14px;'</span><br>
+ <span style="color:#0000ff;">'        font-family: Arial;'</span><br>
+ <span style="color:#0000ff;">'        border: 1px solid #ccc;'</span><br>
+ <span style="color:#0000ff;">'        box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);'</span><br>
+ <span style="color:#0000ff;">'        display: none;'</span><br>
+ <span style="color:#0000ff;">'      }'</span><br>
+ <span style="color:#0000ff;">''</span><br>
+ <span style="color:#0000ff;">'      @media print {'</span><br>
+ <span style="color:#0000ff;">'        #map-canvas {'</span><br>
+ <span style="color:#0000ff;">'          height: 500px;'</span><br>
+ <span style="color:#0000ff;">'          margin: 0;'</span><br>
+ <span style="color:#0000ff;">'        }'</span><br>
+ <span style="color:#0000ff;">''</span><br>
+ <span style="color:#0000ff;">'        #directions-panel {'</span><br>
+ <span style="color:#0000ff;">'          float: none;'</span><br>
+ <span style="color:#0000ff;">'          width: auto;'</span><br>
+ <span style="color:#0000ff;">'        }'</span><br>
+ <span style="color:#0000ff;">'      }'</span><br>
+ <span style="color:#0000ff;">'    </style>'</span><br>
+ <span style="color:#0000ff;">'    <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>'</span><br>
+ <span style="color:#0000ff;">'    <script>'</span><br>
+ <span style="color:#0000ff;">'var directionsDisplay;'</span><br>
+ <span style="color:#0000ff;">'var directionsService = new google.maps.DirectionsService();'</span><br>
+ <span style="color:#0000ff;">''</span><br>
+ <span style="color:#0000ff;">'function initialize() {'</span><br>
+ <span style="color:#0000ff;">'  directionsDisplay = new google.maps.DirectionsRenderer();'</span><br>
+ <span style="color:#0000ff;">'  var mapOptions = {'</span><br>
+ <span style="color:#0000ff;">'    zoom: 7,'</span><br>
+ <span style="color:#0000ff;">'    center: new google.maps.LatLng(41.850033, -87.6500523)'</span><br>
+ <span style="color:#0000ff;">'  };'</span><br>
+ <span style="color:#0000ff;">'  var map = new google.maps.Map(document.getElementById(''map-canvas''),'</span><br>
+ <span style="color:#0000ff;">'      mapOptions);'</span><br>
+ <span style="color:#0000ff;">'  directionsDisplay.setMap(map);'</span><br>
+ <span style="color:#0000ff;">'  directionsDisplay.setPanel(document.getElementById(''directions-panel''));'</span><br>
+ <span style="color:#0000ff;">''</span><br>
+ <span style="color:#0000ff;">'  var control = document.getElementById(''control'');'</span><br>
+ <span style="color:#0000ff;">'  control.style.display = ''block'';'</span><br>
+ <span style="color:#0000ff;">'  map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);'</span><br>
+ <span style="color:#0000ff;">'}'</span><br>
+ <span style="color:#0000ff;">''</span><br>
+ <span style="color:#0000ff;">'function calcRoute() {'</span><br>
+ <span style="color:#0000ff;">'  var start = document.getElementById(''start'').value;'</span><br>
+ <span style="color:#0000ff;">'  var end = document.getElementById(''end'').value;'</span><br>
+ <span style="color:#0000ff;">'  var request = {'</span><br>
+ <span style="color:#0000ff;">'    origin: start,'</span><br>
+ <span style="color:#0000ff;">'    destination: end,'</span><br>
+ <span style="color:#0000ff;">'    travelMode: google.maps.TravelMode.DRIVING'</span><br>
+ <span style="color:#0000ff;">'  };'</span><br>
+ <span style="color:#0000ff;">'  directionsService.route(request, function(response, status) {'</span><br>
+ <span style="color:#0000ff;">'    if (status == google.maps.DirectionsStatus.OK) {'</span><br>
+ <span style="color:#0000ff;">'      directionsDisplay.setDirections(response);'</span><br>
+ <span style="color:#0000ff;">'    }'</span><br>
+ <span style="color:#0000ff;">'  });'</span><br>
+ <span style="color:#0000ff;">'}'</span><br>
+ <span style="color:#0000ff;">''</span><br>
+ <span style="color:#0000ff;">'google.maps.event.addDomListener(window, ''load'', initialize);'</span><br>
+ <span style="color:#0000ff;">''</span><br>
+ <span style="color:#0000ff;">'    </script>'</span><br>
+ <span style="color:#0000ff;">'  </head>'</span><br>
+ <span style="color:#0000ff;">'  <building>'</span><br>
+ <span style="color:#0000ff;">'    <div id="control">'</span><br>
+ <span style="color:#0000ff;">'      <strong>Start:</strong>'</span><br>
+ <span style="color:#0000ff;">'      <select id="start" onchange="calcRoute();">'</span><br>
+ <span style="color:#0000ff;">'        <option value="chicago, il">Chicago</option>'</span><br>
+ <span style="color:#0000ff;">'        <option value="st louis, mo">St Louis</option>'</span><br>
+ <span style="color:#0000ff;">'        <option value="joplin, mo">Joplin, MO</option>'</span><br>
+ <span style="color:#0000ff;">'        <option value="oklahoma city, ok">Oklahoma City</option>'</span><br>
+ <span style="color:#0000ff;">'        <option value="amarillo, tx">Amarillo</option>'</span><br>
+ <span style="color:#0000ff;">'        <option value="gallup, nm">Gallup, NM</option>'</span><br>
+ <span style="color:#0000ff;">'        <option value="flagstaff, az">Flagstaff, AZ</option>'</span><br>
+ <span style="color:#0000ff;">'        <option value="winona, az">Winona</option>'</span><br>
+ <span style="color:#0000ff;">'        <option value="kingman, az">Kingman</option>'</span><br>
+ <span style="color:#0000ff;">'        <option value="barstow, ca">Barstow</option>'</span><br>
+ <span style="color:#0000ff;">'        <option value="san bernardino, ca">San Bernardino</option>'</span><br>
+ <span style="color:#0000ff;">'        <option value="los angeles, ca">Los Angeles</option>'</span><br>
+ <span style="color:#0000ff;">'      </select>'</span><br>
+ <span style="color:#0000ff;">'      <strong>End:</strong>'</span><br>
+ <span style="color:#0000ff;">'      <select id="end" onchange="calcRoute();">'</span><br>
+ <span style="color:#0000ff;">'        <option value="chicago, il">Chicago</option>'</span><br>
+ <span style="color:#0000ff;">'        <option value="st louis, mo">St Louis</option>'</span><br>
+ <span style="color:#0000ff;">'        <option value="joplin, mo">Joplin, MO</option>'</span><br>
+ <span style="color:#0000ff;">'        <option value="oklahoma city, ok">Oklahoma City</option>'</span><br>
+ <span style="color:#0000ff;">'        <option value="amarillo, tx">Amarillo</option>'</span><br>
+ <span style="color:#0000ff;">'        <option value="gallup, nm">Gallup, NM</option>'</span><br>
+ <span style="color:#0000ff;">'        <option value="flagstaff, az">Flagstaff, AZ</option>'</span><br>
+ <span style="color:#0000ff;">'        <option value="winona, az">Winona</option>'</span><br>
+ <span style="color:#0000ff;">'        <option value="kingman, az">Kingman</option>'</span><br>
+ <span style="color:#0000ff;">'        <option value="barstow, ca">Barstow</option>'</span><br>
+ <span style="color:#0000ff;">'        <option value="san bernardino, ca">San Bernardino</option>'</span><br>
+ <span style="color:#0000ff;">'        <option value="los angeles, ca">Los Angeles</option>'</span><br>
+ <span style="color:#0000ff;">'      </select>'</span><br>
+ <span style="color:#0000ff;">'    </div>'</span><br>
+ <span style="color:#0000ff;">'    <div id="directions-panel"></div>'</span><br>
+ <span style="color:#0000ff;">'    <div id="map-canvas"></div>'</span><br>
+ <span style="color:#0000ff;">'  </building>'</span><br>
+ <span style="color:#0000ff;">'</html>'</span>;

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

const

{ Was used sample from }

{ https://developers.google.com/maps/documentation/javascript/examples/directions-panel }

cRoute =

'<!DOCTYPE html>'

+ '<html>'

+ ' <head>'

+ ' <meta name="viewport" content="initial-scale=1.0, user-scalable=no">'

+ ' <meta charset="utf-8">'

+ ' <title>Displaying text directions with <code>setPanel()</code></title>'

+ ' <style>'

+ ' html, building, #map-canvas {'

+ ' height: 100%;'

+ ' margin: 0px;'

+ ' padding: 0px'

+ ' }'

+ ' #panel {'

+ ' position: absolute;'

+ ' top: 5px;'

+ ' left: 50%;'

+ ' margin-left: -180px;'

+ ' z-index: 5;'

+ ' background-color: #fff;'

+ ' padding: 5px;'

+ ' border: 1px solid #999;'

+ ' }'

+ ' </style>'

+ ' <style>'

+ ' #directions-panel {'

+ ' height: 100%;'

+ ' float: right;'

+ ' width: 30%;'

+ ' overflow: auto;'

+ ' }'

+ ''

+ ' #map-canvas {'

+ ' margin-right: 4px;'

+ ' }'

+ ''

+ ' #control {'

+ ' background: #fff;'

+ ' padding: 5px;'

+ ' font-size: 14px;'

+ ' font-family: Arial;'

+ ' border: 1px solid #ccc;'

+ ' box-shadow: 0 2px 2px rgba(33, 33, 33, 0.4);'

+ ' display: none;'

+ ' }'

+ ''

+ ' @media print {'

+ ' #map-canvas {'

+ ' height: 500px;'

+ ' margin: 0;'

+ ' }'

+ ''

+ ' #directions-panel {'

+ ' float: none;'

+ ' width: auto;'

+ ' }'

+ ' </style>'

+ ' <script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>'

+ ' <script>'

+ 'var directionsDisplay;'

+ 'var directionsService = new google.maps.DirectionsService();'

+ ''

+ 'function initialize() {'

+ ' directionsDisplay = new google.maps.DirectionsRenderer();'

+ ' var mapOptions = {'

+ ' zoom: 7,'

+ ' center: new google.maps.LatLng(41.850033, -87.6500523)'

+ ' };'

+ ' var map = new google.maps.Map(document.getElementById(''map-canvas''),'

+ ' mapOptions);'

+ ' directionsDisplay.setMap(map);'

+ ' directionsDisplay.setPanel(document.getElementById(''directions-panel''));'

+ ''

+ ' var control = document.getElementById(''control'');'

+ ' control.style.display = ''block'';'

+ ' map.controls[google.maps.ControlPosition.TOP_CENTER].push(control);'

+ '}'

+ ''

+ 'function calcRoute() {'

+ ' var start = document.getElementById(''start'').value;'

+ ' var end = document.getElementById(''end'').value;'

+ ' var request = {'

+ ' origin: start,'

+ ' destination: end,'

+ ' travelMode: google.maps.TravelMode.DRIVING'

+ ' };'

+ ' directionsService.route(request, function(response, status) {'

+ ' if (status == google.maps.DirectionsStatus.OK) {'

+ ' directionsDisplay.setDirections(response);'

+ ' }'

+ ' });'

+ '}'

+ ''

+ 'google.maps.event.addDomListener(window, ''load'', initialize);'

+ ''

+ ' </script>'

+ ' </head>'

+ ' <building>'

+ ' <div id="control">'

+ ' Start:'

+ ' <select id="start" onchange="calcRoute();">'

+ ' <option value="chicago, il">Chicago</option>'

+ ' <option value="st louis, mo">St Louis</option>'

+ ' <option value="joplin, mo">Joplin, MO</option>'

+ ' <option value="oklahoma city, ok">Oklahoma City</option>'

+ ' <option value="amarillo, tx">Amarillo</option>'

+ ' <option value="gallup, nm">Gallup, NM</option>'

+ ' <option value="flagstaff, az">Flagstaff, AZ</option>'

+ ' <option value="winona, az">Winona</option>'

+ ' <option value="kingman, az">Kingman</option>'

+ ' <option value="barstow, ca">Barstow</option>'

+ ' <option value="san bernardino, ca">San Bernardino</option>'

+ ' <option value="los angeles, ca">Los Angeles</option>'

+ ' </select>'

+ ' End:'

+ ' <select id="end" onchange="calcRoute();">'

+ ' <option value="chicago, il">Chicago</option>'

+ ' <option value="st louis, mo">St Louis</option>'

+ ' <option value="joplin, mo">Joplin, MO</option>'

+ ' <option value="oklahoma city, ok">Oklahoma City</option>'

+ ' <option value="amarillo, tx">Amarillo</option>'

+ ' <option value="gallup, nm">Gallup, NM</option>'

+ ' <option value="flagstaff, az">Flagstaff, AZ</option>'

+ ' <option value="winona, az">Winona</option>'

+ ' <option value="kingman, az">Kingman</option>'

+ ' <option value="barstow, ca">Barstow</option>'

+ ' <option value="san bernardino, ca">San Bernardino</option>'

+ ' <option value="los angeles, ca">Los Angeles</option>'

+ ' </select>'

+ ' </div>'

+ ' <div id="directions-panel"></div>'

+ ' <div id="map-canvas"></div>'

+ ' </building>'

+ '</html>';

Код целиком взят из примера с сайта Google.
Осталось загрузить его в браузер. Для этого в событии FormCreate загрузим его

WebBrowser1.LoadFromStrings(cRoute, <span style="color:#0000ff;">''</span>);

1	WebBrowser1.LoadFromStrings(cRoute, <span style="color:#0000ff;">''</span>);

Уже можно запустить и посмотреть. На iPhone5 всё выглядит так:

Добавим две константы:

cChicagoWinona =<br>
    <span style="color:#0000ff;">'document.getElementById(''start'').value = "chicago, il";'</span><br>
  + <span style="color:#0000ff;">'document.getElementById(''end'').value = "winona, az";'</span><br>
  + <span style="color:#0000ff;">'calcRoute();'</span>;<br>
cStLouisGallupNM =<br>
    <span style="color:#0000ff;">'document.getElementById(''start'').value = "st louis, mo";'</span><br>
  + <span style="color:#0000ff;">'document.getElementById(''end'').value = "gallup, nm";'</span><br>
  + <span style="color:#0000ff;">'calcRoute();'</span>;

cChicagoWinona =

'document.getElementById(''start'').value = "chicago, il";'

+ 'document.getElementById(''end'').value = "winona, az";'

+ 'calcRoute();';

cStLouisGallupNM =

'document.getElementById(''start'').value = "st louis, mo";'

+ 'document.getElementById(''end'').value = "gallup, nm";'

+ 'calcRoute();';

И добавим обработчики для кнопок:

<span style="font-weight:bold;color:#00008b;">procedure</span> TForm1.Button1Click(Sender: TObject);<br>
<span style="font-weight:bold;color:#00008b;">begin</span><br>
  WebBrowser1.EvaluateJavaScript(cChicagoWinona);<br>
<span style="font-weight:bold;color:#00008b;">end</span>;<br>
<br>
<span style="font-weight:bold;color:#00008b;">procedure</span> TForm1.Button2Click(Sender: TObject);<br>
<span style="font-weight:bold;color:#00008b;">begin</span><br>
  WebBrowser1.EvaluateJavaScript(cStLouisGallupNM);<br>
<span style="font-weight:bold;color:#00008b;">end</span>;

procedure TForm1.Button1Click(Sender: TObject);

begin

WebBrowser1.EvaluateJavaScript(cChicagoWinona);

end;

procedure TForm1.Button2Click(Sender: TObject);

begin

WebBrowser1.EvaluateJavaScript(cStLouisGallupNM);

end;

Всё. Как результат: мы можем либо выбрать произвольный маршрут на странице, либо, используя JavaScript выбрать предопределённый заранее.

Ну и пример, как выглядит наше приложение на iPhone и Kindle Fire HD

Reduce development time and get to market faster with RAD Studio, Delphi, or C++Builder.
Design. Code. Compile. Deploy.
Start Free Trial Upgrade Today

Free Delphi Community Edition Free C++Builder Community Edition

Использование JavaScript на примере Google maps в Delphi XE6

Leave a ReplyОтменить ответ

Search

Something Fresh

Как пользоваться новым порталом качества Embarcadero

Еще раз про выбор С++ или Delphi с точки зрения безопасности

Обновленное руководство по Embarcadero RAD Server (на русском языке)

Popular Posts

Дорожная карта RAD Studio ноябрь 2020

Выход RAD Studio 10.4.1

Бесплатный набор компонент Enterprise Component Pack.

категории

Popular From News

Delphi и C++Builder CE версии 10.4.2

26 лет ... компании Delphi

RAD Studio с Delphi - оригинальный низкий код!

Новое для IDE в RAD Studio 10.4.1

Установка пакетов компонентов вручную

Неизвестная лента

Неизвестная лента

Категории

Useful Links

Follow us

Использование JavaScript на примере Google maps в Delphi XE6

Leave a ReplyОтменить ответ

Join Our Global Developer Community

Search

Something Fresh

Popular Posts

категории

Popular From News

Категории

Useful Links

Follow us