Confruntat cu implementarea și personalizarea pentru prima dată Hărți Google, nu am găsit nici un articol care să ia în considerare toate punctele necesare - a trebuit să caut informații puțin câte puțin, dar să inventez eu ceva. După aceea, s-a decis să scriem acest articol, astfel încât persoanele care nu lucraseră anterior cu stilul Google Maps, dar în același timp limitate de intervalul de timp (sau poate de dorința) pentru un studiu complet al API-ului, să poată obține rapid informatiile si materialele necesare. Mai mult, cei care au ceva experiență vor putea învăța din acest articol un truc interesant, de exemplu, paralaxa pentru elementele ferestrei de informații.
În acest articol, ne vom uita la:
1. Implementarea Google Maps pe site
Adăugarea prin inserarea unui iframe în markup
Dacă nu trebuie să schimbați marcatorul, să faceți o fereastră de informații personalizată sau să afectați harta în vreun fel, pentru a o adăuga, faceți următoarele:
Adăugarea prin API
Dar dacă este necesar să facem orice manipulări, avem nevoie de o cheie. Dacă nu este în apropiere, îl puteți obține aici: link
Îl încorporăm în adresă în loc de YOUR_API_KEY:
Dacă trebuie să apelați înapoi după încărcarea API-ului, după cheie va trebui să adăugați YOUR_API_KEY&callback=initMap cu numele funcției dvs. Conectam scriptul pe pagină și creăm un bloc pentru harta viitoare în marcaj:
Funcția initMap() ( var coordonate = (lat: 47.212325, lng: 38.933663), map = new google.maps.Map(document.getElementById("map"), ( center: coordonates )); )
Coordonatele pot fi găsite folosind opțiunea „Ce este aici” descrisă mai sus.
Proprietăți care pot fi necesare imediat:
Inițializarea markerului
Să începem prin a adăuga un marker:
Funcția initMap() ( var coordonate = (lat: 47.212325, lng: 38.933663), map = new google.maps.Map(document.getElementById("map"), ( center: coordonates )), marker = new google.maps. Marker(( poziție: coordonate, hartă: hartă )); )
poziție (obligatoriu) specifică poziția de pornire a markerului. Dacă specificați aceleași coordonate ca și pentru hartă, atunci marcatorul va fi în centrul ecranului. Puteți muta marcatorul schimbând valoarea coordonatelor sau schimbând poziția hărții în sine față de zona vizibilă (blocul părinte).
harta (opțional) specifică harta pe care este plasat marcatorul.
Animație marker
Animația poate fi setată pentru marcator:
Un exemplu de animație a marcajului când fereastra de informații este închisă și se încheie când este deschisă:
Google.maps.event.addListener(infowindow,"closeclick",function()( marker.setAnimation(google.maps.Animation.BOUNCE); )); marker.addListener("click", function () ( marker.setAnimation(null); ));
Imagine marker
Imaginea marcatorului poate fi schimbată prin setarea adresei imaginii pentru proprietatea pictogramei.
Imagine = "images/marker.png", marker = nou google.maps.Marker(( poziție: coordonate, hartă: hartă, pictogramă: imagine ));
3. Personalizarea ferestrei de informații
Adăugarea unei ferestre de informații
Puteți adăuga orice markup la o fereastră de informații personalizată prin proprietatea conținutului:
Funcția initMap() (var coordonate = (lat: 47.212325, lng: 38.933663), popupContent = "
Orice
", markerImage = "images/marker.png", map = new google.maps.Map(document.getElementById("map"), ( center: (lat: 47.212325, lng: 38.933663) )), marker = new google. maps.Marker(( poziție: coordonate, hartă: hartă, pictogramă: markerImage )), infowindow = new google.maps.InfoWindow(( conținut: popupContent )); )Pentru a face fereastra de informații vizibilă imediat, trebuie să apelați metoda open():
infowindow.open(hartă, marker);
De asemenea, ar trebui să adăugați un apel de fereastră când faceți clic pe marcator (altfel nu vom putea deschide fereastra pop-up):
Marker.addListener("click", function() ( infowindow.open(harta, marker); ));
Personalizarea elementelor ferestrei de informații
Fereastra de informații poate fi personalizată sau standard. La comandă, putem adăuga orice elemente și putem lucra cu ele, posibilitățile sunt limitate doar de imaginație.
Principala problemă care poate fi întâlnită la personalizarea oricăruia dintre tipuri sunt marginile (zona albă) din jurul conținutului și săgeata. Aceste elemente nu pot fi selectate prin CSS.
Puteți rezolva problema folosind pseudo-elemente pentru blocurile accesibile. De asemenea, dacă din anumite motive nu este posibilă utilizarea unui pseudo-element suplimentar, cadrul poate fi îndepărtat folosind o umbră.
Gm-style-iw ( fundal: $negru; box-shadow: -14px 0px 0px $negru, -14px 9px 0px $negru, -14px -8px 0px $negru, 15px -8px 0px $negru, 15px 9px 0px $negru; )
Dar mai întâi lucrurile:
Gm-style-iw - blocul principal, conține conținutul. În captura de ecran de mai sus, acest bloc are un fundal negru.
.poi-info-window - un înveliș pentru text în fereastra de informații standard, situată în interior. .gm-style-iw
.gm-style-iw + div - cruce.
Cum să afectați acum zona din afara blocului de conținut? Treci dincolo de ea. În primul rând, trebuie să adăugați o proprietate care va face vizibile blocuri care trec dincolo de granițe:
gm-style-iw ( overflow: vizibil !important; div ( overflow: vizibil !important; ) )
Acum, pentru .gm-style-iw sau blocuri din interior, puteți crea pseudo-elemente pentru a suprapune fundalul și săgeata:
Gm-style-iw ( // Fundal &::before (conținut: ""; lățime: calc(100% + 29px); înălțime: calc(100% + 17px); @include absolut; @include center-align; fundal : $negru; ) // Săgeată &::după (conținut: ""; lățime: 0; înălțime: 0; chenar: 22px solid transparent; culoarea de sus: $negru; z-index: 4; @include absolut ; sus: automat; jos: -53px; margine: automat; ) )
Obținem următoarele:
Efect de paralaxă pentru elementele din fereastra de informații
Aici există o mică problemă legată de faptul că obiectele de hartă sunt create dinamic și nu puteți pur și simplu să luați și să atașați un handler la ele, iar API-ul nu ne va permite să clonăm blocul folosind .clone(true) în conținutul ferestrei de informații cu transferul de manipulatori.
Alternativ, puteți verifica prezența unui element și puteți salva după ce apare:
Var $parallaxImg = null; this.$body.mousemove(function(e) ( if($parallaxImg) ( ... ) else if($(this.parallaxImg).length) ( $parallaxImg = $(this.parallaxImg); ) ).bind( acest));
Acum să adăugăm doar codul care mută blocul pe orizontală în funcție de poziția cursorului:
Var $parallaxImg = null; this.$body.mousemove(function(e) ( if($parallaxImg) ( var $el = $(e.currentTarget), xPos = e.pageX - (window.innerWidth / 2), mXPcnt = Math.round(xPos / $el.width() * 100), diffX = $parallaxImg.width() - $el.width(), myX = diffX * (mXPcnt / 1500); $parallaxImg.animate((stânga: myX), 0) ; ) else if($(this.parallaxImg).length) ( $parallaxImg = $(this.parallaxImg); ) ).bind(this));
Dacă trebuie procesat un clic pe un element dinamic, trebuie doar să puneți handlerul pe înveliș și să prindeți obiectul în urcare:
$(".map").on("click", ".js-parallax-img", function() ( ... ));
4. Personalizare hartă
Schimbați culoarea obiectelor hărții
Pentru stilizarea hărții, se utilizează o matrice de stiluri, care specifică selectorul și proprietatea css care urmează să fie aplicate.
Un exemplu de setări care colorează violet apa:
Var stiluri = [ ( "featureType": "apă", "stylers": [ ( "culoare": "#a73cff" ) ] ) ]
Aplicam parametrii:
Map.setOptions((stiluri: stiluri));
Pentru a configura stiluri, cea mai simplă modalitate este să utilizați un serviciu specializat, de exemplu Google Maps APIs Styling Wizard. Pentru setări detaliate ale hărții, faceți clic pe „Mai multe opțiuni”:
$.getJSON("../json/map-style/map-style.json", function(data) ( map.setOptions((stiluri: date)); ));
Ca rezultat, obținem următoarele setări ale hărții:
Coordonatele var = (lat: 47.212325, lng: 38.933663), popupContent = this.$popupContent.html(), markerImage = "images/marker.png", zoom = 15, map = new google.maps.Map(document.getElementById ("hartă"), ( centru: coordonate, zoom: zoom, disableDefaultUI: true )), infowindow = nou google.maps.InfoWindow(( conținut: popupContent )), marker = nou google.maps.Marker(( poziție: coordonate , hartă: hartă, pictogramă: markerImagine )); $.getJSON("../json/map-style/map-style_colored.json", function(data) ( map.setOptions((stiluri: date)); )); google.maps.event.addListener(infowindow,"closeclick",function()( marker.setAnimation(google.maps.Animation.BOUNCE); )); marker.addListener("click", function () ( marker.setAnimation(null); )); marker.addListener("click", function() ( infowindow.open(harta, marker); )); infowindow.open(hartă, marker);
Personalizarea controlului
Butoanele „Hartă” și „Satelit” sunt în blocul cu class.gm-style-mtc
Salutare tuturor! Astăzi vom învăța nu doar să instalăm o hartă Google Maps pe site-ul nostru (orice pagină html), ci și să stilăm Hărți Google Hărți - schimbați culorile hărții, precum și adăugați o descriere la marcatorul de hartă Google Maps, modificați aspectul (imaginea) marcatorului și adăugați-i propria descriere. Merge!)
Notă importantă. Vom face toate experimentele noastre la nivel local. Pentru a utiliza Google Maps pe site-ul dvs., trebuie să obțineți o cheie de autentificare specială. Este ușor de făcut. Vom omite primirea lui și nu o vom lua în considerare.
Mai întâi, să creăm o pagină html și să inserăm o hartă Google Maps în ea. Vom face acest lucru folosind API-ul Google Maps. Deci să mergem pe calea avansată. Trebuie remarcat faptul că Google are documentație și instrucțiuni bune în rusă și engleză pentru utilizarea Google Maps. Deci programatorii pot merge acolo imediat. Dacă doriți să obțineți o lecție clară pas cu pas, atunci rămâneți.
Acum voi descrie pe rând acțiunile care trebuie făcute și apoi voi da codul paginii cu comentarii. Mai întâi creăm o pagină HTML. Apoi:
Iată codul paginii pe care îl avem. Atenție la comentariile din interior, am descris ce se întâmplă și unde.
Acum avem o astfel de hartă, dar nu există suficient marker pentru a indica locul.
De asemenea, veți întreba cum să indicați pe hartă adresa de care avem nevoie.
Să arătăm locația Teatrului Bolșoi pe hartă. În parametrul centru, am definit coordonatele de centrare a hărții:
Centru: (lat: -34.397, lng: 150.644),
Trebuie să obținem astfel de coordonate pentru locația noastră. Pentru a face acest lucru, accesați versiunea obișnuită a Google Maps și faceți clic dreapta pe locul de interes pentru noi. Faceți clic pe „Ce este aici” și obțineți coordonatele locului. (55,760186, 37,618711). În același timp, voi schimba scara setând-o la 18: zoom: 18 .
Locul a fost stabilit. Rămâne să arăți marcatorul pe hartă. În interiorul funcției initMap(), adăugăm o variabilă pentru marker:
// Creați un marcator pe hartă var marker = new google.maps.Marker(( // Determinați poziția poziției markerului: (lat: 55.760186, lng: 37.618711), // Specificați pe ce hartă ar trebui să apară. mai mult decât o hartă) hartă: hartă, // Scrieți numele markerului - va apărea dacă treceți cu mouse-ul peste el și așteptați puțin titlul: „Marcatorul nostru: Teatrul Bolșoi” ));
Acum avem o hartă cu un marker
De asemenea, puteți adăuga propriul eveniment la un clic pe marcator. În codul final al paginii, nu vom face acest lucru. Dar se face așa:
Google.maps.event.addListener(marker, „click”, function() ( document.location="http://google.com"; ));
Primul parametru al metodei addListener este obiectul pentru care este adăugat evenimentul, în cazul nostru marker . Obiectul poate fi nu numai un marker, ci și harta în sine. Al doilea parametru de clic specifică tipul de eveniment, în acest caz un singur clic. A treia este funcția de gestionare care va funcționa.
Pentru mai multe detalii despre marker și posibilitățile de lucru cu acesta, vă recomand să vă uitați la documentație.
Marker instalat. Dar este standard și nu este deloc interesant. Să-l înlocuim cu pictograma noastră. Am găsit o pictogramă potrivită pe care o vom folosi.
În descrierea unei variabile cu un marker, voi adăuga o pictogramă.
// Creați un marcator pe hartă var marker = new google.maps.Marker(( // Determinați poziția poziției markerului: (lat: 55.760186, lng: 37.618711), // Specificați pe ce hartă ar trebui să apară. mai mult decât o hartă) hartă: hartă, // Scrieți numele markerului - va apărea dacă treceți cu mouse-ul peste el și așteptați puțin titlul: „Marcatorul nostru: Teatrul Bolșoi”, // Specificați propria pictogramă pentru pictograma marcatorului: „theatre_icon.png” ));
Pentru pictograme mai complexe, consultați documentația.
Este timpul să ne colorăm harta. Oferă-i un aspect special și unic. Vom face acest lucru cu ajutorul serviciului Snazzy Maps, care are un număr mare de skin-uri pentru hărți Google. Și vă permite să faceți astfel de cărți interesante:
Am ales un stil de card numit apa albastra. Pe pagina acestui stil, puteți găsi codul pentru stil și puteți descărca un fișier cu un exemplu de aplicare a acestui stil pe o hartă Google Maps.
Adăugăm stiluri pentru proiectarea hărții proprietății stiluri pe care o specificăm pentru variabila hartă - atunci când creăm un obiect cu o hartă în el.
Iată întregul fragment de cod:
// În variabila hartă, creați un obiect de hartă GoogleMaps map = new google.maps.Map(document.getElementById("map"), ( // Când creați un obiect de hartă, trebuie să specificați proprietățile acestuia // centru - definiți punct pe care va fi centrată harta centru : (lat: 55.760186, lng: 37.618711), // zoom - determină scara. 0 - puteți vedea întreaga cale de plată. 18 - puteți vedea casele și străzile orașului. zoom: 18, // Adăugați stilurile dvs. pentru a afișa stilurile hărții: [("featureType ":"administrative","elementType":"labels.text.fill","stylers":[("color":"#444444) ")]),("featureType":"peisaj","elementType":" toate","stylers":[("culoare":"#f2f2f2")]),("featureType":"poi"," elementType":"toate","stylers":[("vizibility":"off ")]),("featureType":"road","elementType":"toate","stylers":[("saturație" :-100),("luminozitate":45)]),("featureType" :"road.highway","elementType":"toate","stylers":[("vizibilitate":"simplificat")]) ,("featureType":"road.arterial","elementType":"labels. icon","stylers":[("vizibility":"off")]),("featureType":"transit","eleme ntType":"toate","stylers":[("vizibility":"off")]),("featureType":"apă","elementType":"toate","stylers":[("culoare" :"#46bcec"),("vizibilitate":"pornit")])] ));
Acum harta noastră arată astfel:
Harta poate fi îmbunătățită în continuare prin adăugarea unei ferestre de informații făcând clic pe marcatorul nostru. Documentația pentru ei stă. Pe scurt, pentru a adăuga o fereastră de informații, trebuie să:
Toate acestea se întâmplă în interiorul funcției initMap().
Teatrul Academic de Stat Bolșoi din Rusia, sau pur și simplu Teatrul Bolșoi, este unul dintre cele mai mari „+” din Rusia și unul dintre cele mai importante teatre de operă și balet din lume.
"+ "Site web: bolshoi.ru"+"
"+ "Acum harta cu fereastra de informații arată astfel:
De asemenea, puteți elimina comenzile standard de pe hartă, le puteți activa/dezactiva pe cele necesare și inutile și chiar le puteți crea pe ale dvs. Veți găsi o descriere a tuturor acestor lucruri în documentație.
Harta rezultată și codul final pot fi vizualizate mai jos sau pe codepen.
Schimbați stilul hărții Google Map. De asemenea, puteți personaliza afișarea marcatorului, puteți ascunde sau adăuga obiecte pe hartă.
Conectăm un script care adaugă funcționalitate adaosuriși editarea hărților pe site.
Adăugarea unei hărți - de ex. nu mai trebuie să adăugați o hartă ca iframe, noi creăm o hartă pe site după coordonate.
YOUR_API_KEY - copiați aici cheia API generată. Trebuie să-l creați în contul dvs. în Consola API Google
Ca urmare, vom primi un cod cheie, acesta trebuie introdus în scriptul de conectare API Google Maps.
În layout, trebuie să avem un div gol cu id="map" (puteți atribui propriul id), trebuie scrise stilurile de bază ale stratului hărții. !Acest lucru este obligatoriu, fără aceasta harta nu se va încărca.
#hartă(lățime: 100%; înălțime: 400px;)
Inițierea scriptului de creare a hărții
lat: 47,226517 lng: 39,7316219- Latitudinea și longitudinea obiectului de pe hartă. Cum să aflați coordonatele punctului necesar - utilizați serviciile pentru determinarea coordonatelor:
Center Offset
Dacă este necesar, putem deplasa puțin centrul, astfel încât eticheta să fie decentrată. Acest lucru poate fi necesar dacă plasăm lângă ea o plăcuță cu datele de adresă.
//center: myLatLng, // adnotă centrarea pe eticheta centrală: (lat: 47.226517, lng: 39.7316219), //corectează ușor datele
lat - offset +sus, -jos
lng - offset +dreapta, -stânga
Aflați mai multe despre stiluri, selectoare și etichete
Serviciu de selectare a schemelor de culori pentru hărți - snazzymaps.com. După ce am ales opțiunea necesară, copiem stilurile și înlocuim stilurile de la începutul până la sfârșitul parantezelor pătrate.
Ce stiluri sunt responsabile pentru ce:
Stiluri: [ //(elementType: "geometry", stylers: [(culoarea: "#ebe3cd")]), //land în așezare //(elementType: "labels.text.fill", stylers: [(culoare : „#523735”)]), //etichete într-o zonă populată (completare) //(elementType: „labels.text.stroke”, stilare: [(culoare: „#f5f1e6”)]), //etichete într-un zona populată paragraf (stroke) ( featureType: „administrativ”, // granițele administrative dintre regiuni și districte elementType: „geometry.stroke”, stylers: [(culoare: „#c9b2a6”)] ), ( featureType: „landscape.humanmade” ", // stroke of houses and buildings elementType: "geometry.fill", stylers: [(culoarea: "#d3be7e")] ), ( featureType: "landscape.humanmade", // stroke of houses and buildings elementType: " geometry.stroke" , stylers: [(culoarea: "#c6b06c")] ), ( featureType: "administrative.land_parcel", // nu este clar elementType: "geometry.stroke", stylers: [(culoarea: "#dcd2be" )] ), ( featureType: "administrative.land_parcel", // numere de locuit elementType: "labels.text.fill", stylers: [(culoarea: "#ae9e90")] ), ( featureType: „peisaj.natural”, // teren în afara aşezări elementType: „geometry”, stylers: [(culoare: „#dfd2ae”)] ), ( featureType: „poi”, // zone administrative și clădiri (spitale, stadioane, cimitire) elementType: „geometry”, stylers: [( culoare: "#dfd2ae")] ), ( featureType: "poi", // etichete pentru teritorii administrative și clădiri (spitale, stadioane, cimitire) elementType: "labels.text.fill", stiluri: [(culoare: "# 93817c")] ), ( featureType: "poi.park", // parcuri, pătrate, gazon (în interiorul așezărilor) elementType: "geometry.fill", stylers: [(culoare: "#a5b076")] ), ( featureType : "poi.park", // etichete pentru parcuri, piețe, gazon (în interiorul așezărilor) elementType: "labels.text.fill", stylers: [(culoarea: "#447530")] ), ( featureType: " drum" , // drumuri secundare elementType: „geometrie”, stilare: [(culoare: „#f5f1e6”)] ), ( featureType: „drum. arterială”, // drumuri principale elementType: „geometrie”, stilare: [( culoare: "#fdfcf8")] ), ( featureType: "road.highway", // trasee (pot fi parcurse ca drumuri și în jurul orașului) elementType: "geometry", stylers: [(culoarea: "#f8c967")] ), ( featureType: "road.highway", // cursa pistelor elementType: "geometry.stroke", stylers: [(culoare: "#e9bc62")] ), ( featureType: "road.highway.controlled_access", // drumuri cu taxă elementType: "geometry", stylers: [(culoare: "#e98d58")] ), ( featureType: "road. highway.controlled_access", // cursa drumurilor cu taxă elementType: "geometry.stroke", stylers: [(culoarea: "#db8555")] ), ( featureType: "road.local", // numele secundar drums elementType: „etichete .text.fill”, stylers: [(culoare: „#806b63”)] ), ( featureType: „transit.line”, // traseu elementType: „geometry”, stylers: [(culoare: „#dfd2ae”) ] ), ( featureType: „transit.line”, // nu este clar elementType: „labels.text.fill”, stylers: [(culoare: „#8f7d77”)] ), ( featureType: „tranzit .line", / / nu este clar elementType: "labels.text.stroke", stiluri: [(culoarea: "#ebe3cd")] ), ( featureType: "transit.station", // aeroporturi elementType: „geometry”, stylers: [(culoare: „#dfd2ae”)] ), ( featureType: „water”, // corpuri de apă elementType: „geometry.fill”, stylers: [(culoare: „#b9d3c2”)] ), ( featureType: „apă”, // apă etichetează elementType: „labels.text.fill”, stilare: [(culoarea: „#92998d”)] ) ]
Prima dată când am întâlnit implementarea și personalizarea Google Maps, nu am găsit un singur articol care să ia în considerare toate punctele necesare - a trebuit să caut informații puțin câte puțin și să inventez eu ceva. După aceea, s-a decis să scriem acest articol, astfel încât persoanele care nu lucraseră anterior cu stilul Google Maps, dar în același timp limitate de intervalul de timp (sau poate de dorința) pentru un studiu complet al API-ului, să poată obține rapid informatiile si materialele necesare. Mai mult, cei care au ceva experiență vor putea învăța din acest articol un truc interesant, de exemplu, paralaxa pentru elementele ferestrei de informații.
În acest articol, ne vom uita la:
1. Implementarea Google Maps pe site
Adăugarea prin inserarea unui iframe în markup
Dacă nu trebuie să schimbați marcatorul, să faceți o fereastră de informații personalizată sau să afectați harta în vreun fel, pentru a o adăuga, faceți următoarele:
Adăugarea prin API
Dar dacă este necesar să facem orice manipulări, avem nevoie de o cheie. Dacă nu este în apropiere, îl puteți obține aici: link
Îl încorporăm în adresă în loc de YOUR_API_KEY:
Dacă trebuie să apelați înapoi după încărcarea API-ului, după cheie va trebui să adăugați YOUR_API_KEY&callback=initMap cu numele funcției dvs. Conectam scriptul pe pagină și creăm un bloc pentru harta viitoare în marcaj:
Funcția initMap() ( var coordonate = (lat: 47.212325, lng: 38.933663), map = new google.maps.Map(document.getElementById("map"), ( center: coordonates )); )
Coordonatele pot fi găsite folosind opțiunea „Ce este aici” descrisă mai sus.
Proprietăți care pot fi necesare imediat:
Inițializarea markerului
Să începem prin a adăuga un marker:
Funcția initMap() ( var coordonate = (lat: 47.212325, lng: 38.933663), map = new google.maps.Map(document.getElementById("map"), ( center: coordonates )), marker = new google.maps. Marker(( poziție: coordonate, hartă: hartă )); )
poziție (obligatoriu) specifică poziția de pornire a markerului. Dacă specificați aceleași coordonate ca și pentru hartă, atunci marcatorul va fi în centrul ecranului. Puteți muta marcatorul schimbând valoarea coordonatelor sau schimbând poziția hărții în sine față de zona vizibilă (blocul părinte).
harta (opțional) specifică harta pe care este plasat marcatorul.
Animație marker
Animația poate fi setată pentru marcator:
Un exemplu de animație a marcajului când fereastra de informații este închisă și se încheie când este deschisă:
Google.maps.event.addListener(infowindow,"closeclick",function()( marker.setAnimation(google.maps.Animation.BOUNCE); )); marker.addListener("click", function () ( marker.setAnimation(null); ));
Imagine marker
Imaginea marcatorului poate fi schimbată prin setarea adresei imaginii pentru proprietatea pictogramei.
Imagine = "images/marker.png", marker = nou google.maps.Marker(( poziție: coordonate, hartă: hartă, pictogramă: imagine ));
3. Personalizarea ferestrei de informații
Adăugarea unei ferestre de informații
Puteți adăuga orice markup la o fereastră de informații personalizată prin proprietatea conținutului:
Funcția initMap() (var coordonate = (lat: 47.212325, lng: 38.933663), popupContent = "
Orice
", markerImage = "images/marker.png", map = new google.maps.Map(document.getElementById("map"), ( center: (lat: 47.212325, lng: 38.933663) )), marker = new google. maps.Marker(( poziție: coordonate, hartă: hartă, pictogramă: markerImage )), infowindow = new google.maps.InfoWindow(( conținut: popupContent )); )Pentru a face fereastra de informații vizibilă imediat, trebuie să apelați metoda open():
infowindow.open(hartă, marker);
De asemenea, ar trebui să adăugați un apel de fereastră când faceți clic pe marcator (altfel nu vom putea deschide fereastra pop-up):
Marker.addListener("click", function() ( infowindow.open(harta, marker); ));
Personalizarea elementelor ferestrei de informații
Fereastra de informații poate fi personalizată sau standard. La comandă, putem adăuga orice elemente și putem lucra cu ele, posibilitățile sunt limitate doar de imaginație.
Principala problemă care poate fi întâlnită la personalizarea oricăruia dintre tipuri sunt marginile (zona albă) din jurul conținutului și săgeata. Aceste elemente nu pot fi selectate prin CSS.
Puteți rezolva problema folosind pseudo-elemente pentru blocurile accesibile. De asemenea, dacă din anumite motive nu este posibilă utilizarea unui pseudo-element suplimentar, cadrul poate fi îndepărtat folosind o umbră.
Gm-style-iw ( fundal: $negru; box-shadow: -14px 0px 0px $negru, -14px 9px 0px $negru, -14px -8px 0px $negru, 15px -8px 0px $negru, 15px 9px 0px $negru; )
Dar mai întâi lucrurile:
Gm-style-iw - blocul principal, conține conținutul. În captura de ecran de mai sus, acest bloc are un fundal negru.
.poi-info-window - un înveliș pentru text în fereastra de informații standard, situată în interior. .gm-style-iw
.gm-style-iw + div - cruce.
Cum să afectați acum zona din afara blocului de conținut? Treci dincolo de ea. În primul rând, trebuie să adăugați o proprietate care va face vizibile blocuri care trec dincolo de granițe:
gm-style-iw ( overflow: vizibil !important; div ( overflow: vizibil !important; ) )
Acum, pentru .gm-style-iw sau blocuri din interior, puteți crea pseudo-elemente pentru a suprapune fundalul și săgeata:
Gm-style-iw ( // Fundal &::before (conținut: ""; lățime: calc(100% + 29px); înălțime: calc(100% + 17px); @include absolut; @include center-align; fundal : $negru; ) // Săgeată &::după (conținut: ""; lățime: 0; înălțime: 0; chenar: 22px solid transparent; culoarea de sus: $negru; z-index: 4; @include absolut ; sus: automat; jos: -53px; margine: automat; ) )
Obținem următoarele:
Efect de paralaxă pentru elementele din fereastra de informații
Aici există o mică problemă legată de faptul că obiectele de hartă sunt create dinamic și nu puteți pur și simplu să luați și să atașați un handler la ele, iar API-ul nu ne va permite să clonăm blocul folosind .clone(true) în conținutul ferestrei de informații cu transferul de manipulatori.
Alternativ, puteți verifica prezența unui element și puteți salva după ce apare:
Var $parallaxImg = null; this.$body.mousemove(function(e) ( if($parallaxImg) ( ... ) else if($(this.parallaxImg).length) ( $parallaxImg = $(this.parallaxImg); ) ).bind( acest));
Acum să adăugăm doar codul care mută blocul pe orizontală în funcție de poziția cursorului:
Var $parallaxImg = null; this.$body.mousemove(function(e) ( if($parallaxImg) ( var $el = $(e.currentTarget), xPos = e.pageX - (window.innerWidth / 2), mXPcnt = Math.round(xPos / $el.width() * 100), diffX = $parallaxImg.width() - $el.width(), myX = diffX * (mXPcnt / 1500); $parallaxImg.animate((stânga: myX), 0) ; ) else if($(this.parallaxImg).length) ( $parallaxImg = $(this.parallaxImg); ) ).bind(this));
Dacă trebuie procesat un clic pe un element dinamic, trebuie doar să puneți handlerul pe înveliș și să prindeți obiectul în urcare:
$(".map").on("click", ".js-parallax-img", function() ( ... ));
4. Personalizare hartă
Schimbați culoarea obiectelor hărții
Pentru stilizarea hărții, se utilizează o matrice de stiluri, care specifică selectorul și proprietatea css care urmează să fie aplicate.
Un exemplu de setări care colorează violet apa:
Var stiluri = [ ( "featureType": "apă", "stylers": [ ( "culoare": "#a73cff" ) ] ) ]
Aplicam parametrii:
Map.setOptions((stiluri: stiluri));
Pentru a configura stiluri, cea mai simplă modalitate este să utilizați un serviciu specializat, de exemplu Google Maps APIs Styling Wizard. Pentru setări detaliate ale hărții, faceți clic pe „Mai multe opțiuni”:
$.getJSON("../json/map-style/map-style.json", function(data) ( map.setOptions((stiluri: date)); ));
Ca rezultat, obținem următoarele setări ale hărții:
Coordonatele var = (lat: 47.212325, lng: 38.933663), popupContent = this.$popupContent.html(), markerImage = "images/marker.png", zoom = 15, map = new google.maps.Map(document.getElementById ("hartă"), ( centru: coordonate, zoom: zoom, disableDefaultUI: true )), infowindow = nou google.maps.InfoWindow(( conținut: popupContent )), marker = nou google.maps.Marker(( poziție: coordonate , hartă: hartă, pictogramă: markerImagine )); $.getJSON("../json/map-style/map-style_colored.json", function(data) ( map.setOptions((stiluri: date)); )); google.maps.event.addListener(infowindow,"closeclick",function()( marker.setAnimation(google.maps.Animation.BOUNCE); )); marker.addListener("click", function () ( marker.setAnimation(null); )); marker.addListener("click", function() ( infowindow.open(harta, marker); )); infowindow.open(hartă, marker);
Personalizarea controlului
Butoanele „Hartă” și „Satelit” sunt în blocul cu class.gm-style-mtc
Jurnal în direct
Facebook
Stare de nervozitate