V tomto článku vám ukážeme dostupné způsoby, jak používat určité související vektory nalezené v rozhraní API Google Maps Javascript. Celý proces lze zase provést z vašeho PC bez jakýchkoli nepříjemností. Pokud vás toto téma zajímá, doporučujeme vám přečíst si další informace. Použijte vektory v Mapách Google.
Obecně platí, že mapy vytvořené z API Javascript Mapy Google nebudou vždy stabilní. Proto budeme muset tyto mapy čas od času rozšířit, abychom zobrazili další informace.
Tato informace je zahrnuta díky vektorům odpovídajícím tvarům složeným z bodů. Naproti tomu je také většina vektorů používaných API překryvy.
Jak přidat značky na mapu?
Mapy vytvořené pomocí API jsou obvykle zobrazit přesné umístění společnosti na webovém portálu. Obecně tomu říkáme bod zájmu, který může být reprezentován konkrétním vektorem.
Toto se v jazyce API služby Mapy Google Javascript nazývá „ukazatel“. Zveme vás, abyste pokračovali ve čtení a dozvěděli se, jak přidat tyto slavné značky na svou přizpůsobenou mapu.
Pokyny pro přidání vlastní značky na mapu
- Chcete-li zobrazit naši vlastní mapu, musíte nejprve přidat API. V tomto kroku Je důležité použít přihlašovací údaje pro vývojáře Google takže následující příklad může fungovat správně:
<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>
- Měli bychom to udělat hned definovat globální proměnnéJeden z nich by se měl nazývat „mapa“ a měl by to být také soubor proměnných, které budou použity k náhodnému generování značek. To vše ve vztahu k souřadnicím hraničícím s jakoukoli oblastí, kterou by v tomto případě byl Madrid. Chcete-li to provést, zadejte následující funkci:
var mapa; var minLat = 38, maxLat = 41, minLng =-3, maxLng =-9, markerId = 1;
- Měli bychom to udělat později Definujte funkci spuštění naší mapyTo bude zahrnovat základní možnosti zvětšení, základní typ naší mapy a centrální souřadnice, které tentokrát budou souřadnice města Madrid.
- K tomu musíme získat ID div ze strany DOM, pak začneme mapu Pokračujeme v definování funkce pro řízení událostí, ke kterým dochází při umísťování a značek na naší mapě. Dále vám ukážeme kód, který musíte zadat:
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();
}
- Pak je čas rozpracovat funkci „EventsMarcador“. V jeho definici by měly být 2 události spojené jedním kliknutím podle ID vytištěného ze 2 různých odkazů. Tyto odkazy by zase měly volat dvě další funkce, které budou odpovědné za nastavení následujících ukazatelů:
function eventosMarcador() {
document.getElementById('agregar_marcador').addEventListener('click',
function(){
agregarMarcador();
});
document.getElementById('agregar_marcador_person').addEventListener
('click', function(){
agregarMarcadorPerson();
});
}
- Proces je téměř hotový Použijte vektory v Mapách Google, zbývá málo. Pak eV tomto kroku byste měli zvážit následující před vývojem funkce pro nastavení ukazatelů.
- Nejprve musíte pracovat na souřadnicích takže nám v tomto ohledu poskytují náhodné hodnoty. Tyto souřadnice musí být následně interpretovány rozhraním Javascript API služby Google Maps. Tuto operaci provedeme operacemi na globálních proměnných určitých souřadnic, k tomu zadejte následující funkci:
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);
}
- Poté můžete pokračovat ve vývoji svých vlastních funkcí pro připnutí značek na odpovídající mapu. Chcete-li to provést, musíte použít metodu Popisovač Chcete-li vytvořit běžnou značku a pomocí výše uvedené funkce můžete vytvořit náhodnou souřadnici, na které se zobrazí mapa.
function agregarMarcador() {
var coordinate = crearLaLgRandom();
var marker = new google.maps.Marker({
position: coordinate,
map: mapa,
title: 'Marcador Aleatorio - ' + markerId
});
markerId++;
}
- Poté, co budete mít všechny požadované ikony, musíte vylepšit funkčnost. Udělat to tak, musíte vytvořit pole se jmény ikon a běží dále náhodně, k tomu je třeba přidat 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++;
}
- Dokončit proces Jak používat vektory v Google Maps, musíme udělat následující. Chcete-li spustit mapu, stačí přidat událost a poté pokračujeme ve vytváření dvou odkazů před naším divem s ID, která jsme definovali pro události, které budou volat níže uvedené funkce.
google.maps.event.addDomListener (okno, ‘načíst’, 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>
A konečně, s informacemi, které jsme vám poskytli, jste se již naučili nejjednodušším způsobem. pomocí vektorů Google mapy.
