--- title: "Erstellen Sie individuelle Karten in mobilen Anwendungen" date: "2019-09-18" categories: - "mobile" - "mobile-development" - "mobiletogether" - "xquery" tags: - "app-development" - "maps" - "mobile-development" - "mobiletogether" - "xquery" description: Entdecken Sie, wie Sie mit MobileTogether dynamische, benutzerdefinierte Karten in mobilen Anwendungen erstellen können, indem Sie XQuery-Ausdrücke verwenden, um geografische Standorte in Echtzeit an die Eingaben der Benutzer anzupassen. --- Status: #blog Tags: #app-development #maps #mobile-development #mobiletogether #xquery Categories: [mobile-development](/blog/de/category/mobile-development.md) | [mobile-development](/blog/de/category/mobile-development.md) | [mobile-development](/blog/de/category/mobile-development.md) | [xpath+xquery](/blog/de/category/xpathxquery.md) # Erstellen Sie individuelle Karten in mobilen Anwendungen In einem früheren Beitrag haben wir beschrieben, wie man.. [Integrieren Sie Karten in mobile Anwendungen, die auf verschiedenen Plattformen funktionieren](https://www.altova.com/blog/integrate-maps-into-mobile-apps/) mit der nativen Kartenanwendung jedes Endbenutzergeräts. Unsere Beispielanwendung erstellte eine Karte mit Markierungen, die die wichtigsten Flughäfen in den Vereinigten Staaten anzeigen. Abbildungen zeigten Karten, die von derselben App auf einem Android-Smartphone, einem iPhone und einem Windows-Desktop generiert wurden. Was wäre, wenn eine Liste von Standorten, die kartiert werden sollen, nicht im Voraus bekannt ist, sondern zur Laufzeit basierend auf der Benutzeraktivität generiert wird? MobileTogether, das [low-code-Tool für die plattformübergreifende mobile Entwicklung von Altova](https://www.altova.com/de/mobiletogether), ermöglicht es Entwicklern auch, benutzerdefinierte Karten in mobilen Anwendungen in Echtzeit zu erstellen, basierend auf einer Liste von geografischen Standorten, die zur Laufzeit generiert werden. ![](/blog/images/Blog_MT_windmill.jpg) Hier ist ein Screenshot einer Ansicht in einer mobilen App, die eine RESTful-API-Anfrage durchführt, um eine Liste von Standorten in der Nähe abzurufen, basierend auf einer vom Benutzer eingegebenen Suchanfrage. [![Erstellen einer Liste von geografischen Standorten für benutzerdefinierte Karten in mobilen Anwendungen](/blog/images/custom_search.png)](custom_search-e1568826839242.png) Wenn Sie ein Unternehmen wären, das einen Standort für den Bau eines neuen Rechenzentrums sucht, wäre eine Karte eine sehr nützliche Ergänzung zu den Suchergebnissen. [![Eine von Benutzern erstellte Liste von geografischen Standorten für eine individuelle Karte](/blog/images/search-results-list.png)](search-results-list.png) Wie wir in der App "Airport Status" gesehen haben, die wir für unseren vorherigen Beitrag entwickelt haben, beinhaltet die Kartenkomponente "MobileTogether" Eigenschaften, die Markierungen definieren, einen Anzeigebereich für die Karte und Aktionen, die ausgeführt werden sollen, wenn der Benutzer auf einen Punkt auf der Karte klickt. [![Definition der Eigenschaften für eine Karte in einer plattformübergreifenden mobilen Anwendung](/blog/images/properties-1-1.png)](properties-1-1.png) In der App "Flughafenstatus" war die gesamte Liste der Markierungen für große Flughäfen fest in das Fenster des XPath/XQuery-Editors für die Eigenschaft "Markierungen" einprogrammiert [![Eine Liste von fest codierten Geolocation-Markierungen für benutzerdefinierte Karten in mobilen Anwendungen](/blog/images/marker-list-1.png)](marker-list-1.png) ### Ein XQuery-Ausdruck zum Erstellen von Kartenmarkierungen Die Markierungen müssen nicht fest codiert sein. Stattdessen kann die gesamte Liste der Markierungen für benutzerdefinierte Karten in mobilen Anwendungen mithilfe eines XQuery-Ausdrucks erstellt werden. Um benutzerdefinierte Karten in mobilen Anwendungen zu erstellen, benötigen wir einen [XQuery-Ausdruck vom Typ "For-Let-Where-Order-Return"](https://www.altova.com/de/mobiletogether/xpath-intro) (FLWOR), der auf den Ergebnissen einer REST-Suchabfrage basiert. Die Parameter `let`, `where` und `order` in FLWOR-Ausdrücken sind optional, und wir benötigen sie nicht für unsere Liste von Markierungen. Wir benötigen lediglich `For` und `Return`, um die Liste von Standorten zu verarbeiten, die von der REST-Anfrage zurückgegeben werden: [![Ein XQuery-Ausdruck zum Erstellen von Markierungen auf benutzerdefinierten Karten in mobilen Anwendungen ](/blog/images/marker-list-2.png)](marker-list-2.png) Eine XQuery-Ausdruck kann auch ohne die Parameter "let", "where" und "order" schon schwierig zu erstellen sein. Hier kommt der Bereich "Evaluator" im XQuery-Ausdrucksfenster ins Spiel. Durch Klicken auf den Button "Evaluator" können Sie den Ausdruck während der Erstellung testen. [![Das Testen eines XQuery-Ausdrucks mit dem XQuery-Evaluator](/blog/images/marker-list-evaluator.png)](marker-list-evaluator.png) Wenn der Ausdruck einen Fehler enthält, schlägt die Auswertung fehl, und die Fehlermeldung wird im Ergebnisfenster angezeigt. Wir öffneten das Fenster für XQuery-Ausdrücke im MobileTogether Designer, während der Simulator die in Entwicklung befindliche App ausführte. Zunächst nutzten wir den Simulator, um eine Textsuche durchzuführen und so Zugriff auf aktuelle Daten von der REST-Abfrage für "Windenergie" innerhalb eines Umkreises von 100 Meilen um Amarillo, Texas, zu erhalten. Beachten Sie, dass der Name "Cielo Wind Power LLC" in den Suchergebnissen, die im unteren linken Bereich des Screenshots oben angezeigt werden, verwendet wird, um das Textelement für Marker 1 zu generieren, das in den Evaluierungsergebnissen auf der rechten Seite angezeigt wird. Sobald wir mit der Funktionsweise der Formel zufrieden sind, ziehen wir einfach eine neue Geolocation-Kartenelemente auf die Seite mit den Suchergebnissen. Anschließend kopieren wir die Formel und fügen sie in das Feld "Marker" ein. Hier ist ein Beispiel, wie die Seite mit der Karte im MobileTogether Designer aussieht: [![Das Hinzufügen der Geolocation-Kartenfunktion zu einem mobilen App-Design im MobileTogether Designer](/blog/images/map-design.png)](map-design.png) Wir können nun die verbleibenden Eigenschaften der Karte so einstellen, dass sie optimal zu unserer Anwendung passen. Wir haben einen Straßenkarten-Typ mit Zoom-Funktionen gewählt. Andere verfügbare Kartentypen sind eine Satellitenkarte oder eine Hybridkarte, die Satelliten- und Straßenansichten kombiniert. Das Feld "Viewport" ist leer, da MobileTogether den Viewport automatisch so einstellt, dass alle auf der Karte angezeigten Markierungen enthalten sind, wie sie zur Laufzeit durch den XQuery-Ausdruck definiert sind. Wir haben auch einen XQuery-Ausdruck verwendet, um die Sichtbarkeit nur dann zu aktivieren, wenn die Anzahl der Ergebnisse der REST-Anfrage größer als Null ist. Hier ist ein Bild des Hilfefensters für die Karteneigenschaften: [![Definition von Eigenschaften für benutzerdefinierte Karten in mobilen Anwendungen mit dem MobileTogether Designer](/blog/images/map-control-styles.png)](map-control-styles.png) Die Einstellungen für "Steuerungsbreite" und "Steuerungshöhe" ermöglichen es MobileTogether, die Größe der Karte automatisch für jedes mobile Gerät anzupassen. Wir möchten dem Benutzer mehr Informationen über einen bestimmten Ort anzeigen, wenn er auf einen Marker klickt. Dies wird in der Eigenschaft "Steuerungsaktion" definiert. Der Button mit den drei Punkten für die Steuerungsaktion öffnet einen Dialog, in dem der Entwickler mehrere Aktionen definieren kann: [![Festlegen der Aktionen, die ausgeführt werden, wenn ein Benutzer auf einen Marker in einer benutzerdefinierten Karte für mobile Anwendungen klickt](/blog/images/click-actions.png)](click-actions.png) Unsere App verwendet die Erweiterungsfunktionen von MobileTogether, um Informationen über den angeklickten Marker zu sammeln. Anschließend öffnet sie eine Unterseite, um Details zu diesem Standort anzuzeigen. Im Folgenden sind die Ergebnisseite der App, wie sie auf einem iPhone angezeigt wird, sowie die Unterseite dargestellt, die nach dem Anklicken eines Markers auf einem Android-Gerät erscheint: ![Screenshots von benutzerdefinierten Karten, die in einer mobilen App auf einem iPhone und einem Android-Smartphone angezeigt werden](/blog/images/map-results.png) Der Button mit der Bezeichnung "Produktionsdaten anzeigen" auf der Unterseite "Details der Ergebnisse" könnte eine Datenbank abfragen, um historische Daten zur Stromerzeugung für das ausgewählte Windparkgebiet anzuzeigen. Entdecken Sie selbst, wie einfach es ist, individuelle Karten in mobilen Anwendungen zu erstellen. Laden Sie den [kostenlosen MobileTogether Designer](https://www.altova.com/de/mobiletogether/download) herunter, der Online-Hilfe und Beispielanwendungen enthält. Erfahren Sie mehr über andere Anwendungen, die mit MobileTogether erstellt wurden, und sehen Sie sich Video-Demonstrationen an: [https://www.altova.com/mobiletogether/demos](https://www.altova.com/de/mobiletogether/demos)