Come utilizzare i vettori in Google Maps?

In questo post ti mostreremo i modi disponibili per utilizzare determinati vettori pertinenti presenti nell’API Javascript di Google Maps. A sua volta, l’intero processo può essere eseguito dal tuo PC senza alcun inconveniente. Se sei interessato a questo argomento, ti consigliamo di continuare a leggere per imparare a utilizzare i vettori in Google Maps .

Di solito, le mappe create dall’API Javascript di Google Maps non saranno sempre statiche. Pertanto, di volta in volta dovremo estendere l’ambito di queste mappe al fine di visualizzare le informazioni aggiuntive.

Questa informazione è inclusa grazie ai vettori, che corrispondono a forme composte da punti. A sua volta, la maggior parte dei vettori utilizzati dall’API vengono anche definiti overlay .

Come aggiungere marcatori alla mappa?

Le mappe create con l’API vengono generalmente utilizzate per mostrare la posizione esatta di un’azienda in un portale Web . Di solito lo chiamiamo un punto di interesse che può essere rappresentato con un vettore specifico.

Questo è noto come “segnalibro” nella lingua dell’API Javascript di Google Maps. Per sapere come aggiungere questi famosi marcatori alla tua mappa personalizzata, ti invitiamo a continuare a leggere.

Istruzioni per l’aggiunta di un indicatore personalizzato sulla mappa

  • Devi prima includere l’API per visualizzare la nostra mappa personalizzata. In questo passaggio è essenziale utilizzare le credenziali dello sviluppatore di Google in modo che il seguente esempio possa funzionare correttamente:
<script type = "text / javascript" src = "https://maps.googleapis.com/maps/api/js?key
= AIzaSyCWLcB8DZXZy4orffB8EBESY9fhoVEvyxw & sensor = false ">
</ Script>
<style type = "text / css">
			 html {altezza: 100%}
			 body {altezza: 100%; margine: 5; }
			 #mapaDiv {larghezza: 800px; altezza: 500 px; }
</ Style>

 

Come utilizzare i vettori in Google Maps? 1

  • Ora dobbiamo definire le variabili globali , una di queste deve essere chiamata “mappa” e anche un numero di variabili che verranno utilizzate per creare marcatori in modo casuale. Tutto questo rispetto alle coordinate che delimitano qualsiasi area che in questo caso sarà Madrid. Per fare ciò inserire la seguente funzione:
var map;
			 var minLat = 38,
		 		maxLat = 41,
				 minLng = -3,
				 maxLng = -9,
				 markerId = 1;
  • Successivamente dovremo definire la funzione di inizializzazione della nostra mappa , che conterrà le opzioni fondamentali per lo zoom, il tipo di base per la nostra mappa e le coordinate centrali che questa volta saranno quelle della Città di Madrid.
  • Per questo dobbiamo ottenere l’ID del div dal DOM, quindi iniziamo la mappa e procediamo a definire una funzione per controllare gli eventi che si verificano quando si localizzano i marcatori sulla nostra mappa. Successivamente ti mostreremo il codice che devi inserire:
funzione inizializza Mappa () {
 
				 google.maps.visualRefresh = true;
 
				 var mapOptions = {
						 centro: new google.maps.LatLng (40.41678, -3.70379),
			 			zoom: 5,
						 mapTypeId: google.maps.MapTypeId.ROADMAP
				 };
 
				 var mapElement = document.getElementById ('mapDiv');
				 map = new google.maps.Map (mapElement, mapOptions);
				 marcatore eventi ();
			 }
  • Quindi è tempo di elaborare una funzione “eventsMarker” . Che deve avere nella sua definizione 2 eventi legati tramite un clic in base all’ID che viene premuto da 2 collegamenti diversi. A loro volta, questi collegamenti devono chiamare due funzioni aggiuntive che saranno responsabili dell’impostazione dei seguenti marcatori:
marker eventi funzione () {
			 document.getElementById ('add_marker'). addEventListener ('click',
                         function () {
					 aggiungi Marker ();
				 });
 
				 document.getElementById ('add_marker_person'). addEventListener
                                 ('click', function () {
					 aggiungere MarkerPerson ();
		 		});
			 }

Come utilizzare i vettori in Google Maps? 2

  • Abbiamo quasi finito di spiegare il processo di utilizzo dei vettori in Google Maps, manca poco. Quindi, in questo passaggio, prima di elaborare le funzioni che stanno per impostare i marker, è necessario tenere conto di quanto segue.
  • Innanzitutto, devi lavorare sulle coordinate in modo che ci forniscano valori casuali in questo aspetto. A loro volta, queste coordinate devono essere interpretate dall’API Javascript di Google Maps. Questo processo verrà eseguito con operazioni sulle variabili globali di determinate coordinate, per questo inserire la seguente funzione:
funzione createLaLgRandom () {
				 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;
				 ritorna new google.maps.LatLng (newLat, newLng);
			 }
  • È quindi possibile procedere allo sviluppo delle proprie funzioni per ancorare i marker alla rispettiva mappa. Per fare ciò è necessario utilizzare il metodo Marker per generare un normale marker e con la funzione sopra indicata è possibile generare una coordinata casuale in cui verrà visualizzata la mappa.
funzione add Marker () {
				 var coordinate = createLaLgRandom ();
				 var marker = new google.maps.Marker ({
					 posizione: coordinata,
					 mappa: mappa,
					 titolo: 'Random Marker -' + markerId
				 });
				 markerId ++;
			 }
  • Quindi, quando hai tutte le icone desiderate, devi elaborare la funzione. Per fare ciò, devi creare un array con i nomi delle icone e procedere in modo casuale, per questo devi aggiungere un parametro al metodo Marker.
funzione add MarkerPerson () {
				 var markerIcons = ['fumetti', 'videogiochi', 'computer', 'hotfood',
                                 'Bike_rising'];
				 var rndMarkerId = Math.floor (Math.random () * markerIcons.length);
				 var coordinate = createLaLgRandom ();
				 var marker = new google.maps.Marker ({
					 posizione: coordinata,
					 mappa: mappa,
					 icona: 'img /' + markerIcons [rndMarkerId] + '.png',
					 titolo: 'Random Marker -' + markerId
				 });
				 markerId ++;
			 }

Come utilizzare i vettori in Google Maps? 3

  • Per completare la procedura su come utilizzare i vettori in Google Maps, dobbiamo procedere come segue. Basta aggiungere l’evento per avviare la mappa e quindi procedere alla creazione di due collegamenti prima del nostro div con gli ID che abbiamo definito per gli eventi che chiameranno le seguenti funzioni

google.maps.event.addDomListener (finestra, ‘carica’, inizializza mappa);

google.maps.event.addDomListener (finestra, 'carica', inizializza mappa);
	 </ Script>
</ Head>
<Body>
	 <b> Aggiungi segnalibri </b> <br/>
	 <br/>
	 <a id="add_marker" href="#"> Aggiungi segnalibro </a>
	 |
	 <a id="add_marker_person" href="#"> Aggiungi segnalibro personalizzato </a>
	 <div id = "mapDiv"> </div>
</ Body>
</ Html>

Infine, con le informazioni che ti abbiamo fornito, hai già imparato il modo più semplice di utilizzare i vettori in Google Maps .

 

Potrebbe interessarti

Lascia un commento