js：未捕获的 ReferenceError：未定义 L-解网

问：

好吧，我正在处理需要 python 地图的项目，所以我发现您可以使用传单和 PyQt5 来做到这一点，然后发生了这个错误。我只有 2 个文件。地图.html和 map.py。

这是地图.html：-


<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Ship Map</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
</head>
<body>

<div id="map" style="height: 100vh;"></div>

<script>
  // Wrap your code in a function that runs when the document is ready
  document.addEventListener('DOMContentLoaded', function() {
    var mymap = L.map('map').setView([0, 0], 2);
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
      attribution: '© OpenStreetMap contributors'
    }).addTo(mymap);

    var shipIcon = L.icon({
      iconUrl: 'E:\\Project CS\\Vessel Traffic Management System\\GUI\\photos\\ship.png',
      iconSize: [64, 64],
      iconAnchor: [16, 16],
      popupAnchor: [0, -16]
    });

    var ships = [
      { Embarkation: [18.9750, 72.8258], Name: 'Ship1' },
      { Embarkation: [13.0827, 80.2707], Name: 'Ship2' },
      // ... other ships
    ];

    console.log('hello')

    // Add markers for ships
    ships.forEach(function (ship) {
      var marker = L.marker(ship.Embarkation, { icon: shipIcon }).addTo(mymap);
      marker.bindPopup("<b>" + ship.Name + "</b>").openPopup();
    });
  });
</script>

</body>
</html>

然后是 map.py 文件。

import sys
from PyQt5.QtWidgets import QApplication, QMainWindow
from PyQt5.QtWebEngineWidgets import QWebEngineView
from PyQt5.QtCore import QUrl
import random

class MapApp(QMainWindow):
    class ships:
        speed = 0
        
        def __init__(self,Name,TYPE,IMO,Capacity,Condition,Navigation_Status,Embarkation,Departure_Time,Departure,Arrival_Time,Image):
            self.Name = Name
            self.IMO = IMO
            self.Condition = Condition
            self.Capacity = Capacity
            self.Navigation_Status = Navigation_Status
            self.Type = TYPE
            self.Embarkation = Embarkation
            self.Departure_Time = Departure_Time
            self.Departure = Departure
            self.Arrival_Time = Arrival_Time
            self.Image = Image

        @classmethod
        def change_condition(cls, condition):
            cls.condition = condition
        
        @classmethod
        def change_navigation_status(cls, navigation_status):
            cls.navigation_status = navigation_status

        def update_speed(self):
            self.speed = random.randint(25, 30)

    def __init__(self):
        super().__init__()

        self.setWindowTitle("Map App")
        self.setGeometry(100, 100, 800, 600)

        # Create QWebEngineView
        self.web_view = QWebEngineView()
        self.setCentralWidget(self.web_view)

        # Load HTML file
        self.web_view.setUrl(QUrl.fromLocalFile("E:\Project CS\Vessel Traffic Management System\GUI\map.html"))

        # Create a list to store ship objects
        self.ship_objects = []

        # Create ship objects
        self.create_ships()

        self.update_map()

    def create_ships(self):
        # Create ship objects and append to the list
        ship1 = self.ships(Name="Eren", TYPE="Type1", IMO="IMO1", Capacity=100, Condition="Good",
                           Navigation_Status="Active", Embarkation=[0, 0], Departure_Time="Time1",
                           Departure="Departure1", Arrival_Time="Arrival1", Image="Image1")
        ship2 = self.ships(Name="Mikasa", TYPE="Type2", IMO="IMO2", Capacity=150, Condition="Excellent",
                           Navigation_Status="Inactive", Embarkation=[10, 10], Departure_Time="Time2",
                           Departure="Departure2", Arrival_Time="Arrival2", Image="Image2")

        # Append ship objects to the list
        self.ship_objects.append(ship1)
        self.ship_objects.append(ship2)

    def update_map(self):
        # Loop through ships and create markers
        js_commands = []
        
        for ship in self.ship_objects:
            # Extract latitude and longitude from Embarkation
            lat, lng = ship.Embarkation

            # Create JavaScript code for adding a marker
            js_command = f"L.marker([{lat},{lng}]).addTo(mymap).bindPopup('{ship.Name}');"
            js_commands.append(js_command)

        # Join all JavaScript commands into a single string
        js_code = "\n".join(js_commands)

        # Execute JavaScript code in the WebView
        self.web_view.page().runJavaScript(js_code)
        print('hello')

if __name__ == "__main__":
    app = QApplication(sys.argv)
    window = MapApp()
    window.show()
    sys.exit(app.exec_())

我试图使用类在地图上标记某个位置。但是船舶类对象没有被标记

我试图获得 Chat GPT 的帮助，但他无法修复它

javascript python html pyqt5

js：未捕获的 ReferenceError：未定义 L

js: Uncaught ReferenceError: L is not defined

评论