Aplikacja znana jako Google Maps, wyprodukowana przez firmę, której nazwa została aktywowana. Jest rozwijany lub tworzony przy użyciu wektory i kody API JavaScript. Dlatego mapy znajdujące się w tej aplikacji niekoniecznie są statyczne, jak nakazuje logika.
Czasami będziemy musieli rozszerzyć te mapy, aby pokazać dodatkowe informacje na ich temat. W tym celu użyjemy wektorów, które są jedynie kształtami utworzonymi przez punkty. I jako przykład z tej okazji, Wykorzystamy je, aby dodać własne zakładki na naszej mapie.
W tym poście pokażemy Ci dostępne sposoby wykorzystania pewnych odpowiednich wektorów obecnych w API JavaScript Map Google. Jednocześnie cały proces można wykonać z komputera bez żadnych niedogodności. Jeśli interesuje Cię ten temat, zachęcamy do dalszej lektury naucz się korzystać z wektorów w Mapach Google.
Zwykle tworzone mapy z API JavaScript Mapy Google nie będą przez cały czas statyczne. Dlatego od czasu do czasu będziemy musieli rozszerzyć zakres tych map, aby wyświetlić dodatkowe informacje.
Taka informacja jest zawarte dzięki wektorom, które odpowiadają kształtom złożonym z punktów. Z kolei większość wektorów używanych przez API nazywana jest również nakładkami. Aby móc wejść do Map Google, wystarczy wyszukać je w przeglądarce przy otwartym koncie.
Dodaj znacznik do mapy w Mapach Google za pomocą jego wektorów
W celu aby móc dodać znacznik do naszej mapy, najpierw będziemy musieli dołączyć API wraz z jego stylami do wyświetlania mapy. W tym celu będziemy musieli użyć naszego poświadczenia programisty Google. Więc jeśli go nie mamy, nie będziemy w stanie przeprowadzić tej procedury.
Chociaż trochę niższy damy Ci trochę API z którego możesz korzystać sam, wystarczy, że poprowadzisz się bez pomijania ani jednego kroku, abyś mógł pomyślnie zakończyć proces.
Następnie musimy ustalić, które będą nasz zmienne światowy. Jedną z tych zmiennych trzeba będzie nazwać mapą. Natomiast pozostałe posłużą do generowania znaczników według potrzebnych nam współrzędnych.
Aby kontynuować, będziemy musieli określić funkcję inicjującą tego, jaka będzie nasza mapa. Ta funkcja inicjowania będzie zawierać opcje takie jak rodzaj podkładu pod mapę, powiększenie i współrzędne tego samego. W ten sam sposób będziemy dążyć do uzyskania identyfikatora div przez początkowych mistrzów mapy DOM E.
W ten sam sposób zbudujemy funkcja poleceń wydarzeniaMarker (). W którym zdefiniujemy zdarzenia, które wywołają funkcje odpowiedzialne za ustawienie potrzebnych nam znaczników. Ale zanim będziemy mogli zbudować te funkcje, będziemy musieli określić pewne cechy.
Będziemy musieli określić losowe wartości, które będą generowane na współrzędnych naszej mapy. Aby można je było zinterpretować za pomocą interfejsu API Google Maps JavaScript. Zrealizujemy tę akcję, stosowanie operacji arytmetycznych na współrzędnych globalnych i ich zmiennych.
Zanim przejdziesz do ostatnich kroków, bardzo ważne jest, abyś wiedział, jak możesz zobaczyć ruch w Mapach Google, na pewno wiesz co zaoszczędzi Ci wiele dyskomfortu Poza tym pomoże Ci dotrzeć tam znacznie szybciej, gdy pojawią się korki, ponieważ wskaże najszybszą trasę.
Na koniec ustawiamy znaczniki na mapie
Po zakończeniu tego będziemy budować na build funkcje dla ustaw znaczniki na mapie nad którym pracujemy. W ten sposób wykorzystamy metodę Marker, która będzie odpowiedzialna za generowanie znacznika. Oprócz wcześniej zaprogramowanej funkcji wygenerujemy w ten sposób współrzędne, na których wyświetlane jest wspomniane oznaczenie.
W tej części procedury powinniśmy wziąć to pod uwagę, aby dodać nasze własne zakładki. Ich ikony muszą znajdować się w układzie katalogów naszego projektu. Dzięki temu nie ma problemu z dodawaniem tych ikon do mapy.
Po upewnieniu się, że ikony, których będziemy używać, znajdują się w katalogu naszego projektu. Nadszedł czas na zbudowanie funkcji, przed którym zaczniemy od utworzenia tablicy zawierającej nazwy identyfikujące elementy, które mają zostać użyte.
Ikony, które zidentyfikowaliśmy, będziemy musieli ułożyć losowo. Przyznawanie dodatkowy parametr do metody Marker z którym pracowaliśmy, który będzie się nazywał ikoną. Teraz dodamy do naszego kodu element, który uruchomi mapę.
Jak dodawać znaczniki do mapy za pomocą interfejsu API javascript w Mapach Google
Mapy utworzone za pomocą API są zazwyczaj używane do wyświetlania dokładna lokalizacja firmy na portalu internetowym. Ogólnie nazywamy to punktem zainteresowania, który można przedstawić za pomocą danego wektora.
To jest znane jako „zakładka” w języku API JavaScript Map Google. Aby dowiedzieć się, jak dodać te słynne znaczniki do swojej spersonalizowanej mapy, zapraszamy do dalszej lektury.
Zanim zaczniemy od tych wskazań, chcemy polecić samouczek, w którym poznasz pełną listę wszystkich funkcji, Narzędzia, funkcje i sztuczki Map Google, dzięki czemu możesz wiedzieć, jak sobie z tym lepiej radzić.
Instrukcje dodawania własnego znacznika do mapy
- Musisz najpierw dołączyć interfejs API, aby móc wyświetlić naszą niestandardową mapę. Na tym etapie jest to niezbędne użyj danych logowania programisty Google aby poniższy przykład działał poprawnie:
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?key
=AIzaSyCWLcB8DZXZy4orffB8EBESY9fhoVEvyxw&sensor=false">
</script>
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 5; }
#mapaDiv { width: 800px; height: 500px; }
</style>
- Teraz musimy zdefiniuj zmienne globalneJedna z nich musi się nazywać „mapą”, a także szeregiem zmiennych, które posłużą do losowego tworzenia znaczników.
- Wszystko to w odniesieniu do współrzędne, które graniczą z dowolnym obszarem którym w tym przypadku będzie Madryt. W tym celu wprowadź następującą funkcję:
var mapa; var minLat = 38, maxLat = 41, minLng =-3, maxLng =-9, markerId = 1;
- Później musimy zdefiniuj funkcję inicjalizacji naszej mapy, będzie to zawierało podstawowe opcje powiększania, rodzaj bazy dla naszej mapy i współrzędne centralne, które tym razem będą współrzędne miasta Madryt.
- W tym celu musimy uzyskać ID div przez DOM, potem zaczynamy mapę i przystępujemy do zdefiniowania funkcji kontrolującej zdarzenia, które występują podczas umieszczania znaczników na naszej mapie. Później pokażemy Ci kod, który musisz wpisać:
function inicializarMapa() {
google.maps.visualRefresh = true;
var mapOptions = {
center: new google.maps.LatLng(40.41678, -3.70379),
zoom: 5,
mapTypeId: google.maps.MapTypeId.ROADMAP
};
var mapElement = document.getElementById('mapaDiv');
mapa = new google.maps.Map(mapElement, mapOptions);
eventosMarcador();
}
- Następnie dotknij utwórz funkcję „ZakładkaZdarzenia”. Który musi mieć w swojej definicji 2 zdarzenia powiązane poprzez kliknięcie zgodnie z identyfikatorem, który jest wciśnięty z 2 różnych linków. Z kolei te linki muszą wywołać dwie dodatkowe funkcje, które będą odpowiedzialne za ustawienie następujących znaczników:
function eventosMarcador() {
document.getElementById('agregar_marcador').addEventListener('click',
function(){
agregarMarcador();
});
document.getElementById('agregar_marcador_person').addEventListener
('click', function(){
agregarMarcadorPerson();
});
}
- Prawie skończyliśmy wyjaśniać proces używania wektorów w Mapach Google, niewiele zostało. Następnie, iW tym kroku, przed utworzeniem funkcje, które ustawią znaczniki powinieneś wziąć pod uwagę następujące kwestie.
- Po pierwsze, musisz praca na współrzędnych aby dostarczali nam wartości losowo w tym zakresie.
- Z kolei te współrzędne należy zinterpretować przez Google Maps Javascript API. Przeprowadzimy ten proces z operacjami na zmiennych globalnych określonych współrzędnych, w tym celu wprowadź następującą funkcję:
function crearLaLgRandom() {
var deltaLat = maxLat - minLat;
var deltaLng = maxLng - minLng;
var rndNumLat = Math.random();
var newLat = minLat + rndNumLat * deltaLat;
var rndNumLng = Math.random();
var newLng = minLng + rndNumLng * deltaLng;
return new google.maps.LatLng(newLat, newLng);
}
- Następnie możesz przystąpić do opracowywania własnych funkcji, aby zakotwiczyć znaczniki na odpowiedniej mapie. Aby to zrobić musisz użyć metody Marker W celu wygenerowania zwykłego znacznika i funkcją opisaną powyżej można wygenerować losową współrzędną, na której będzie wyświetlana mapa.
function agregarMarcador() {
var coordinate = crearLaLgRandom();
var marker = new google.maps.Marker({
position: coordinate,
map: mapa,
title: 'Marcador Aleatorio - ' + markerId
});
markerId++;
}
- Następnie, gdy masz wszystkie pożądane ikony, musisz stworzyć funkcję. Aby to zrobić, musisz utwórz tablicę z nazwami ikon i przechodzi do uruchamiania go losowo, w tym celu należy dodać parametr do metody Marker.
function agregarMarcadorPerson() {
var markerIcons = ['comics', 'videogames', 'computers', 'hotfood',
'bike_rising'];
var rndMarkerId = Math.floor(Math.random() * markerIcons.length);
var coordinate = crearLaLgRandom();
var marker = new google.maps.Marker({
position: coordinate,
map: mapa,
icon: 'img/' + markerIcons[rndMarkerId] + '.png',
title: 'Marcador Aleatorio - ' + markerId
});
markerId++;
}
- Aby sfinalizować proces korzystania z wektorów w Mapach Google, musimy wykonać następujące czynności. Po prostu musimy dodać wydarzenie, aby uruchomić mapę a następnie przystępujemy do tworzenia dwóch linków przed naszym div z identyfikatorami, które zdefiniowaliśmy dla zdarzeń, które będą wywoływać następujące funkcje
google.maps.event.addDomListener (okno, 'load’, initializeMap);
Do tej pory nasza mapa powinna być gotowa na dodaj zarówno standardowe znaczniki, jak i nasze dostosowane. Więc musimy tylko wybrać ten, który chcemy. Możemy to przetestować, dodając dowolną liczbę znaczników w losowych punktach na mapie.
Wreszcie, dzięki informacjom, które Ci przekazaliśmy, nauczyłeś się już najprostszego sposobu użyj wektorów w Mapy Google.
Przed zakończeniem prawdopodobnie miałeś wątpliwości, jak w prosty sposób umieścić współrzędne w Mapach Google, właściwie to nie jest tak skomplikowane not więc możesz przeprowadzić się przez dość specyficzny samouczek.
