contador php Skip to content

Hur vektorer används i Google Maps

I den här artikeln visar vi tillgängliga sätt att använda vissa relaterade vektorer som finns i Google Maps Javascript API. I sin tur kan hela processen göras från din dator utan besvär. Om du är intresserad av detta ämne, föreslår vi att du läser vidare för att lära dig hur. Använd vektorer i Google Maps.

Generellt skapas kartor från API: et Javascript Google Maps är inte alltid stabilt. Därför måste vi utvidga kartornas omfattning då och då för att se extra information.

Denna information ingår tack vare de vektorer som motsvarar de former som består av punkter. Däremot är de flesta vektorerna som används av API: et också överlägg.

Hur lägger jag till markörer på kartan?

Kartor skapade med API är vanligtvis visa ett företags exakta plats på en webbportal. Generellt kallar vi detta en intressepunkt som kan representeras av en viss vektor.

Detta är känt som en “pekare” på Google Maps Javascript API-språk. Vi inbjuder dig att fortsätta läsa för att lära dig hur du lägger till dessa kända landmärken på din personliga karta.

Instruktioner för att lägga till en anpassad markör på kartan

  • Innan du kan visa vår anpassade karta måste du lägga till API: et. I detta steg Det är viktigt att använda Googles utvecklingsuppgifter så att följande exempel kan fungera ordentligt:
<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>

  • Vi borde göra det nu definiera globala variablerEn av dem ska kallas en “karta” och bör också vara en uppsättning variabler som kommer att användas för att slumpmässigt generera markörer. Allt detta i förhållande till koordinaterna som gränsar till något område som i detta fall skulle vara Madrid. För att göra detta, ange följande funktion:
var mapa;
			 var minLat = 38,
		 		maxLat = 41,
				 minLng =-3,
				 maxLng =-9,
				 markerId = 1;
  • Vi borde göra det senare Definiera lanseringsfunktionen på vår kartaDetta kommer att inkludera de grundläggande alternativen för zoomning, bastypen för vår karta och de centrala koordinaterna som den här gången kommer att vara i Madrid.
  • För detta måste vi få div id från DOM-sidan, sedan startar vi kartan Vi fortsätter att definiera en funktion för att kontrollera händelser som inträffar när vi placerar och markerar på vår karta. Därefter visar vi dig koden du behöver ange:
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();
			 }
  • Då är det dags att utarbeta en funktion “EventsMarcador”. I sin definition bör det finnas två händelser länkade med ett klick, enligt ID som skrivs ut från två olika länkar. I sin tur bör dessa länkar anropa ytterligare två funktioner som ansvarar för att ställa in följande pekare:
function eventosMarcador() {
			 document.getElementById('agregar_marcador').addEventListener('click',
                         function(){
					 agregarMarcador();
				 });
 
				 document.getElementById('agregar_marcador_person').addEventListener
                                 ('click', function(){
					 agregarMarcadorPerson();
		 		});
			 }

  • Vi är nästan klara med att förklara processen Använd vektorer i Google Maps, det finns lite kvar. Sedan eI det här steget bör du överväga följande innan du utvecklar funktionaliteten för att ställa in pekare.
  • Först måste du arbeta med koordinaterna så de ger oss slumpmässiga värden i detta avseende. I sin tur måste dessa koordinater tolkas av Google Maps Javascript API. Vi kommer att utföra denna operation genom operationer på globala variabler för vissa koordinater, för detta ange följande funktion:
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);
			 }
  • Du kan sedan fortsätta att utveckla dina egna funktioner för att fästa markörerna till motsvarande karta. För att göra detta måste du använda metoden Markör För att skapa en vanlig markör och med den ovan nämnda funktionen kan du skapa en slumpmässig koordinat som kartan visas på.
function agregarMarcador() {
				 var coordinate = crearLaLgRandom();
				 var marker = new google.maps.Marker({
					 position: coordinate,
					 map: mapa,
					 title: 'Marcador Aleatorio - ' + markerId
				 });
				 markerId++;
			 }
  • Sedan, när du har alla ikoner du vill, måste du förbättra funktionaliteten. Att göra så, du måste skapa en matris med namnen på ikonerna och det fortsätter att köras slumpmässigt, för detta måste du lägga till en parameter i Marker-metoden.
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++;
			 }

  • För att avsluta processen Hur man använder vektorer i Google Maps, vi måste göra följande. För att starta kartan behöver vi bara lägga till händelsen och sedan fortsätter vi att skapa två länkar före vår div med ID: n som vi har definierat för de händelser som kommer att kalla funktionerna nedan.

google.maps.event.addDomListener (fönster, ‘load’, initializeMap);

google.maps.event.addDomListener(window, 'load', inicializarMapa);
	 </script>
</head>
<body>
	 <b>Agregar marcadores</b><br/>
	 <br/>
	 <a id="agregar_marcador" href="https://miracomohacerlo.com/utilizar-vectores-google-maps/#">Agregar Marcador</a>
	 |
	 <a id="agregar_marcador_person" href="https://miracomohacerlo.com/utilizar-vectores-google-maps/#">Agregar Marcador Personalizado</a>
	 <div id="mapaDiv"></div>
</body>
</html>

Slutligen, med den information vi har gett dig, har du redan lärt dig det enklaste sättet. med hjälp av vektorer Google kartor.