Obsah
The Google Maps Javascript API Je extrémně výkonný, protože umožňuje nejen vytváření map jako takových, ale můžeme jít ještě o krok dále tím, že rozšíříme jeho funkce a pomocí vektorů přidáme body zájmu, rozevírací okna, čáry a simulaci tras.Další ze silných stránek map, které implementujeme a pokud jsme někdy pracovali s Javascriptem, jsou Události, které jsou jádrem jazyka a mají na starosti správu interakce uživatele s webem, v tomto konkrétním případě interakci s naší mapou.
Předtím, než půjdeme do praxe, musíme nejprve znát některou teorii událostí, které zpracovává API, používá to obor názvů google.maps.event pracovat s nimi. Má statické metody k naslouchání událostem definovaným v rozhraní API a řadiči addListener () zaregistrovat je.
Když to víme, podívejme se na některé z nejdůležitějších událostí dostupných v API a které budeme v našich příkladech používat:
center_changedTato událost se spustí, když se změní vlastnost středu mapy.
klikněteTato událost se spustí, když uživatel klikne na mapu, je důležité zmínit, že vylučuje kliknutí na značky nebo informační okna.
táhnoutTato událost se spouští opakovaně, když uživatel přetáhne mapu.
odstranit myšTato událost se spustí, když uživatel přesune myš kamkoli v kontejneru mapy.
klikněte pravým tlačítkem myšiTato událost se spustí při spuštění události místní nabídky DOM.
zoom_changedTato událost se spustí, když se změní vlastnost zvětšení mapy.
Je důležité zmínit, že ačkoli tyto události mohou vypadat jako standardní události SLUNCE nejsou, jsou součástí Google Maps API. Tím se vyhnete problému, kdy prohlížeče zpracovávají různé typy událostí pro SLUNCE.
Když už jsem viděl události, které nejvíce využívají API Pojďme si procvičit, abychom předvedli jejich použití při tvorbě našich map, první příklad tohoto tutoriálu bude zaměřen na události související se změnou vlastností mapy, což nám umožní získat funkce synchronizované mapy, tj. , mají mapy s různými základnami, které zobrazují stejné informace bez ohledu na změny v jejich středu nebo v jejich přiblížení.
Podívejme se na kroky, které musíme dodržet, abychom tohoto cíle dosáhli:
1- Nejprve vytvoříme nový soubor, který zavoláme synchronized_maps.html a provádíme zahrnutí API spolu se styly, které bude mít kontejner našich map, je důležité definovat globální proměnné map, protože je budeme muset používat v celém rozsahu programu:
var mapa1, mapa2;
2- Jak jsme již zmínili, budeme synchronizovat dvě mapy s různými základnami, proto musíme vytvořit dvě funkce, které je inicializují. Tyto funkce budou docela podobné těm, které jsme zvládli v minulých výukových programech, ale budou mít zpracování událostí k dosažení funkce synchronizace, podívejme se na kód první funkce:
funkce initializeMap1 () {var mapOptions = {střed: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ('divmap'); map1 = nový google.maps.Map (mapElement, mapOptions); google.maps.event.addListener (mapa1, 'center_changed', function () {map2.setCenter (map1.getCenter ());}); google.maps.event.addListener (map1, 'zoom_changed', function () {map2.setZoom (map1.getZoom ());}); } Jak vidíme, máme jako obvykle možnosti naší mapy pro definování středu, zoomu a základny, což je v tomto případě ROADMAP, pak nastavíme možnosti naší mapy a nakonec naše události, které jsou zodpovědné za získání hodnot vlastností mapy číslo 1 a jejich nastavení na mapě číslo 2, k tomu použijeme události z center_changed Y zoom_changed to je to, co nám umožňuje synchronizovat.
3- Poté musíme vytvořit naši funkci pro inicializaci druhé mapy, kód je podobný předchozímu, události se však spustí z mapy číslo 2 na číslo 1 a základna bude HYBRIDNÍ ukázat rozdíl mezi oběma:
funkce initializeMap2 () {var mapOptions2 = {center: new google.maps.LatLng (40.41678, -3.70379), zoom: 10, mapTypeId: google.maps.MapTypeId.HYBRID}; var mapElement2 = document.getElementById ('mapDiv2'); map2 = nový google.maps.Map (mapElement2, mapOptions2); google.maps.event.addListener (mapa2, 'center_changed', function () {setTimeout (function () {map1.setCenter (map2.getCenter ());}, 10);}); google.maps.event.addListener (map2, 'zoom_changed', function () {setTimeout (function () {map1.setZoom (map2.getZoom ());}, 10);}); } 4- Nakonec vytvoříme funkci pro instanci map, která nám umožní vytvořit instanci obou, stavíme naše HTML a dali jsme stejnou třídu divům, které budou obsahovat naše mapy:
funkce initializeMaps () {initializeMap1 (); initializeMap2 (); } google.maps.event.addDomListener (okno, 'načíst', initializeMaps); Synchronizované mapy
Podívejme se, jak vypadají naše synchronizované mapy, když spustíme cvičení v prohlížeči:
ZVĚTŠIT
ZVĚTŠIT
1- Vytvoříme nový soubor s názvem get_coordinates.html a zahrneme naše API spolu se styly:
2- Poté vytvoříme funkci initializeMap () jako obvykle, ale toto bude mít něco jiného a je to definice události klikněte v addListener spolu s implementací dialogu, který nám poskytne informace o zeměpisné šířce a délce místa, kam klikneme, se podíváme:
google.maps.event.addListener (mapa, 'kliknutí', funkce (e) {if (infowindow! = null) infowindow.close (); infowindow = nové google.maps.InfoWindow ({content: 'Souřadnice myši:
Zeměpisná šířka: ' + e.latLng.lat () +'
Délka: '+ e.latLng.lng (), pozice: e.latLng}); infowindow.open (mapa); }); 3- Konečně stavíme naše HTML a definujeme náš kontejner pro mapu:
Získání souřadnic kliknutím myši
Když je náš kód hotový, podívejme se, jak naše mapa vypadá v našem prohlížeči, když na ni klikneme a zobrazí se informace o zeměpisné šířce a délce tohoto bodu:
ZVĚTŠIT
1- Zahrnujeme naše API a vytváříme naše styly pro naši mapu a pro ovládání, které bude mít na starosti zobrazování informací o zeměpisné šířce a délce:
2- Vytváříme naši funkci initializeMap () stejně jako v předchozích cvičeních a definujeme parametry pro naši kontrolu, kde ji inicializujeme souřadnicemi 0.00 / 0.00:
var controlDiv = document.createElement ('div'); controlDiv.className = 'mapControl'; controlDiv.id = 'mapCoordinates'; controlDiv.innerHTML = 'Šířka / Délka: 0,00 / 0,00'; 3- Poté musíme vytvořit ovládací prvek a přidat jej na naši mapu, uděláme to pomocí google.controls, kde můžeme určit polohu, ve které bude, v tomto případě použijeme RIGHT_BOTTOM což odpovídá v pravé dolní části a kontejneru, kde se zobrazí:
map.controls [google.maps.ControlPosition.RIGHT_BOTTOM] .push (controlDiv);
4- Nakonec definujeme naši událost, která bude typu odstranit myš a vloží text do kontroly informací, které získáme:
google.maps.event.addListener (mapa, 'mousemove', funkce (e) {var coordinateText = 'Lat / Lng:' + e.latLng.lat (). toFixed (6) + ' /' + e.latLng. lng (). toFixed (6); controlDiv.innerHTML = coordinateText;}); Podívejme se, jak vypadá naše mapa pomocí ovládacího prvku pro získání informací o zeměpisné šířce a délce:
ZVĚTŠIT
1- Vytvoříme soubor s názvem menu_contextual.html a zahrnujeme Google Maps Javascript API, také vytváříme styly pro naši mapu a kontextové menu:
2- Před vytvořením naší funkce initializeMap () Musíme provést několik dalších kroků, jedním z nich je vytvoření funkce pro definování třídy pro kontextovou nabídku, podívejme se:
funkce menuContextual (mapa) {this.setMap (mapa); this.map = mapa; this.mapDiv = map.getDiv (); this.menuDiv = null; }; 3- Jakmile to bude hotové, musíme vytvořit možnosti pro naši kontextovou nabídku a přidat událost, která při výběru spustí každou z nich, což, jak si představíme, bude klikněte:
menuContextual.prototype = nový google.maps.OverlayView (); menuContextual.prototype.draw = funkce () {}; menuContextual.prototype.onAdd = funkce () {var that = this; this.menuDiv = document.createElement ('div'); this.menuDiv.className = 'contextmenu'; this.menuDiv.innerHTML = 'Vytvořit záložku
Zvětšení
Zrušit zvětšení
'; this.getPanes (). floatPane.appendChild (this.menuDiv); google.maps.event.addListener (this.map, 'click', function (mouseEvent) {that.hide ();}); }; 4- Abychom skončili s naší kontextovou nabídkou, stačí přidat akce zobrazit a skrýt, podívejme se, jak naše část kódu vypadá takto:
menuContextual.prototype.show = funkce (coord) {var proj = this.getProjection (); var mouseCoords = proj.fromLatLngToDivPixel (coord); var left = Math.floor (mouseCoords.x); var top = Math.floor (mouseCoords.y); this.menuDiv.style.display = 'block'; this.menuDiv.style.left = left + 'px'; this.menuDiv.style.top = top + 'px'; this.menuDiv.style.visibility = 'viditelné'; }; menuContextual.prototype.hide = funkce (x, y) {this.menuDiv.style.visibility = 'skrytý'; } 5- Když jsme skončili s naší kontextovou nabídkou, stačí naprogramovat funkce pro možnosti v naší nabídce, kterými jsou přiblížení, zrušení zvětšení a umístění značky:
funkce doZoom () {map.setZoom (map.getZoom () + 1); } funkce undoZoom () {map.setZoom (map.getZoom () - 1); } function createMarker () {var marker = new google.maps.Marker ({position: lastCoordinate, map: map, title: 'Random Marker'}); } 6- Nakonec inicializujeme naši mapu, kde je důležité vytvořit kontextové menu pro naši mapu a definujte hlavní událost klikněte pravým tlačítkem myši které se spustí po kliknutí pravým tlačítkem myši:
contextMenu = nové menuContextual (mapa); google.maps.event.addListener (mapa, 'pravé kliknutí', funkce (e) {lastCoordinate = e.latLng; contextMenu.show (e.latLng);}); 7- Vytváříme naše HTML běžným způsobem a spusťte náš příklad, podívejme se, jak vypadá naše kontextové menu, když klikneme pravým tlačítkem na naši mapu:
ZVĚTŠIT
ZVĚTŠIT
