Laden Sie MMAP als PDF herunter Kostenlos

Hallo Leute, willkommen zurück! Im letzten Video haben wir einige coole Funktionen von Leaflet hinzugefügt, wie die Maßstabsfunktion und die Funktion zur Anzeige der Kartenkoordinaten. In diesem Video werde ich eine weitere Funktion hinzufügen, die Druckfunktion für die Karte. Dafür möchte ich einfach einen Button hier hinzufügen. Der Button könnte den Namen "Druckkarte" mit der Klasse "print-map" haben, und dann füge ich den Text "Druckkarte" hinzu. Okay, jetzt könnt ihr den Druckkarten-Button sehen, aber er macht noch nichts. Also werden wir diese Funktion hier hinzufügen. Wenn ich darauf klicke, können wir in jQuery das Element mit dem Klassennamen auswählen, vielleicht "print-map". Ja, hier haben wir diesen Button ausgewählt, und dann können wir die Click-Funktion für "print-map" finden. Wenn wir also auf den Druckkarten-Button klicken, sollte es "window.print()" ausführen. Das bedeutet, es ist die Standardfunktion von JavaScript, also können wir unsere Karte drucken, wenn wir die Druckkarten-Funktion klicken. Lass es uns ausprobieren. Ja, es funktioniert jetzt. Jetzt können wir eine Karte drucken, aber aufgrund der Größe der Karte auf unserem Bildschirm ist sie nicht responsiv. Das bedeutet, sie erscheint auf der zweiten Seite, und wir sehen alles innerhalb der Karte, und die Karte ist auch nicht responsiv, sie berührt die Ränder, also ist das kein gutes Verhalten, aber wir haben es irgendwie implementiert. Für diese Druckfunktion haben wir ein cooles Plugin namens "leaflet-browser-print", das wir hier verwenden müssen. Ja, ich werde dieses Plugin verwenden. Dafür lade ich den Code mit Git herunter oder ihr könnt einfach die ZIP-Datei von hier herunterladen, das ist auch in Ordnung. Ich gehe zurück zum Download-Ordner und ja, jetzt ist es heruntergeladen. Wenn ich in das Verzeichnis "leaflet-browser-print" gehe, bedeutet das, dass ich diese Datei bereits heruntergeladen habe. Wir müssen etwas Dokumentation lesen, wie man dieses Plugin implementiert. Dafür müssen wir die Datei "browserprint.min.js" in unseren Code einfügen. Ich werde sie manuell von hier hinzufügen. Okay, darin haben wir diese Hauptfunktion, und ich werde diese Datei kopieren und dann in einen Ordner einfügen. Ich werde einen neuen Ordner namens "leaf" erstellen und sie hier einfügen. Jetzt kann ich diese Bibliothek importieren. Nach jQuery werde ich dieses Skript importieren: "src" und dann "./leaf/browserprint.min.js", so etwas in der Art. Nach dem Importieren müssen wir diese Funktion aufrufen, also hier "control.browser.print" für die Karte. Okay, lass es uns hier machen. Okay, "map.print". Ja, vielleicht kopiere ich das und füge es hier ein. Jetzt wird automatisch unser Drucksymbol hinzugefügt, und wir können einfach unsere Karte drucken. Wenn es mehrere Optionen gibt, können wir einfach die Papiergröße auswählen, ob es Hochformat oder Querformat sein soll oder eine benutzerdefinierte Größe. Vielleicht probiere ich zuerst "Auto". Ja, es reagiert nicht gut. Ja, es wurde gut importiert.