Python + Google Map JavaScript API：this.D.bind 将标记添加到地图时出错答案

【问题标题】：Python + Google Map JavaScript API: this.D.bind Error adding Marker to MapPython + Google Map JavaScript API：this.D.bind 将标记添加到地图时出错
【发布时间】：2018-03-01 13:50:11
【问题描述】：

我需要你的帮助。从 Python IDLE 控制台执行这段代码，我有一个错误：

"TypeError: 'undefined' is not a function (evaluating 'this.D.bind(this)')"

并且标记在地图上不可见。

我在浏览器中执行 html 代码并且没有错误。地图和标记都很完美。

发现错误在marker.js文件中：http://maps.google.com/maps-api-v3/api/js/32/2/intl/es_419/marker.js

# -*- coding: utf-8 -*-
import sys

from PyQt4.QtCore import *
from PyQt4.QtGui import *
from PyQt4.QtWebKit import *
html= \
"""
<!DOCTYPE html>
<html>
  <head>
    <title>Simple Map</title>
    <meta name="viewport" content="initial-scale=1.0">
    <meta charset="utf-8">
    <style>
      /* Always set the map height explicitly to define the size of the div
       * element that contains the map. */
      #map {
        height: 100%;
      }
      /* Optional: Makes the sample page fill the window. */
      html, body {
        height: 100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <div id="map"></div>
    <script>
      var map;
      function initMap() {
        map = new google.maps.Map(document.getElementById('map'), {
          center: {lat: -34.397, lng: 150.644},
          zoom: 8
        });
      }
    </script>
    <script src="https://maps.googleapis.com/maps/api/js?key=AIzaSyDfBy5lpFyQzq7pRpKEBeg7jaXH5hnHul8&callback=initMap"
    async defer></script>
  </body>
</html>
"""   
class Window(QWidget):
    def __init__(self):
        super(Window, self).__init__()
        self.view = QWebView(self)

        self.setupInspector()

        self.splitter = QSplitter(self)
        self.splitter.setOrientation(Qt.Vertical)

        layout = QVBoxLayout(self)
        layout.setMargin(0)
        layout.addWidget(self.splitter)

        self.splitter.addWidget(self.view)
        self.splitter.addWidget(self.webInspector)

    def setupInspector(self):
        page = self.view.page()
        page.settings().setAttribute(QWebSettings.DeveloperExtrasEnabled, True)
        self.webInspector = QWebInspector(self)
        self.webInspector.setPage(page)

        shortcut = QShortcut(self)
        shortcut.setKey(Qt.Key_F12)
        shortcut.activated.connect(self.toggleInspector)
        self.webInspector.setVisible(False)

    def toggleInspector(self):
        self.webInspector.setVisible(not self.webInspector.isVisible())

def main():
    app = QApplication(sys.argv)
    window = Window()
    window.show()
    window.view.setHtml(html)
    app.exec_()

if __name__ == "__main__":
    main()

【问题讨论】：

标签： python google-maps marker

【解决方案1】：

我了解您的应用程序正在使用来自 PyQt4 的 Web 浏览器控件。您在 3.32 版的 Google Maps JavaScript API 中遇到了该问题，建议使用 marker.js 文件的路径。

3.32 版目前是 Maps JavaScript API 的实验版本，于 2018 年 2 月 13 日推出。请注意，Google 团队正在他们的新 API 版本中积极使用 EcmaScript 6 的新功能，这可能会破坏旧浏览器或不完全支持 EcmaScript 6 功能的 Web 浏览器控件。

您可以在此处查看支持的浏览器列表和嵌入控件：

https://developers.google.com/maps/documentation/javascript/browsersupport

很遗憾，PyQt4 不在列表中，因此 Google 不保证 API 在此环境中正常运行。

作为一种解决方法，您可以尝试在

中添加 v=3 参数

<script src="https://maps.googleapis.com/maps/api/js?v=3&key=YOUR_API_KEY&callback=initMap" async defer></script>

加载发布版本或 v=3.30 加载冻结版本，但这可能只工作 3 或 6 个月，因为 Google 每 3 个月推出新版本的 API，如文档中所述：

https://developers.google.com/maps/documentation/javascript/versions

您可以考虑使用不同的网络浏览器嵌入控件。例如，您可以查看 Chromium Embedded Framework。

https://en.wikipedia.org/wiki/Chromium_Embedded_Framework

我相信它应该工作得很好。根据文档，该框架嵌入了一个 Chromium 浏览器（与 Google Chrome 浏览器密切相关的开源网络浏览器），它支持 HTML5、EcmaScript6 并使用 V8 JavaScript 引擎。

【讨论】：