Russian Qt Forum
Ноябрь 23, 2024, 08:21 *
Добро пожаловать, Гость. Пожалуйста, войдите или зарегистрируйтесь.
Вам не пришло письмо с кодом активации?

Войти
 
  Начало   Форум  WIKI (Вики)FAQ Помощь Поиск Войти Регистрация  

Страниц: [1]   Вниз
  Печать  
Автор Тема: Qml + JavaScript[РЕШЕНО]  (Прочитано 3817 раз)
Larry
Гость
« : Август 16, 2015, 10:30 »

Добрый день, форумчане.
Возникла очередная проблема. Есть html-файл для вывода карты Google maps:
Код:
<!DOCTYPE html>
<html>
    <head>
        <title>Asynchronous Loading</title>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no">
        <meta charset="utf-8">
        <style>
            html, body, #map-canvas
            {
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
        </style>
        <script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
        <script type="text/javascript" src="mapControl.js"></script>
    </head>
    <body>
        <div id="map-canvas"></div>
        <script>
            initMap();
        </script>
    </body>
</html>

Функция initMap определена в файле "mapControl.js" и все нормально,  т.е. инициализация проходит и карта отображается. В файле js также есть функция setMarker которая устанавливает маркер по координатам latitude и longitude. И если вызов идет из html или же из функции initMap(), то маркер устанавливается, но если вызов происходит из файла main.qml, то пишет:
Код:
RefferenceError: google is not defined

Вот mapControl.js:
Код:
var map;
//----------------
function initMap()
{
    var latlng = new google.maps.LatLng(48.145938, 33.591423);

    var mapOptions =
    {
        center: latlng,
        zoom: 18,
        mapTypeId: google.maps.MapTypeId.SATELLITE,
        panControl: true,
        zoomControl: true,
        scaleControl: true
    };

    map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}
//--------------------------
function setMarker(lat, lng)
{
    var latlng = new google.maps.LatLng(lat, lng);

    var marker = new google.maps.Marker({
        position: latlng,
        map: map
    });
}

Вот main.qml:

Код:
import QtQuick 2.4
import QtQuick.Controls 1.3
import QtWebKit 3.0
import QtQuick.Layouts 1.1
import QtLocation 5.3
import QtPositioning 5.3
import "mapControl.js" as MAP
//---------------
ApplicationWindow
{
    id: applicationWindow1
    title: qsTr("Google Map")

    width: 640
    height: 480

    visible: true

    color: "white"

    WebView
    {
        id: mapview

        anchors.bottomMargin: 150
        anchors.fill: parent

        url: "index.html"
    }

    TextInput
    {
        id: textLatitude

        width: 80
        height: 20

        text: "Широта"

        font.family: "Arial"
        horizontalAlignment: Text.AlignHCenter
        anchors.left: layoutControlPanel.left
        anchors.leftMargin: 25
        anchors.top: layoutControlPanel.top
        anchors.topMargin: 25
        font.pixelSize: 14
    }

    TextInput
    {
        id: textLongitude

        y: 419
        width: 80
        height: 20

        text: "Долгота"
        horizontalAlignment: Text.AlignHCenter
        anchors.bottom: layoutControlPanel.bottom
        anchors.bottomMargin: 25
        anchors.left: layoutControlPanel.left
        anchors.leftMargin: 25
        font.pixelSize: 12
    }

    Button
    {
        id: buttonSetMarker

        y: 410

        text: qsTr("Установить маркер")
        anchors.verticalCenterOffset: 0
        anchors.verticalCenter: textLongitude.verticalCenter
        anchors.left: textLatitude.right
        anchors.leftMargin: 25

        onClicked:
        {
            MAP.setMarker(textLatitude.text, textLongitude.text);
        }
    }
}

Подскажите пожалуйста, как можно настроить взаимодействие между html-js-qml. Спасибо.
« Последнее редактирование: Август 27, 2015, 16:39 от Larry » Записан
Отражение луны
Гость
« Ответ #1 : Август 16, 2015, 22:08 »

Qt webchannel вроде как раз для этого
http://doc.qt.io/qt-5/qtwebchannel-index.html - док
http://www.kdab.com/qt-webchannel-bridging-gap-cqml-web/ - простой понятный пример.
Записан
Larry
Гость
« Ответ #2 : Август 16, 2015, 22:23 »

Спасибо большое, попробую.
Записан
Larry
Гость
« Ответ #3 : Август 17, 2015, 20:59 »

Решил данную проблему использованием QtWebKit.experimental 1.0, сделал так:
Код:
Button
    {
        id: buttonSetMarker

        y: 410

        text: qsTr("Установить маркер")
        anchors.verticalCenterOffset: 0
        anchors.verticalCenter: textLongitude.verticalCenter
        anchors.left: textLatitude.right
        anchors.leftMargin: 25

        onClicked:
        {
            mapview.experimental.evaluateJavaScript("var latlng = new google.maps.LatLng(" + textLatitude.text  + ", " + textLongitude.text + ");

            var marker = new google.maps.Marker({
                position: latlng,
                map: map
            });");
        }
    }

Это работает, только при использовании в консоль выводится, что это фича экспериментальная и может быть изменена или даже удалена.

Цитировать
WARNING: This project is using the experimental QML API extensions for QtWebKit and is therefore tied to a specific QtWebKit release.
WARNING: The experimental API will change from version to version, or even be removed. You have been warned!
Записан
Страниц: [1]   Вверх
  Печать  
 
Перейти в:  


Страница сгенерирована за 0.124 секунд. Запросов: 21.