пятница, 15 февраля 2013 г.

Отображение yandex maps в Qt приложении

К сожалению из текущих возможных путей я нашел вывод карт лишь с помощью QWebView. Если кто-то найдёт более эффективный способ, крайне прошу поделиться с народом :)



Для начала в файле проекта ( файл .pro) необходимо добавить поддержку webkit


QT       += webkit


На форму необходимо добавить QWebView. Путей два, либо через дизайнер формы (самый нижний элемент), либо вызывая его в конструкторе окна:


QWebView *wView = new QWebView(this);


Теперь нам необходимо загрузить во вьюху просматриваемую вэб-страницу. Текст вэб страницы:



<!DOCTYPE html>
<html>
<head>
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta charset="UTF-8">
    <style type="text/css">
      html, body, #map {
        margin: 0;
        padding: 0;
        height: 100%;
      }
    </style>
    <!--
        Подключаем API карт 2.x
        Параметры:
          - load=package.full - полная сборка;
     - lang=ru-RU - язык русский.
    -->
    <script src="http://api-maps.yandex.ru/2.0/?load=package.full&lang=ru-RU"
            type="text/javascript"></script>
    <script type="text/javascript">
        // Как только будет загружен API и готов DOM, выполняем инициализацию
        ymaps.ready(init);
var myMap;
        function init () {
            // Создание экземпляра карты и его привязка к контейнеру с
            // заданным id ("map")
            myMap = new ymaps.Map('map', {
                    // При инициализации карты, обязательно нужно указать
                    // ее центр и коэффициент масштабирования
                    center: [55.76, 37.64], // Москва
                    zoom: 10
                });
//myPlacemark = new ymaps.Placemark([55.8, 37.6]);
//myMap.geoObjects
                //.add(myPlacemark);
                //.add(myGeoObject);
        }
    </script>
</head>
<body>
<div id="map"></div>
</body>
</html>


Ну и завершающим этапом необходимо загрузить эту страницу во вьюху. В моём случае страница называется index.html и лежит в каталоге с .ехе файлом.


ui->webView->load(QUrl::fromLocalFile(qApp->applicationDirPath() + "/index.html"));


Для работы с картой мы можем вызывать любые JS методы, например:


qDebug() << ui->webView->page()->mainFrame()->evaluateJavaScript("myMap.geoObjects.add(new ymaps.Placemark([55.8, 37,6]));");


7 комментариев:

  1. А может лучше к каждой заметке прикладывать ссылку на архив с примерами.

    ОтветитьУдалить
  2. Надо ж тогда куда-то кидать всё это ))

    ОтветитьУдалить
    Ответы
    1. dropbox, или даже репозиторий завести на github.

      Удалить
    2. Вариант, постараюсь организовать в ближайшее время :)

      Удалить
  3. влюблен в QT уже второй год. К сожалению основной род деятельности не связан програмированием (хоте по диплому програмист-математик). Я по поводу карт. В свое время читал статейку про замечательную геоинформационную систему QGIS. У самого как-то руки не дошли расковирять. Может кому будет интересно.

    ОтветитьУдалить
  4. Дружище спасибо за статью!
    А как сделать тоже самое но не на виджетах, а на QML (компонент будет WebView (приложение на Android)) ?

    Что то целый день рылся в интернетах но ни чего путного не нашел...

    ОтветитьУдалить
    Ответы
    1. А ты попробуй тот же код засунуть в виджет )

      Удалить