AngularJS - Maps-Anwendung

Hallo da draußen, ambitionierte Web-Entwickler! Heute begeben wir uns auf eine aufregende Reise in die Welt von AngularJS und Google Maps. Bis zum Ende dieses Tutorials werdet ihr in der Lage sein, eure ganz eigene interaktive Kartenanwendung zu erstellen. Ist das nicht toll? Lass uns eintauchen!

AngularJS - Maps Application

Einführung in AngularJS und Google Maps

Bevor wir mit dem Coden beginnen, lassen wir uns erstmal anschauen, was AngularJS und Google Maps sind.

AngularJS ist ein leistungsstarkes JavaScript-Framework, das uns dabei hilft, dynamische Webanwendungen zu bauen. Es ist wie ein Superhelden-Sidekick für eure HTML, der ihr superpowers verleiht, um interaktive und responsive Webseiten zu erstellen.

Google Maps ist andererseits ein Web-Kartendienst, der detaillierte Informationen über geografische Regionen und Orte auf der ganzen Welt bietet. Es ist so, als hätte man die ganze Welt an einem Finger!

Wenn wir diese beiden Technologien kombinieren, können wir erstaunliche kartengestützte Anwendungen erstellen. Aufregend, nicht wahr?

Einrichtung unseres Projekts

Schritt 1: Einbinden von AngularJS und Google Maps API

Zuerst müssen wir die notwendigen Bibliotheken in unsere HTML-Datei einbinden. So machen wir das:

<!DOCTYPE html>
<html ng-app="mapApp">
<head>
<title>Meine AngularJS Karten-App</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.2/angular.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>
</head>
<body>
<!-- Unsere App kommt hier hin -->
<script src="app.js"></script>
</body>
</html>

In diesem Code binden wir AngularJS und die Google Maps API ein. Ersetzt 'YOUR_API_KEY' durch eure tatsächliche Google Maps API-Schlüssel. Keine Sorge, wenn ihr noch keinen habt; wir werden später cober, wie man einen bekommt.

Schritt 2: Erstellen unserer AngularJS-App

Nun erstellen wir unsere AngularJS-App. In einer neuen Datei namens app.js fügen wir den folgenden Code hinzu:

var app = angular.module('mapApp', []);

app.controller('MapController', function($scope) {
// Hier werden wir unsere Kartenlogik hinzufügen
});

Dieser Code erstellt ein AngularJS-Modul namens 'mapApp' und einen Controller namens 'MapController'. Denkt daran, das Modul als Behälter für unsere App und den Controller als das Gehirn, das unsere Karte verwalten wird.

Erstellung unserer Karte

Schritt 3: Initialisierung der Karte

Fügen wir etwas Code zu unserem Controller hinzu, um unsere Karte zu initialisieren:

app.controller('MapController', function($scope) {
$scope.initMap = function() {
var mapOptions = {
center: new google.maps.LatLng(40.7128, -74.0060),
zoom: 12
};
var map = new google.maps.Map(document.getElementById('map'), mapOptions);
}
});

Diese Funktion erstellt eine neue Google Maps, die auf New York City zentriert ist (ihr könnt die Koordinaten auf jeden Ort, den ihr möchtet, ändern). Die zoom-Stufe bestimmt, wie stark die Karte hineingezoomt ist.

Schritt 4: Hinzufügen der Karte zu unserem HTML

Jetzt fügen wir eine Div zu unserem HTML hinzu, in der die Karte angezeigt wird:

<body ng-controller="MapController">
<div id="map" style="height: 400px; width: 100%;" ng-init="initMap()"></div>
<script src="app.js"></script>
</body>

Die ng-controller-Direktive weist AngularJS an, unseren MapController für diesen Teil der Seite zu verwenden. Die ng-init-Direktive ruft unsere initMap-Funktion auf, wenn die Seite lädt.

Hinzufügen von Markern

Schritt 5: Erstellen einer Funktion zum Hinzufügen von Markern

Erweitern wir unseren Controller, um Marker zu unserer Karte hinzuzufügen:

app.controller('MapController', function($scope) {
var map;

$scope.initMap = function() {
var mapOptions = {
center: new google.maps.LatLng(40.7128, -74.0060),
zoom: 12
};
map = new google.maps.Map(document.getElementById('map'), mapOptions);
}

$scope.addMarker = function(lat, lng, title) {
var marker = new google.maps.Marker({
position: new google.maps.LatLng(lat, lng),
map: map,
title: title
});
}
});

Diese neue addMarker-Funktion erstellt einen Marker an der angegebenen Breitengrad- und Längengradposition mit einem bestimmten Titel.

Schritt 6: Verwendung der Marker-Funktion

Jetzt verwenden wir unsere neue Funktion, um einige Marker hinzuzufügen:

<body ng-controller="MapController">
<div id="map" style="height: 400px; width: 100%;" ng-init="initMap()"></div>
<button ng-click="addMarker(40.7484, -73.9857, 'Empire State Building')">Empire State Building hinzufügen</button>
<button ng-click="addMarker(40.7484, -73.9857, 'Statue of Liberty')">Statue of Liberty hinzufügen</button>
<script src="app.js"></script>
</body>

Diese Buttons fügen Marker für das Empire State Building und die Freiheitsstatue hinzu, wenn sie geklickt werden.

Benutzerinput verarbeiten

Schritt 7: Erstellen eines Eingabeformulars

Lassen wir die Benutzer ihre eigenen Marker hinzufügen:

<form ng-submit="addCustomMarker()">
<input type="text" ng-model="newMarker.title" placeholder="Titel">
<input type="number" ng-model="newMarker.lat" placeholder="Breitengrad">
<input type="number" ng-model="newMarker.lng" placeholder="Längengrad">
<button type="submit">Marker hinzufügen</button>
</form>

Schritt 8: Formularübermittlung verarbeiten

Fügt diese Funktion zu eurem Controller hinzu:

$scope.newMarker = {};

$scope.addCustomMarker = function() {
if($scope.newMarker.title && $scope.newMarker.lat && $scope.newMarker.lng) {
$scope.addMarker($scope.newMarker.lat, $scope.newMarker.lng, $scope.newMarker.title);
$scope.newMarker = {};
}
}

Diese Funktion überprüft, ob alle Felder ausgefüllt sind, fügt den Marker hinzu und leert dann das Formular.

Schlussfolgerung

Glückwunsch! Ihr habt gerade eure erste AngularJS Kartenanwendung erstellt. Ihr könnt jetzt eine Karte anzeigen, voreingestellte Marker hinzufügen und sogar erlauben, dass Benutzer ihre eigenen Marker hinzufügen. Das ist erst der Anfang – es gibt so viel mehr, was ihr mit AngularJS und Google Maps machen könnt.

Denkt daran, der Schlüssel zum werden eines großartigen Programmierers ist die Übung. Versucht, mehr Funktionen zu eurer Karten-App hinzuzufügen. Wie wäre es mit der Anzeige von Informationen, wenn ein Marker geklickt wird? Oder das Hinzufügen verschiedener Arten von Markern? Die Möglichkeiten sind endlos!

Happy Coding, zukünftige Tech-Zauberer!

Methode	Beschreibung
`initMap()`	Initialisiert die Google Maps
`addMarker(lat, lng, title)`	Fügt einen Marker zur Karte an der angegebenen Breitengrad- und Längengradposition hinzu
`addCustomMarker()`	Verarbeitet Benutzerinput, um einen benutzerdefinierten Marker hinzuzufügen

Credits: Image by storyset

Vorheriges Tutorial:

AngularJS - Chart-Anwendung

Nächstes Tutorial:

AngularJS - Anwendungs-Sharing