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

добавлено: 17 апр 14
понравилось:0
просмотров: 2680
комментов: 0

теги:

Автор: PeaK

Одно из небольших нововведений в 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
Картинка с другого сайта.

Комментарии




Необходимо войти на сайт, чтобы оставлять комментарии