Jak wyświetlić pozycje skanowania na mapie?

Jak wyświetlić pozycje skanowania na mapie?

Wyświetl na mapie lokalizacje, w których zeskanowano kody QR.

book reader icon
3 Minuty
facebook logo gray
linkedin logo gray
mail logo gray

Przesyłanie pozycji skanowania za pomocą GPS

Po aktywowaniu funkcji śledzenia GPS kodów QR osoby skanujące kody QR są pytane, czy chcą przesłać swoją pozycję GPS. Jeśli zezwolą na wysłanie swojej lokalizacji, przechowujemy wartość lng/lat, której mozna uzyć do renderowania lokalizacji skanowania na mapie. Ponizszy samouczek wyjaśnia, w jaki sposób mozna uzyć naszego widzetu QR Map, aby osadzić go na swojej stronie internetowej i pokazać lokalizacje skanowania uzytkowników.

Warunki wstępne

Aby osadzić mapę w witrynie, wymagane jest aktywne konto, wazny klucz API i klucz API Map Google. Klucz API Google Maps nalezy ustawić w ustawieniach uzytkownika lub w sekcji brandingu konta, aby mapa mogła być renderowana.

Jak utworzyć mapę pokazującą lokalizacje skanowania kodów QR?

1. Dodaj skrypt do swojej strony

Wstaw ponizszy skrypt z subdomeną i kluczem API na swojej stronie internetowej. Uwaga: Uzyj klucza API swojego konta, a NIE klucza API Map Google.

<script 
    type="text/javascript" 
    src="//YOUR_SUBDOMAIN.qrplanet.com/widgets/tagmap.js?apikey=***************">
</script>

2. Utwórz warstwę div, w której zostanie osadzona mapa.

Umieść <div> na stronie, na której ma być wyświetlana mapa:

<div style="width:100%;height:500px;" id="map_canvas"></div>

3. Dodaj opcjonalne parametry wizualizacji

  • parametr lng / lat wyśrodkuje mapę na podanej pozycji
  • zoom - wyśrodkowanie mapy przy danym poziomie powiększenia min=1 | max=12
  • showlabels - Jeśli ustawisz na 0, po najechaniu na pinezkę nie będzie wyświetlana zadna etykieta.
  • displayinfoonclick - Jeśli ustawione na 0, zadne informacje nie będą wyświetlane po kliknięciu ikony.
tagmap.js? ... &lng=16.3691234&lat=48.2055264&zoom=12

4. Wyświetlanie pozycji skanowania

Jeśli chcesz wyświetlić, gdzie został zeskanowany pojedynczy kod QR z aktywną funkcją GPS, wystarczy dodać opcjonalny parametr id w adresie URL skryptu i ustawić wartość na identyfikator jednego z utworzonych kodów QR. Identyfikator kodu QR to skrócony adres URL np. 7W. Zamiast pokazywać geoznaczone kody QR, które są przypisane do stałej lokalizacji, lokalizacje skanowania pojedynczego kodu QR są wyświetlane na mapie.

tagmap.js? ... &id=7W

Jeśli chcesz wyświetlić więcej niz jeden kod QR z pozycją GPS na mapie, po prostu dodaj wiele identyfikatorów oddzielonych znakiem +.

tagmap.js? ... &id=7W+SECONDID+THIRDID+...+N_TH-ID

5. Ustaw zakres czasu dla czasów skanowania

Statystyki mozna precyzyjnie dostroić, dodając parametr zakresu czasu:

  • ustawić określony przedział od - do daty: np. &from=%%%YEAR%%02-24&to=%%%YEAR%%02-24
  • lub ustawić predefiniowany zakres: dzisiaj, wczoraj, last7, last31 np. &range=today

6. Ustaw limit skanów na kod QR

Mozna ograniczyć liczbę pozycji skanowania GPS wyświetlanych na mapie, ustawiając parametr limitu dla kazdego kodu QR oddzielonego znakiem +.

Jeśli limit jest ustawiony na 1, wyświetlony zostanie ostatni skan kodu QR.

tagmap.js? ... &limit=3+2+10

7. Styl mapy QR

Zamiast uzywać domyślnych ikon kodu QR, mozesz uzyć niestandardowego symbolu/ikony. Zawsze ustaw bezwzględny adres URL jako opcjonalny parametr ikony

tagmap.js? ... &icon=https://qr.domain.com/img/littleone.png

Jeśli wyświetlasz wiele kodów QR =przekazując więcej niz jeden identyfikator do parametru id, mozesz ustawić inną ikonę dla kazdego kodu QR, dodając wiele adresów URL ikon oddzielonych znakiem +.

tagmap.js? ... &icon=https://qr.domain.com/img/littleone.png+
http://icon.com/img/anotherone.png

8. Narysuj ściezkę na mapie między lokalizacjami skanowania

Z opcjonalnym parametrem drawpath ustawionym na true, zostanie narysowana ściezka pomiędzy zeskanowanymi pozycjami kodu QR.

tagmap.js? ... &drawpath=true

Debugowanie

Mapa nie jest wyświetlana

Otwórz konsolę błędów w przeglądarce. Konsola pokazuje więcej informacji o błędzie.

Jeśli mapa nie jest wyświetlana na Twojej stronie, moze to wynikać z faktu, ze Goolge wymaga klucza API. Upewnij się najpierw, ze zaimplementowałeś widzet w sposób opisany powyzej.

Jeśli przeglądarka wyświetla komunikat ostrzegawczy Google, jak pokazano ponizej, nalezy uzyskać klucz API od Google i dodać go w ustawieniach uzytkownika.
Google Maps API warning: NoApiKeys https://developers.google.com/maps/documentation/javascript/error-messages#no-api-keys

Prywatność danych

Pozycja GPS jest wyświetlana na mapie tylko wtedy, gdy uzytkownik wyraził zgodę na geolokalizację lub pozycja jest pobierana za pośrednictwem adresu IP, a anonimizacja IP jest inna niz "Nie przechowuj w ogóle unikalnych odwiedzających".

QR Map Widget Demo

Zobacz TagMap Widget w akcji pokazujący pozycje skanowania kodów QR przesłanych przez GPS.

Ostatnia aktualizacja 18 hours ago