我试图在Qt 5.4的QML WebView中使用Google Maps。问题是,我无法使用滚轮滚动或平移地图,因为所有操作都被隐藏的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.html文件。
<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>