Question

我已经实施了一个具有地理位置功能和Button的网站。

此网页在QwebEngineView（OSM Map）中也能正常显示。网页已加载

def __init__(self, parent=None):
        super(MainGUI, self).__init__(parent)
        self.ui = uic.loadUi("GPS.ui", self)
        self.ui.w3View.load(QtCore.QUrl('file:///Map.html'))

所有原生OpenLayers按钮（放大和缩小）都正常工作。

我创建了一个新的自定义按钮，用于在OpenLayers Map上显示我的地理位置。

这是我用来对我进行地理定位的功能：

var handleGeolocation = function() {

      var coordinates;
      var geolocation = new ol.Geolocation({
        projection: view.getProjection(),
        tracking: true
      });
      // handle geolocation error.
      geolocation.on('error', function (error) {
        var info = document.getElementById('info');
        info.innerHTML = error.message;
        info.style.display = '';
      });

      var accuracyFeature = new ol.Feature();
      geolocation.on('change:accuracyGeometry', function () {
        accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
      });

      var positionFeature = new ol.Feature();
      positionFeature.setStyle(new ol.style.Style({
        image: new ol.style.Circle({
          radius: 6,
          fill: new ol.style.Fill({
            color: '#3399CC'
          }),
          stroke: new ol.style.Stroke({
            color: '#fff',
            width: 2
          })
        })
      }));

      geolocation.once('change:position', function () {
        coordinates = geolocation.getPosition();
        positionFeature.setGeometry(coordinates ?
          new ol.geom.Point(coordinates) : null);
        map.getView().setCenter(coordinates);
        map.getView().setZoom(17);
      });

      new ol.layer.Vector({
        map: map,
        source: new ol.source.Vector({
          features: [accuracyFeature, positionFeature]
        })
      });
    }

我在here的帮助下创建了按钮。

整个网页看起来像这样：

<!DOCTYPE html>
<html>
  <head>
    <title>Accessible Map</title>
    <link rel="stylesheet" href="https://openlayers.org/en/v4.2.0/css/ol.css" type="text/css">
    <!-- The line below is only needed for old environments like Internet Explorer and Android 4.x -->
    <script src="https://cdn.polyfill.io/v2/polyfill.min.js?features=requestAnimationFrame,Element.prototype.classList,URL"></script>
    <script src="https://openlayers.org/en/v4.2.0/build/ol-debug.js"></script>
   <style>
      a.skiplink {
        position: absolute;
        clip: rect(1px, 1px, 1px, 1px);
        padding: 0;
        border: 0;
        height: 1px;
        width: 1px;
        overflow: hidden;
      }
      a.skiplink:focus {
        clip: auto;
        height: auto;
        width: auto;
        background-color: #fff;
        padding: 0.3em;
      }
      #map:focus {
        outline: #4A74A8 solid 0.15em;
      }
      map{
          max-width: 760 px;
          max-height: 50 px;
      }

      .geoButton {
        top: 80px;
        left: .5em;
      }
    </style>
  </head>
  <body>
    <div id="map" class="map" tabindex="0"></div>
    <script>
      window.app = {};
      var app = window.app;


      view = new ol.View({
        center: [0, 0],
        zoom: 2
      });

      app.getLocation = function(opt_options) {
        var options = opt_options || {};

        var geoButton = document.createElement('button');
        geoButton.innerHTML = 'L';

        var handleGeolocation = function() {
          /*    var isMobile =  {
              Android: function () {
                return navigator.userAgent.match(/Android/i);
              },
              BlackBerry: function () {
                return navigator.userAgent.match(/BlackBerry/i);
              },
              iOS: function () {
                return navigator.userAgent.match(/iPhone|iPod|iPad/i);
              },
              Opera: function () {
                return navigator.userAgent.match(/Opera Mini/i);
              },
              Windows: function () {
                return navigator.userAgent.match(/IEMobile/i);
              },
              any: function () {
                return ((isMobile.Android() || isMobile.BlackBerry() || isMobile.iOS() || isMobile.Opera() || isMobile.Windows()));
              }
            };

            if (isMobile.any()){
              geolocation.setTrackingOptions(enableHighAccuracy );
            } */

          var coordinates;
          var geolocation = new ol.Geolocation({
            projection: view.getProjection(),
            tracking: true
          });
          // handle geolocation error.
          geolocation.on('error', function (error) {
            var info = document.getElementById('info');
            info.innerHTML = error.message;
            info.style.display = '';
          });

          var accuracyFeature = new ol.Feature();
          geolocation.on('change:accuracyGeometry', function () {
            accuracyFeature.setGeometry(geolocation.getAccuracyGeometry());
          });

          var positionFeature = new ol.Feature();
          positionFeature.setStyle(new ol.style.Style({
            image: new ol.style.Circle({
              radius: 6,
              fill: new ol.style.Fill({
                color: '#3399CC'
              }),
              stroke: new ol.style.Stroke({
                color: '#fff',
                width: 2
              })
            })
          }));

          geolocation.once('change:position', function () {
            coordinates = geolocation.getPosition();
            positionFeature.setGeometry(coordinates ?
              new ol.geom.Point(coordinates) : null);
            map.getView().setCenter(coordinates);
            map.getView().setZoom(17);
          });

          new ol.layer.Vector({
            map: map,
            source: new ol.source.Vector({
              features: [accuracyFeature, positionFeature]
            })
          });
        }

        geoButton.addEventListener('click', handleGeolocation, false);
        geoButton.addEventListener('touchstart', handleGeolocation, false);

        var element = document.createElement('div');
        element.className = 'ol-unselectable ol-control geoButton';
        element.appendChild(geoButton);

        ol.control.Control.call(this, {
          element: element,
          target: options.target
        });

      };

      ol.inherits(app.getLocation, ol.control.Control);
      //Standard Initialisierung


      // Geolocation function



      var map = new ol.Map({
        layers: [
          new ol.layer.Tile({
            source: new ol.source.OSM()
          })
        ],
        target: 'map',
        controls: ol.control.defaults({
          attributionOptions: /** @type {olx.control.AttributionOptions} */ ({
            collapsible: false
          })
        }).extend([new app.getLocation()]),
        view: view
      });

      //Display Input Datastream
    </script>
  </body>
</html>

在普通浏览器中，它工作正常，但不在我的PyQt应用程序中。单击自定义按钮后没有任何反应。

我做错了什么或不可能？

Answer 1

主要问题是启用权限，如果您在Firefox，Chrome等浏览器中运行，则会显示一个弹出窗口，要求您接受或不接受GeoLocation权限。

在这种情况下，必须通过代码启用它，为此QWebEnginePage每次需要授权时都会发出信号，它通过信号featurePermissionRequested执行此操作，我们将其连接到某个插槽，我们使用函数setFeaturePermission()启用权限。

    self.ui.w3View..page().featurePermissionRequested.connect(self.onFeaturePermissionRequested)

def onFeaturePermissionRequested(self, securityOrigin, feature):
    self.sender().setFeaturePermission(securityOrigin,
                                     QWebEnginePage.Geolocation,
                                     QWebEnginePage.PermissionGrantedByUser)

注意：在linux中我仍然遇到GeoClude提供程序的问题，错误信息如下：

无法设置Geoclue定位要求。 Geoclue错误： org.qtproject.QtDBus.Error.InvalidObjectPath

Answer 2

添加以下行解决了我的问题：

    self.ui.w3View.page().featurePermissionRequested.connect(self.permissionRequested)

def permissionRequested(self, frame, feature):
    self.ui.w3View.page().setFeaturePermission(frame, feature, QtWebEngineWidgets.QWebEnginePage.PermissionGrantedByUser)

在this帖子中找到并将其编辑为PyQt 5.9。

PyQt 5.9中的OpenLayers Geolocation

2 个答案: