Qt 5.9.0 的 Q
WebEngineView 控件是基于 Chromium 内核的
Web 浏览器控件，其默认情况下不支持
触摸屏拖动地图。如果您需要在 Q
WebEngineView 控件
中加载地图并支持
触屏拖动，可以考虑使用 JavaScript 和 HTML5 技术来实现。
具体实现方式如下：
1. 在 HTML5
中使用 Google Maps API 加载地图，并启用
触摸屏拖动功能。
```html
<!DOCTYPE html>
<html>
<head>
<meta name="
viewport" content="initial-scale=1.0, user-scalable=no">
<meta charset="utf-8">
<title>Google Maps JavaScript API v3 Example: Map Simple</title>
<style>
html, body, #map_canvas {
margin: 0;
padding: 0;
height: 100%;
}
</style>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=false"></script>
<script>
var map;
function initialize() {
var mapOptions = {
zoom: 8,
center: new google.maps.LatLng(-34.397, 150.644),
mapTypeId: google.maps.MapTypeId.ROADMAP
};
map = new google.maps.Map(document.getElementById('map_canvas'),
mapOptions);
map.setOptions({draggable: true, zoomControl: true, scrollwheel: true, disableDoubleClickZoom: false});
}
google.maps.event.addDomListener(window, 'load', initialize);
</script>
</head>
<body>
<div id="map_canvas"></div>
</body>
</html>
```
2. 在
Qt 的代码
中，使用 Q
WebChannel 将 JavaScript 对象暴露给
Qt 代码，并在 Q
WebEngineView 的 loadFinished 信号触发后，通过 Q
WebChannel 的 call 方法调用 JavaScript 对象的方法来启用
触摸屏拖动功能。
```cpp
#include <Q
WebChannel>
#include <Q
WebEngineView>
int main(int argc, char *argv[])
{
QApplication app(argc, argv);
Q
WebEngineView view;
view.load(QUrl("file:///path/to/your/html/file"));
// Create a Q
WebChannel object and expose a QObject to JavaScript
Q
WebChannel channel;
QObject *obj = new QObject();
channel.registerObject("
qtObj", obj);
view.page()->set
WebChannel(&channel);
// When the page is loaded, call the JavaScript function to enable touch drag
QObject::connect(&
view, &Q
WebEngineView::loadFinished, [&]() {
view.page()->runJavaScript("
qtObj.enableTouchDrag();");
});
view.show();
return app.exec();
}
```
在 JavaScript
中，可以定义一个名为
qtObj 的对象，并在该对象
中定义一个名为 enableTouchDrag 的方法来启用
触摸屏拖动功能。
```javascript
var
qtObj = {
enableTouchDrag: function() {
var mapDiv = document.getElementById("map_canvas");
mapDiv.addEventListener("touchstart", function(e) {
if (e.touches.length == 1) {
var touch = e.touches[0];
var mouseEvent = new MouseEvent("mousedown", {
clientX: touch.clientX,
clientY: touch.clientY
});
mapDiv.dispatchEvent(mouseEvent);
}
}, false);
mapDiv.addEventListener("touchmove", function(e) {
if (e.touches.length == 1) {
e.preventDefault();
var touch = e.touches[0];
var mouseEvent = new MouseEvent("mousemove", {
clientX: touch.clientX,
clientY: touch.clientY
});
mapDiv.dispatchEvent(mouseEvent);
}
}, false);
mapDiv.addEventListener("touchend", function(e) {
if (e.touches.length == 0) {
var mouseEvent = new MouseEvent("mouseup", {});
mapDiv.dispatchEvent(mouseEvent);
}
}, false);
}
};
```
这样就可以在 Q
WebEngineView 控件
中加载地图并支持
触屏拖动了。
订阅专栏 解锁全文
扫一扫
2万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
