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

【问题标题】：PyQt4 webkit - google maps markers are not loadingPyQt4 webkit - 谷歌地图标记未加载
【发布时间】：2017-11-01 16:51:36
【问题描述】：

我有一个在 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上不会出现。

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

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

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

【问题讨论】：

我建议在 cmd 中运行它并附加您看到的消息。我还建议您启用 QWebView 的调试模式，以查看它是否在加载任何包时产生任何错误。另外我建议你禁用防火墙。
调试使用以下命令：web.settings().setAttribute(QWebSettings.DeveloperExtrasEnabled, True)，然后右键单击并选择检查，然后转到控制台并观察消息。如果您转到网络选项卡，它也会很有用。
eyllanesc 我按照你的建议做了，我得到了这个错误 TypeError: 'undefined' is not a function (evalating 'this.G.bind(this)') in marker.js line 51
这意味着您没有正确访问“maps.google.com/maps/api/js?sensor=false”，请检查您的防火墙。
我禁用了防火墙，但仍然出现同样的错误

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

【解决方案1】：

聚会也迟到了，但我遇到了完全相同的问题，但wkhtmltopdf（也使用QTWeb）。 this.G.bind 错误是因为QTWeb 不支持'bind'。

这一定是最近谷歌地图强制升级时引入的，我认为我之前使用的版本是 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>

【讨论】：

我遇到了与作者类似的问题，您的解决方案确实解决了问题！谢谢）PS。我已经开始使用 PyQt5 将我的应用程序移植到 python3 以使用没有这个问题的 QWebEngine。

【解决方案2】：

对不起，如果我迟到了。我确实在谷歌地图如何运作的机制中找到了一个 tweek，您可以在其中通过 api 定义的 url 代码获得静态地图 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&zoom=16&markers=color:red%7Clabel:D%7C13.0329,77.6136&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，我确实阅读了很多关于该 webview 上 javascripts 可读性的猜测（用于标记位置）。我只能将其作为替代方案。希望这可以帮助。和平。

【讨论】：