Korzystanie z Radial Distance Google Maps API

Autor: Vivian Patrick
Data Utworzenia: 8 Czerwiec 2021
Data Aktualizacji: 17 Listopad 2024
Anonim
Google Maps in React - Building interactive maps
Wideo: Google Maps in React - Building interactive maps

Zawartość

Możesz dostosować mapę Google do konkretnych potrzeb odbiorców swojej witryny za pomocą interfejsu API Map Google 3.0. Jedną z metod personalizacji jest wstawienie okręgu, który pokazuje promień odległości wokół określonego miejsca. Możesz na przykład pokazać pięciokilometrowy promień wokół miejsca turystycznego, aby odwiedzający mogli zobaczyć pobliskie hotele i restauracje. Aby utworzyć promień odległości wokół lokalizacji lub punktu, użyj klasy „Circle” w Mapach Google.

Krok 1

Otwórz plik HTML i przejdź do sekcji zawierającej kod mapy Google.

Krok 2

Przewiń kod w dół, aż znajdziesz ten, który określa lokalizację znacznika. Aby łatwo znaleźć zakładkę, wyszukaj termin „google.maps.Marker” w pliku HTML.

Krok 3

Poniżej miejsca definiowania znacznika utwórz warstwę „Okrąg” i dołącz ją do niej. Na przykład wpisz:

var circleExample = nowe google.maps.Circle ({map: map

Krok 4

Dodaj promień okręgu, który będzie wokół znacznika w metrach:


var circleExample = nowe google.maps.Circle ({map: map radius: 5000

Krok 5

Utwórz kolor wypełnienia koła. Kolor definiuje się w formacie szesnastkowym. Na przykład wpisz:

var circleExample = new google.maps.Circle ({map: map radius: 5000 fillColor = #FFFFFF});

Krok 6

Skojarz lub dodaj okrąg do znacznika:

var circleExample = new google.maps.Circle ({map: map radius: 5000 fillColor = #FFFFFF}); circleExample.bindTo ('mapa', marker);

Krok 7

Zapisz mapę i przetestuj. Mapy Google pokażą białe kółko o promieniu 5000 metrów wokół lokalizacji znacznika.