PyQt4 webkit - 谷歌地图标记未加载

时间:2017-11-01 16:51:37

标签: javascript python pyqt google-maps-markers qwebview

我有一个简单的例子,可以在QWebView中加载谷歌地图。 这是Python代码:

#!/usr/bin/env python

import sys
from PyQt4.QtCore import *
from PyQt4.QtGui import *
from PyQt4.QtWebKit import *
import os
app = QApplication(sys.argv)

web = QWebView()
web.settings().setAttribute(QWebSettings.JavascriptEnabled, True)
tempPath = "file:///" + os.path.join(os.getcwd(), "simple.html").replace('\\','/')
print tempPath
web.load(QUrl(tempPath))
web.show()

sys.exit(app.exec_())

这是*simple.html*

中的代码

<!DOCTYPE html>
<html> 
<head> 
  <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> 
  <title>Google Maps Multiple Markers</title> 
  <script src="http://maps.google.com/maps/api/js?sensor=false" 
          type="text/javascript"></script>
</head> 
<body>
  <div id="map" style="width: 500px; height: 400px;"></div>

  <script type="text/javascript">
    var locations = [
      ['Bondi Beach', -33.890542, 151.274856, 4],
      ['Coogee Beach', -33.923036, 151.259052, 5],
      ['Cronulla Beach', -34.028249, 151.157507, 3],
      ['Manly Beach', -33.80010128657071, 151.28747820854187, 2],
      ['Maroubra Beach', -33.950198, 151.259302, 1]
    ];

    var map = new google.maps.Map(document.getElementById('map'), {
      zoom: 10,
      center: new google.maps.LatLng(-33.92, 151.25),
      mapTypeId: google.maps.MapTypeId.ROADMAP
    });

    var infowindow = new google.maps.InfoWindow();

    var marker, i;

    for (i = 0; i < locations.length; i++) {  
      marker = new google.maps.Marker({
        position: new google.maps.LatLng(locations[i][1], locations[i][2]),
        map: map
      });

      google.maps.event.addListener(marker, 'click', (function(marker, i) {
        return function() {
          infowindow.setContent(locations[i][0]);
          infowindow.open(map, marker);
        }
      })(marker, i));
    }
  </script>
</body>
</html>

问题是标记没有在QWebView内加载,因为你可以看到它们在浏览器中加载得很好。 PS。这个问题是在Windows上,它不会发生在Linux上。 Screenshot when I run the example on windows

知道如何解决这个问题吗?

更新: 调试后,我在javascript控制台中收到此错误

TypeError: 'undefined' is not a function (evaluating 'this.G.bind(this)') in marker.js:51

2 个答案:

答案 0 :(得分:1)

派对也迟到了,但我遇到了完全相同的问题但wkhtmltopdf(也使用了QTWeb)。发生 this.G.bind 错误是因为QTWeb不支持&#39; bind&#39;

当谷歌地图最近强制进行升级时,必须引入这一点,并且我认为已退出我以前使用的版本3.29。无论如何,如果您将此polyfill添加到页面顶部,它应该解决您的问题

<script>
  // PhantomJS/QTWeb does not support bind
  Function.prototype.bind = Function.prototype.bind || function(thisp) {
    var fn = this;
    return function() {
      return fn.apply(thisp, arguments);
    };
  };
</script>

答案 1 :(得分:0)

对不起,如果我迟到了。我确实找到了一个关于谷歌地图如何运作的机制,你可以在ei定义的网址代码中获取静态地图jpg,你可以根据需要调整坐标。

注意:仅当其静态地图如显示且无其他操作

时才能使用此选项

我刚刚调整了你的代码,以便它在地图上显示带有标记的图像:

#!/usr/bin/env python
import sys
from PyQt4.QtCore import *
from PyQt4.QtGui import *
from PyQt4.QtWebKit import *
import os
import urllib
app = QApplication(sys.argv)
web = QWebView()
coordinates="13.0329,77.6136"
web.settings().setAttribute(QWebSettings.JavascriptEnabled, True)
coadder="https://maps.googleapis.com/maps/api/staticmap?   center="+coordinates+"&zoom=16&markers=color:red%7Clabel:D%7C"+coordinates+"&size=1500x400"
urllib.urlretrieve(coadder, "local-filename.jpg")
tempPath = "file:///" + os.path.join(os.getcwd(), "local-filename.jpg").replace('\\','/')
print tempPath
web.load(QUrl(tempPath))
web.show()
sys.exit(app.exec_())
  

你可以看到https://maps.googleapis.com/maps/api/staticmap? center = 13.0329,77.6136&amp; zoom = 16&amp; markers = color:red%7Clabel:D%7C13.0329,77.6136&amp; size = 1500x400

此网址来自google maps api以获取更多信息

  

https://developers.google.com/maps/documentation/maps-static/intro

如果您打算在地图上添加多个引脚,请添加

  

markers = color:red%7Clabel:D%7C13.0329,77.6136

请点击以上链接了解详情。

虽然这是非常粗暴的做法,但就PyQt4 QwebView而言,我确实阅读了很多关于javacripts在webview上的可读性的猜测(用于标记位置)。我只能把它想象成另类。 希望这可以帮助。 和平。

相关问题