Important: Please read the Qt Code of Conduct - https://forum.qt.io/topic/113070/qt-code-of-conduct

Zoom with QPinchGesture in QWebView with Google Maps



  • Hi

    I am working on an application for touch screen devices using Google Maps functionality.
    So far I have been able to insert the map using a QWebView and loading an html file containing Javascipt.
    Currently, the user can perform panning in the map using finger strokes and/or the control buttons in Google Maps. Zooming can also be performed using the control buttons integrated in the map.

    What I now want, and is struggeling with, is being able to zoom in the map using pinching with the fingers. I have researched the web, and found several methods, but I can't seem to get it working. This is the code I have now:

    mainwindow.h
    @
    #ifndef MAINWINDOW_H
    #define MAINWINDOW_H

    #include <QMainWindow>
    #include <QtWebKit/QtWebKit>
    #include <QtWebKit/QWebElement>
    #include <QtWebKitWidgets/QWebPage>
    #include <QWebFrame>
    #include <QGestureEvent>
    #include <QPinchGesture>

    namespace Ui {
    class MainWindow;
    }

    class MainWindow : public QMainWindow
    {
    Q_OBJECT

    public:
    explicit MainWindow(QWidget *parent = 0);
    ~MainWindow();

    public slots:
    void on_btnMyLocation_clicked();

    private slots:
    void linkClicked(const QUrl &url);

    protected:
    bool event(QEvent* event);

    private:
    Ui::MainWindow *ui;
    bool gestureEvent(QGestureEvent event);
    void pinchTriggered(QPinchGesture
    );
    void printLatLong();
    };

    #endif // MAINWINDOW_H
    @

    mainwindow.cpp
    @
    #include "mainwindow.h"
    #include "ui_mainwindow.h"
    #include <QString>

    MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
    {
    ui->setupUi(this);
    ui->webView->grabGesture(Qt::PinchGesture);
    ui->webView->page()->setLinkDelegationPolicy(QWebPage::DelegateAllLinks);
    ui->webView->setAttribute(Qt::WA_AcceptTouchEvents, false);
    connect( ui->webView, SIGNAL(linkClicked(const QUrl &)), this, SLOT(linkClicked(const QUrl &)), Qt::DirectConnection);
    ui->webView->load(QUrl("file:///C:/Qt/Qt5.1.0/Tools/QtCreator/bin/MapTestQt/google_maps.html"));

    // Calling method for printing Latitude and Longitude
    printLatLong();
    

    }

    MainWindow::~MainWindow()
    {
    delete ui;
    }
    bool MainWindow::event(QEvent event)
    {
    if(event->type() == QEvent::Gesture)
    {
    return gestureEvent(static_cast<QGestureEvent
    >(event));
    }
    return QWidget::event(event);
    }

    bool MainWindow::gestureEvent(QGestureEvent *event)
    {
    if(QGesture *pinch = event->gesture(Qt::PinchGesture))
    {
    pinchTriggered(static_cast<QPinchGesture *>(pinch));
    }
    return true;
    }

    void MainWindow::pinchTriggered(QPinchGesture* gesture)
    {
    QWheelEvent wheelEvent(gesture->centerPoint().toPoint(), gesture->scaleFactor() - gesture->lastScaleFactor(), Qt::NoButton, Qt::NoModifier);
    QApplication::sendEvent(this, &wheelEvent);
    }

    void MainWindow::linkClicked(const QUrl &url)
    {
    ui->webView->load(url);
    }

    void MainWindow::on_btnMyLocation_clicked()
    {
    // Calling method for printing Latitude and Longitude
    printLatLong();
    }
    void MainWindow::printLatLong(){
    // Creating QVariant variable
    QVariant lat;
    // Getting my latitude from javascript method
    lat = ui->webView->page()->mainFrame()->evaluateJavaScript("returnLatitude()");
    // Printing my latitude to label
    ui->labMyLatitude->setText(lat.toString());

    // Creating QVariant variable
    QVariant lng;
    // Getting my longitude from javascript method
    lng = ui->webView->page()->mainFrame()->evaluateJavaScript("returnLongitude()");
    // Printing my longitude to label
    ui->labMyLongitude->setText(lng.toString());
    

    }
    @

    With this code, no interaction with the map works at all using touch events (mouse works), but when I comment out line 10 in mainwindow.cpp (ui->webView->grabGesture), it works like described above.

    Also, as an aditional question: In my Javascript, navigator.geolocation returns false. Do I have to set any special permission in the QWebView?

    Thanks for any help.


Log in to reply