Jak możemy się upewnić, że możemy wybrać miejsce?
W widoku mapy na ekranie mapy możesz dodać moduł obsługi onPress, który uruchamia się za każdym razem, gdy
stukniesz
gdzieś na mapie, a tym samym nie mam na myśli stuknięć podczas przewijania, ale gdy
stukniesz tam bez przewijania, więc jeśli naprawdę chcę coś wybrać. To wtedy uruchomi się i dlatego może być
powiązane z funkcją, którą tu zdefiniuję, która powinna przechowywać wybrane miejsce.
Więc tutaj będę miał moją funkcję obsługi położenia, która pobiera obiekt zdarzenia i to właśnie
tutaj wiążę z onPress.
Teraz możemy przyjrzeć się temu wydarzeniu, aby dowiedzieć się, co tam jest, jakie dane otrzymujemy.
Więc pozwól mi to
zapisać i przetestować, przejdźmy do mapy, a następnie, gdy zostanie załadowana, po prostu dotknij gdzieś na mapie, jak tutaj.
Jeśli teraz wrócimy, otrzymam dane wyjściowe, a tam zobaczysz, że jest to dość duży obiekt, w
końcu otrzymujemy garść danych, których tak naprawdę nie potrzebujemy,
to tutaj jest syntetyczne wydarzenie.
To, co mamy, jest interesujące, to natywna właściwość zdarzenia, która jest kolejnym obiektem, który ma właściwość współrzędnych,
która jest jeszcze innym obiektem, który ma szerokość i długość geograficzną.
W końcu interesujemy się tym, właśnie
to, chcemy się dowiedzieć, to
jest para
współrzędnych, którą chcemy uzyskać.
Więc to jest miejsce, współrzędne, które wybrał użytkownik, to jest
to, co chcę tutaj przechowywać i dobrze byłoby na początku dodać znacznik w tym miejscu, aby zaznaczyć
to miejsce na mapie. W tym
celu możemy oczywiście użyć stanu, aby zapisać to wybrane miejsce i komponent, a następnie
zainicjować to tutaj i mieć naszą wybraną lokalizację i
ustawić wybraną lokalizację za pomocą stanu użycia. Początkowo jest pusty, początkowo nie mamy wybranej lokalizacji,
a następnie możemy
utworzyć znacznik tutaj, jeśli go mamy. W tym celu możemy zaimportować komponent znacznika z map natywnych,
dodając tutaj niektóre nazwane importy oprócz tego domyślnego importu, a także możemy zaimportować znacznik z map React Native, jest
to tak proste i możemy wyrenderować ten znacznik, dodając go między otwieranie i zamykanie tagów widoku mapy,
których teraz
potrzebujemy, abyśmy mogli tutaj dodać znacznik.
Teraz ten znacznik wymaga pewnej konfiguracji, w przeciwnym razie React
Native mapy nie wiedzą, gdzie go pokazać. Możemy na przykład dodać
tytuł, wybraną lokalizację, ale co ważniejsze, możesz tutaj dodać współrzędną rekwizyt, który
spodziewa się uzyskać obiekt o szerokości i długości geograficznej. Więc tutaj dodam nową zmienną, powiedzmy współrzędne znacznika, a jeśli mam wybraną lokalizację i to jest
stan, którym tam zarządzam, jeśli ją mam, to chcę ustawić współrzędne znacznika równe obiektowi, w którym musisz
mieć szerokość geograficzną o nazwie szerokość geograficzna, więc nie jest to szerokość
geograficzna, musi
to być szerokość geograficzna, ponieważ składnik znacznika będzie szukał właściwości o
nazwie szerokość geograficzna i może to być wybrana
lokalizacja. lat
powiedzmy, że to od nas zależy, jak to wtedy uratujemy, nie robimy tego teraz, ale później
zapiszę tak, że mamy tam łopatę i długość geograficzną, którą należy nazwać w ten sposób, która może
utrzymać wartość przechowywane w selectedLocation. lng.
Teraz współrzędne znacznika są warunkowo ustawione i tutaj możemy teraz sprawdzić, czy warunki znacznika istnieją, a
jeśli tak, używamy tego skrótu, aby również wyświetlić znacznik tutaj. Teraz współrzędne znaczników są również tym, w czym możemy
się tutaj karmić i
pamiętaj, że to współrzędne, a nie współrzędne, to tylko współrzędne.
W tym momencie są to nasze współrzędne znaczników, a teraz musimy tylko upewnić się, że ostatecznie ustaliliśmy wybraną lokalizację i oczywiście
chcę to zrobić
tutaj w moim wybranym module obsługi lokalizacji. Tam chcę zadzwonić ustaw
wybraną lokalizację, aby ustawić mój stan, przekazać tam obiekt i ustawić mój stan na obiekt
za pomocą klucza lat, ponieważ próbuję wyodrębnić tam lat zdarzenia. nativeEvent, jak widzieliście, tam była ta właściwość współrzędnych,
która ma właściwość szerokości geograficznej, a następnie lng, którą również wyodrębniam, powinna być
ustawiona na zdarzenie. nativeEvent. współrzędne długość geograficzna. Dzięki temu kodowi powinniśmy być
w stanie wyświetlić znacznik na mapie. Spróbujmy więc, przejdźmy do iOS,
wczytaj mapę i wybierz
miejsce, a
my zobaczymy znacznik w miejscu, w którym klikam. Mam nadzieję, że to samo
na Androidzie, spróbujmy tam, otwórz mapę i rzeczywiście tam, gdzie
stukam,
również tam umieszczam swój znacznik.
Tak więc możemy pracować ze znacznikami i wybierać miejsca, to
wszystko jest miłe.
Teraz ostatecznie chcę mieć możliwość kliknięcia przycisku Zapisz, który jeszcze tam nie
istnieje, który następnie zamyka tę mapę i ostatecznie przesyła wybraną lokalizację z powrotem do mojego nowego ekranu miejsca,
tak, który mam tutaj także. Chcę wrócić do tego ekranu i oczywiście zapisać wybraną
lokalizację.