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

Posted by on in Blogs

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

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



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

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

-

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, body, #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>'
+ ' <body>'
+ ' <div id="control">'
+ ' <strong>Start:</strong>'
+ ' <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>'
+ ' <strong>End:</strong>'
+ ' <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>'
+ ' </body>'
+ '</html>';



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

WebBrowser1.LoadFromStrings(cRoute, '');


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

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();';


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

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
Картинка с другого сайта.



Comments

Check out more tips and tricks in this development video: