Использование 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

What's Coming in RAD Studio 13.2 Florence

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 ReplyCancel reply

Search

Etwas Neues

Wie exotisch ist der C++Builder 13?

Code-Formatierung mit dem MSys Delphi Formatter

Tutorial zur mobilen App Entwicklung mit FireMonkey in Delphi

Popular Posts

Wie exotisch ist der C++Builder 13?

Tutorial zur mobilen App Entwicklung mit FireMonkey in Delphi

RAD Studio 13.2 Florence ist verfügbar

Was ist eine SBOM und warum sollte sie für Entwickler von Bedeutung sein?

Informatik Aktuell: Agentische Entwicklung in RAD Studio

категории

Beliebte Beiträge

Embarcadero InterBase 2020 Update 6 Verfügbar!

Offline Installation vom .Net Framework 3.5 unter Windows 10

26 Jahre ... von Delphi

Neu in der IDE in RAD Studio 10.4.1

RAD Studio traf Delphi - Der ursprüngliche Low Code!

Latest From GetItNow

C++Builder @ stackoverflow

Delphi @ stackoverflow

InterBase @ stackoverflow

Категории

Useful Links

Follow us