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

by Apr 17, 2014

Одно из небольших нововведений в 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, 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">'

+ '      <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>'

+ '  </building>'

+ '</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