---
title: "Integracja map z aplikacjami mobilnymi"
date: "2019-07-17"
categories: 
  - "app-development"
  - "mobile"
  - "mobile-development"
tags: 
  - "app-development"
  - "maps"
  - "mobile-development"
  - "mobiletogether"
  - "web-services"
description: Integracja map z aplikacjami mobilnymi jest łatwa dzięki platformie MobileTogether, która oferuje dostosowane funkcje geolokalizacji oraz interaktywne znaczniki, poprawiając w ten sposób komfort użytkowania.
---
Status: #blog

Tags:  #app-development #maps #mobile-development #mobiletogether #web-services

Categories: [mobile-development](/blog/pl/category/mobile-development.md) | [mobile-development](/blog/pl/category/mobile-development.md) | [mobile-development](/blog/pl/category/mobile-development.md)
# Integracja map z aplikacjami mobilnymi

Programiści mogą tworzyć wysoce spersonalizowane aplikacje wykorzystujące lokalizację, korzystając z funkcji geolokalizacji dostępnych w urządzeniach mobilnych. Obecnie, dzięki MobileTogether [Narzędzie do tworzenia aplikacji mobilnych, działające na różnych platformach i wykorzystujące podejście o niskim poziomie kodowania](https://www.altova.com/pl/mobiletogether) od firmy Altova, umożliwia głębokie zintegrowanie map z aplikacjami dla wszystkich popularnych platform mobilnych.

Programiści mogą integrować mapy z aplikacjami mobilnymi, dodawać specjalne znaczniki i definiować niestandardowe akcje, które są uruchamiane po kliknięciu mapy przez użytkownika. Na przykład, firma może chcieć, aby aplikacja zawierała mapę lokalizacji wszystkich oddziałów, a po kliknięciu konkretnego oddziału wyświetlała aktualny stan zapasów.

W poprzednim wpisie opisaliśmy aplikację mobilną, która umożliwia użytkownikom sprawdzanie statusu głównych amerykańskich lotnisk poprzez wybór kodu lotniska z listy rozwijanej. Alternatywną metodą byłoby zastąpienie 47 elementów listy rozwijanej znacznikami na mapie.

Spójrzmy na ten przykład.

![](/blog/images/airport_700x335.jpg)

<!--more-->

Poniższe zrzuty ekranu przedstawiają nową aplikację "Status lotniska" działającą na telefonie z systemem Android, na telefonie iPhone oraz jako aplikacja desktopowa dla systemu Windows.

[![Zintegruj mapy w aplikacjach mobilnych, zapewniając dostępność na różnych platformach](/blog/images/cross-platform-view.png)](cross-platform-view.png)

Na każdym urządzeniu mapa jest generowana przy użyciu wbudowanej aplikacji mapowej, charakterystycznej dla danego urządzenia. Użytkownicy będą automatycznie widzieć znany im styl i format na każdej platformie.

Jeśli mapa powoduje, że niektóre informacje o stanie są niewidoczne na dole ekranu, można je zobaczyć, przewijając ekran w pionie

[![Zintegruj mapy w aplikacjach mobilnych z funkcją przewijania w pionie, aby móc wyświetlić pełne informacje](/blog/images/scroll-view-android.png)](scroll-view-android.png)

Aby zintegrować mapy z aplikacjami mobilnymi, przeciągnij element mapy do aplikacji, korzystając z funkcji wizualnego układu w programie MobileTogether Designer. Możesz dostosować właściwości każdej mapy. Zrzut ekranu poniżej pokazuje fragment naszej głównej strony "Status lotniska", z oknem pomocniczym "Właściwości mapy" po prawej stronie.

[![Integruj mapy z aplikacjami mobilnymi za pomocą wizualnego narzędzia MobileTogether Designer](/blog/images/design-view.png)](design-view.png)

Dostępne typy map to: mapa ulic, mapa satelitarna lub mapa hybrydowa. Oprócz opcjonalnych przycisków powiększania, wszystkie urządzenia dotykowe obsługują przesuwanie mapy jednym palcem oraz znany gest dwoma palcami do powiększania lub pomniejszania.

Obszar mapy, który ma być wyświetlony, jest określany na podstawie listy jednego lub więcej znaczników, zdefiniowanych za pomocą wyrażenia `mt-geo-map-marker`. Każdy znacznik zawiera pola identyfikatora, tytułu i tekstu. Wartości te można odczytać po kliknięciu znacznika.

[![Integruj mapy w aplikacjach mobilnych, wykorzystując niestandardowe znaczniki mapowe](/blog/images/map-markers.png)](map-markers.png)

Kolory markerów mogą być standardowe, takie jak czerwony, zielony i niebieski, lub mogą być określone za pomocą niestandardowych kodów kolorów, jak to zrobiliśmy powyżej.

Właściwość "Viewport" określa obszar, który ma być wyświetlany na mapie, poprzez ustawienie współrzędnych górnego lewego i dolnego prawego rogu mapy. Jeśli pozostawiona jest pusta, domyślny obszar widoku będzie obejmował wszystkie zdefiniowane znaczniki oraz niewielki margines. Zdefiniowaliśmy wyrażenie określające obszar widoku z wartościami początkowymi dla większości terytorium Ameryki Północnej.

[![Wyrażenie używane w widoku mapy do ustawienia poziomu powiększenia](/blog/images/viewport-expression.png)](viewport-expression.png)

Właściwość "Akcja kontrolna" określa, co się dzieje, gdy użytkownik klika na dowolny znacznik na mapie. Nasza aplikacja odczyta nazwę znacznika, która jest trzyliterowym kodem lotniska, użyje tego kodu, aby pobrać informacje o stanie lotniska z serwisu internetowego FAA, a następnie zaktualizuje wyświetlane dane.

Nasza aplikacja oblicza nowe współrzędne obszaru widocznego, aby powiększyć widok i wyświetlić dokładną lokalizację wybranego lotniska

[![Poziom powiększenia dostosowywany w zależności od wyrażenia definiującego obszar widoku](/blog/images/map_zoom-541x1030.png)](map_zoom.png)

Sprawdź sam, jak łatwo jest zintegrować mapy w aplikacjach mobilnych. Pobierz bezpłatny program [MobileTogether Designer](https://www.altova.com/pl/mobiletogether/download), który zawiera pomoc online oraz przykładowe aplikacje. Możesz również pobrać naszą aplikację [Airport Status z GitHub](https://github.com/altova/MobileTogether-more-examples/tree/master/Web%20Services) i uruchomić ją bezpośrednio w programie Designer lub przetestować jako wersję demonstracyjną na swoim urządzeniu mobilnym.

Dowiedz się więcej o innych aplikacjach stworzonych przy użyciu MobileTogether i obejrzyj demonstracje wideo pod adresem: [https://www.altova.com/mobiletogether/demos](https://www.altova.com/pl/mobiletogether/demos)