使用 JavaScript 处理 PyQt5 交互式地图中的“Uncaught ReferenceError：地图未定义”

使用 JavaScript 集成解决 PyQt5 中的地图初始化问题

该解决方案使用 PyQt5 中的 Python 和 JavaScript 集成来解决该问题，重点是确保地图实例正确初始化并可用于 JavaScript 操作。

from PyQt5 import QtCore, QtWebEngineWidgets
import folium, os
class UI_MainWindow:
    def load_map(self):
        center_lat, center_lng = 18.45, -66.08
        self.map_obj = folium.Map(location=[center_lat, center_lng], zoom_start=15, min_zoom=14, max_zoom=17, control_scale=True)
        # JavaScript to move the map
        move_js = """
        <script>
        var map_instance;
        function initializeMap() { map_instance = map; }
        function moveToLocation(lat, lng) { if (map_instance) { map_instance.flyTo([lat, lng], 16); } }
        </script>
        """
        self.map_obj.get_root().html.add_child(folium.Element(move_js))
        # Assign map path
        map_path = os.path.join(os.getcwd(), "map_buttons.html")
        self.map_obj.save(map_path)
        self.webView.setUrl(QtCore.QUrl.fromLocalFile(map_path))
    def update_label(self, radio_button):
        if radio_button.isChecked():
            if radio_button == self.radio:  # PO1
                self.webView.page().runJavaScript("moveToLocation(18.45, -66.08);")
            elif radio_button == self.radio2:  # PO2
                self.webView.page().runJavaScript("moveToLocation(18.46, -66.07);")

使用 PyQt5 和 JavaScript 事件的优化解决方案

此方法通过确保 JavaScript 地图实例在发生任何交互之前完全初始化来优化地图初始化。

from PyQt5 import QtCore, QtWebEngineWidgets
import folium, os
class UI_MainWindow:
    def load_map(self):
        center_lat, center_lng = 18.45, -66.08
        self.map_obj = folium.Map(location=[center_lat, center_lng], zoom_start=15, min_zoom=14, max_zoom=17)
        # Initialize map instance in JavaScript
        init_map_js = """
        <script>
        document.addEventListener("DOMContentLoaded", function() { initializeMap(); });
        </script>
        """
        self.map_obj.get_root().html.add_child(folium.Element(init_map_js))
        map_path = os.path.join(os.getcwd(), "map_buttons.html")
        self.map_obj.save(map_path)
        self.webView.setUrl(QtCore.QUrl.fromLocalFile(map_path))
    def update_label(self, radio_button):
        if radio_button.isChecked():
            if radio_button == self.radio:
                self.webView.page().runJavaScript("moveToLocation(18.45, -66.08);")
            elif radio_button == self.radio2:
                self.webView.page().runJavaScript("moveToLocation(18.46, -66.07);")

PyQt5 和 Folium Map 集成的常见问题

1. 是什么原因导致“Uncaught ReferenceError：地图未定义”错误？
2. 当地图对象在完全初始化之前被引用时，会出现此错误。要修复它，您可以使用 document.addEventListener 页面 DOM 加载后初始化地图。
3. 如何将地图移动到特定位置？
4. 您可以使用 map.flyTo() JavaScript 中的方法可平滑地将地图平移到给定的坐标集。
5. 在 PyQt5 中集成 Python 和 JavaScript 的最佳方式是什么？
6. 使用 PyQt5 runJavaScript 方法，您可以直接从Python执行JavaScript函数，从而实现Python逻辑和JavaScript功能之间的无缝交互。
7. 如何在 Folium 地图中嵌入 HTML 按钮？
8. 您可以使用 folium.DivIcon 方法将自定义 HTML 内容（如按钮）直接添加到地图标记。
9. 如何处理用户输入以在 PyQt5 中移动地图？
10. 当用户选择单选按钮时， runJavaScript 方法可以触发 moveToLocation JavaScript 中的函数，将地图平移到所选位置。

结束地图集成过程

要在 PyQt5 中成功嵌入 Folium 地图，需要使用 JavaScript 正确初始化地图对象。诸如“地图未定义”和“地图实例未初始化”之类的错误源于尝试在地图完全加载之前对其进行操作。通过延迟初始化直到 DOM 准备好，您可以解决这些问题。

此外，使用集成 Python 和 JavaScript 运行JavaScript PyQt5 中的方法允许无缝控制地图，从而实现基于用户输入的位置移动等功能。这种方法可确保应用程序中流畅且交互式的用户体验。