Question

我正在尝试在Qt 5.4上的QML WebView中使用谷歌地图。问题是我无法使用滚轮滚动或平移地图，因为所有内容都被隐藏的Flickable对象捕获。

加载其他网站的同样问题。我该如何缩放内容？我如何平移地图？

这是我的qml：

import QtQuick 2.3
import QtQuick.Window 2.2
import QtWebKit 3.0
import QtWebKit.experimental 1.0
import QtQuick.Controls 1.2

Window {
id: mainWindow
visible: true
width: 360
height: 360

Rectangle{
    id: mainRect

    anchors.fill: parent

    WebView {
            id: webview

            url: "file:///C:/Qt/Tools/QtCreator/bin/testwebview/index.html"
            anchors.top: parent.top
            anchors.left: parent.left
            anchors.right: parent.right

            height: parent.height-50

            interactive: false
            focus: true

            contentWidth: webview.width
            contentHeight: webview.height

            experimental.preferences.javascriptEnabled: true


        }
    Button{
        id: btn

        anchors.top: webview.bottom
        anchors.left:parent.left
        anchors.right: parent.right
        anchors.bottom: parent.bottom

        text: "Push"

        height: 50

        onClicked: {
            webview.experimental.evaluateJavaScript("var myLatlng = new            google.maps.LatLng(-25.363882,131.044922);
        var marker = new google.maps.Marker({
      position: myLatlng,
      map: map,
      title: 'Hello World!'
  });");
        }

    }
}


}

这是我的index.hml

<html>
  <head>
    <title>Simple Map</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 src="https://maps.googleapis.com/maps/api/js?v=3.exp"></script>
    <script>
var map;
function initialize() {
  var mapOptions = {
    zoom: 8,
    center: new google.maps.LatLng(-34.397, 150.644)
  };
  var myLatlng = new google.maps.LatLng(-25.363882,131.044922);
  map = new google.maps.Map(document.getElementById('map-canvas'),
      mapOptions);

function setMarker(){
    var marker = new google.maps.Marker({
          position: myLatlng,
          map: map,
          title: 'Hello World!'
      });
    };
}

google.maps.event.addDomListener(window, 'load', initialize);

    </script>
  </head>
  <body>
    <div id="map-canvas"></div>
  </body>
</html>

非常感谢

Answer 1

不确定它是否相关但在Qt Web浏览器上有一个设置只能放大文本。也许尝试改变它，看看是否禁止非文本内容放大？

在Qt Internet Browser.ini文件中：

[websettings]
zoom_text_only=true

QtWebKit 3.0和WebView缩放和平移内容

1 个答案: