Integrieren Sie Karten in mobile Anwendungen

Entwickler können hochgradig individualisierte, standortbezogene Anwendungen erstellen, indem sie die Geolocation-Funktionen von mobilen Geräten nutzen. Jetzt unterstützt MobileTogether, das plattformübergreifende, Low-Code-Tool für die mobile Entwicklung von Altova, die tiefe Integration von Karten in Anwendungen für alle gängigen mobilen Plattformen.

Entwickler können Karten in mobile Anwendungen integrieren, spezielle Markierungen hinzufügen und benutzerdefinierte Aktionen definieren, die ausgelöst werden, wenn ein Benutzer auf die Karte klickt. Beispielsweise könnte ein Unternehmen eine App entwickeln, die eine Karte aller Filialstandorte enthält und dann den aktuellen Lagerbestand anzeigt, wenn ein bestimmter Standort angeklickt wird.

In einem früheren Beitrag haben wir eine mobile App vorgestellt, die es Benutzern ermöglicht, den Status wichtiger US-Flughäfen abzurufen, indem sie einen Flughafencode aus einer Auswahlliste auswählen. Eine alternative Methode wäre, die 47 Einträge in der Auswahlliste durch Markierungen auf einer Karte zu ersetzen.

Schauen wir uns dieses Beispiel an.

Die folgenden Screenshots zeigen die neue Flughafen-Status-App, die auf einem Android-Smartphone, einem iPhone und als Windows-Desktop-Anwendung ausgeführt wird.

Auf jedem Gerät wird die Karte mithilfe der nativen, integrierten Kartenanwendung generiert. Die Endbenutzer sehen automatisch den ihnen vertrauten Stil und das vertraute Format auf jeder Plattform.

Wenn die Karte Informationen über den Status des Systems am unteren Bildschirmrand verdeckt, können diese durch vertikales Scrollen sichtbar gemacht werden

Integrieren Sie Karten in mobile Anwendungen, indem Sie das Karten-Steuerelement per Drag-and-Drop in die Anwendung ziehen, wobei Sie die visuellen Layout-Funktionen des MobileTogether Designers nutzen. Sie können die Eigenschaften jeder Karte individuell anpassen. Der Screenshot unten zeigt einen Ausschnitt unserer Hauptseite "Flughafenstatus" mit dem Hilfefenster für die Karteneinstellungen auf der rechten Seite.

Die verfügbaren Kartentypen sind Straßenkarten, Satellitenbilder oder eine Kombination aus beidem. Zusätzlich zu den optionalen Zoom-Funktionen unterstützen alle Touchscreen-Geräte das Scrollen der Karte mit einem Finger sowie die bekannte Pinch-Geste mit zwei Fingern zum Vergrößern oder Verkleinern.

Der anzuzeigende Kartenbereich basiert auf einer Liste von einem oder mehreren Markern, die mithilfe des Ausdrucks mt-geo-map-marker definiert werden. Jeder Marker enthält ein ID-Feld, einen Titel und einen Text. Diese Werte können abgerufen werden, wenn der Marker angeklickt wird.

Die Farben der Markierungen können Standardfarben wie Rot, Grün und Blau sein, oder sie können durch benutzerdefinierte Farbcode-Bezeichnungen angegeben werden, wie wir es oben gezeigt haben.

Die Eigenschaft "Viewport" definiert den gesamten Bereich, der dargestellt werden soll, indem die Koordinaten der oberen linken und unteren rechten Ecke der Karte festgelegt werden. Wenn dieser Wert nicht angegeben wird, umfasst der Standard-Viewport alle definierten Markierungen sowie einen kleinen Rand. Wir haben einen Viewport-Ausdruck mit Anfangswerten für den Großteil Nordamerikas definiert.

Die Eigenschaft "Steuerungsaktion" definiert, was passiert, wenn der Benutzer auf einen einzelnen Punkt auf der Karte klickt. Unsere App liest den Titel des Punktes, der ein dreibuchstabiger Flughafencode ist, verwendet diesen Code, um den Flughafenzustand vom FAA-Webdienst abzurufen, und aktualisiert die Anzeige.

Unsere App berechnet neue Anzeigebereichs-Koordinaten, um die Position des ausgewählten Flughafens detaillierter darzustellen:

Entdecken Sie selbst, wie einfach es ist, Karten in mobile Anwendungen zu integrieren. Laden Sie den kostenlosen MobileTogether Designer herunter, der eine Online-Hilfe und Beispielanwendungen enthält. Sie können auch unsere Airport Status App auf GitHub herunterladen und sie direkt im Designer oder als Testversion auf Ihrem eigenen mobilen Gerät ausführen.

Erfahren Sie mehr über andere Anwendungen, die mit MobileTogether erstellt wurden, und sehen Sie sich Video-Demonstrationen an: https://www.altova.com/mobiletogether/demos