如何在不重新渲染整个地图的情况下更新Folium地图？

嘿，我完全懂你现在的困扰——每次重新生成整个地图再刷新网页，那闪烁感真的很影响体验！其实根本不用这么折腾，因为Folium本质是基于Leaflet.js实现的，我们可以直接调用Leaflet的原生API来操控已经加载好的地图，完全不需要重新渲染整个页面。

问题根源 #

你当前的update_map方法每次都重新创建一个folium.Map对象，再重新生成HTML调用setHtml，这相当于每次都刷新了整个网页，闪烁问题自然就来了。我们要做的是直接操作网页里已经运行的Leaflet地图实例。

解决方案 #

Leaflet生成的地图在页面里默认叫map，我们可以通过QWebEngineView.runJavaScript()方法直接执行JS代码来移动地图中心，不管是平滑拖动还是直接跳转都能实现，而且完全不会闪烁。

下面是修改后的完整代码：

import io
import sys
import folium
from PySide6.QtCore import QTimer
from PySide6.QtWebEngineWidgets import QWebEngineView
from PySide6.QtWidgets import QApplication, QMainWindow, QVBoxLayout, QWidget


class MapWebView(QWebEngineView):
    def __init__(self, initial_coordinates: tuple[float, float]):
        super().__init__()
        self.folium_map = folium.Map(
            location=initial_coordinates,
            zoom_start=13,
            zoom_control=False,
            attribution_control=False
        )
        self.data = io.BytesIO()
        self.folium_map.save(self.data, close_file=False)
        self.setHtml(self.data.getvalue().decode())
        # 保存初始坐标，方便后续更新计算
        self.current_coords = initial_coordinates

    def update_map(self, new_coords: tuple[float, float]):
        self.current_coords = new_coords
        # 用Leaflet的panTo方法实现平滑拖动，duration控制动画时长（毫秒）
        js_code = f"map.panTo([{new_coords[0]}, {new_coords[1]}], {{duration: 1000}});"
        # 如果想要直接跳转（无动画），可以用setView：
        # js_code = f"map.setView([{new_coords[0]}, {new_coords[1]}], map.getZoom());"
        self.runJavaScript(js_code)


class MainWindow(QMainWindow):
    def __init__(self):
        super().__init__()
        self.resize(600, 600)
        self.setCentralWidget(QWidget())
        self.centralWidget().setLayout(QVBoxLayout())

        self.map_webview = MapWebView((47.030780, 8.656176))
        self.centralWidget().layout().addWidget(self.map_webview)

        timer = QTimer(self)
        timer.timeout.connect(self.update_map)
        timer.start(1000)

    def update_map(self):
        current_coords = self.map_webview.current_coords
        new_coords = (current_coords[0] + 0.002, current_coords[1] + 0.002)
        self.map_webview.update_map(new_coords)


if __name__ == '__main__':
    app = QApplication(sys.argv)
    window = MainWindow()
    window.show()
    sys.exit(app.exec())

关键说明 #

• panTo方法：会让地图平滑拖动到新坐标，duration参数和你的1秒更新间隔匹配，过渡会非常自然。
• setView方法：直接将地图中心跳转到新坐标，没有动画，效率更高，同样不会有闪烁。
• 我们不再重复创建folium.Map对象，只是更新坐标并执行JS代码，网页本身不会刷新，完美解决闪烁问题。

这样修改后，你的地图要么平滑滑动，要么直接跳转，再也不会有烦人的闪烁啦！

备注：内容来源于stack exchange，提问作者Irakli Skhirtladze