AngularJS - Leaflet-Anwendung: Ein Anfängerleitfaden
Hallo, zukünftige Codingsuperstars! Heute begeben wir uns auf eine aufregende Reise in die Welt von AngularJS und Leaflet. Machen Sie sich keine Sorgen, wenn diese Begriffe derzeit wie eine fremde Sprache klingen - bis zum Ende dieses Tutorials werden Sie fließend "Web-Karte" sprechen!
Was ist AngularJS und Leaflet?
Bevor wir uns in den Code stürzen, lassen Sie uns herausfinden, was diese Technologien sind:
AngularJS
AngularJS ist ein leistungsstarkes JavaScript-Framework, das uns hilft, dynamische Webanwendungen zu erstellen. Denken Sie daran als einen superintelligenten Assistenten, der Ihren Code organisiert und Ihre Website interaktiv macht.
Leaflet
Leaflet ist eine open-source JavaScript-Bibliothek für mobilfreundliche interaktive Karten. Es ist wie Google Maps, aber Sie sind der Chef und entscheiden genau, wie Ihre Karte aussieht und funktioniert!
Jetzt, da wir die Vorstellungen hinter uns haben, rollen wir die Ärmel hoch und beginnen mit dem Aufbau unserer eigenen Kartenanwendung!
Einrichtung unseres Projekts
Zuerst einmal müssen wir unser Projekt einrichten. Machen Sie sich keine Sorgen, es ist einfacher als das Zusammenbauen von IKEA-Möbeln!
Schritt 1: Erstellen der HTML-Datei
Erstellen Sie eine neue Datei mit dem Namen index.html und fügen Sie den folgenden Code ein:
<!DOCTYPE html>
<html ng-app="leafletApp">
<head>
<title>Meine großartige Kartenanwendung</title>
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<style>
#map { height: 400px; }
</style>
</head>
<body ng-controller="MapController">
<div id="map"></div>
<script src="app.js"></script>
</body>
</html>Diese HTML-Datei ist wie das Skelett unserer Anwendung. Sie enthält alle notwendigen Bibliotheken (AngularJS und Leaflet) und richtet einen div ein, wo unsere Karte leben wird.
Schritt 2: Erstellen der JavaScript-Datei
Nun erstellen wir unsere app.js-Datei. Hier geschieht die Magie!
var app = angular.module('leafletApp', []);
app.controller('MapController', function($scope) {
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap-Mitwirkende'
}).addTo(map);
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('Eine hübsche CSS3-Popup.<br> Einfach anpassbar.')
.openPopup();
});Lassen Sie uns das aufschlüsseln:
- Wir erstellen ein AngularJS-Modul namens 'leafletApp'.
- Wir definieren einen Controller namens 'MapController'.
- Innerhalb des Controllers initialisieren wir eine Leaflet-Karte, setzen ihre Ansicht auf London (dies können Sie auf任意坐标更改) und fügen eine Kachelschicht von OpenStreetMap hinzu.
- Schließlich fügen wir einen Marker zu unserer Karte hinzu, der eine Popup-anzeige hat.
Verständnis des Codes
Nun, da wir unsere grundlegende Karte haben, werfen wir einen tieferen Blick auf das, was jeder Teil unseres Codes macht.
Die HTML-Datei
<html ng-app="leafletApp">Diese Zeile tells AngularJS, dass dies das Wurzelelement unserer Anwendung ist. Alles innerhalb dieses Elements wird von AngularJS verwaltet.
<body ng-controller="MapController">Diese Zeile verknüpft unseren MapController mit dem body unserer HTML. Das bedeutet, dass alle Logik, die wir in unserem MapController definieren, innerhalb des Körpers verfügbar ist.
<div id="map"></div>Dies ist der Ort, an dem unsere Karte gerendert wird. Leaflet wird diesen div verwenden, um die Karte zu erstellen.
Die JavaScript-Datei
var app = angular.module('leafletApp', []);Diese Zeile erstellt ein neues AngularJS-Modul. Denken Sie daran als einen Behälter für verschiedene Teile Ihrer Anwendung.
app.controller('MapController', function($scope) {
// Controller-Logik hier
});Hier definieren wir unseren MapController. Das $scope ist ein besonderes Objekt, das als Brücke zwischen dem Controller und der Ansicht (unserer HTML) dient.
var map = L.map('map').setView([51.505, -0.09], 13);Diese Zeile initialisiert unsere Leaflet-Karte. 'map' ist die ID unseres divs, [51.505, -0.09] sind die Koordinaten für die Mitte unserer Karte (Breitengrad und Längengrad) und 13 ist der Zoom-Level.
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap-Mitwirkende'
}).addTo(map);Dies fügt eine Kachelschicht zu unserer Karte hinzu. Kachelschichten sind die tatsächlichen Kartenbilder. Hier verwenden wir OpenStreetMap-Kacheln.
L.marker([51.5, -0.09]).addTo(map)
.bindPopup('Eine hübsche CSS3-Popup.<br> Einfach anpassbar.')
.openPopup();Dies fügt einen Marker zu unserer Karte hinzu und bindet eine Popup-anzeige an ihn, die geöffnet wird.
Hinzufügen von Interaktivität
Nun, da wir unsere grundlegende Karte haben, machen wir sie interaktiver! Wir fügen eine Funktion hinzu, die es Benutzern ermöglicht, neue Marker durch Klicken auf die Karte hinzuzufügen.
Aktualisieren Sie Ihre app.js-Datei wie folgt:
var app = angular.module('leafletApp', []);
app.controller('MapController', function($scope) {
var map = L.map('map').setView([51.505, -0.09], 13);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap-Mitwirkende'
}).addTo(map);
$scope.markers = [];
map.on('click', function(e) {
var marker = L.marker(e.latlng).addTo(map);
$scope.markers.push(marker);
$scope.$apply();
});
$scope.removeMarkers = function() {
$scope.markers.forEach(function(marker) {
map.removeLayer(marker);
});
$scope.markers = [];
};
});Aktualisieren Sie Ihre index.html, um einen Button zum Entfernen von Markern hinzuzufügen:
<body ng-controller="MapController">
<div id="map"></div>
<button ng-click="removeMarkers()">Alle Marker entfernen</button>
<script src="app.js"></script>
</body>Lassen Sie uns das aufschlüsseln, was wir hinzugefügt haben:
- Wir erstellen ein Array
$scope.markers, um alle unsere Marker zu verfolgen. - Wir fügen einen Ereignislistener zu unserer Karte hinzu, der einen neuen Marker erstellt, wenn der Benutzer auf die Karte klickt.
- Wir erstellen eine
removeMarkers-Funktion, die alle Marker von der Karte entfernt und unser Marker-Array bereinigt. - Wir fügen einen Button zu unserer HTML hinzu, der die
removeMarkers-Funktion aufruft, wenn er geklickt wird.
Schlussfolgerung
Glückwunsch! Sie haben gerade Ihre erste interaktive Kartenanwendung mit AngularJS und Leaflet erstellt. Sie haben gelernt, wie man eine grundlegende Karte einrichtet, Marker hinzufügt und sogar Benutzerinteraktionen implementiert.
Denken Sie daran, dies ist nur der Anfang. Die Welt der Webkarten ist riesig und spannend, mit endlosen Möglichkeiten für Anpassungen und zusätzliche Funktionen. Weiter erkunden, weiter codieren und vor allem: Viel Spaß!
Credits: Image by storyset