Turinys
The „Google“ žemėlapių „Javascript“ API Jis yra labai galingas, nes leidžia ne tik sukurti žemėlapius, bet ir žengti dar vieną žingsnį, išplėtus jo funkcijas ir naudojant vektorius, kad būtų galima pridėti lankytinų vietų, išskleidžiamųjų langų, linijų ir maršruto modeliavimo.Kitas mūsų įgyvendinamų žemėlapių privalumas ir jei kada nors dirbome su „Javascript“ įvykius, kurie yra kalbos esmė ir yra atsakingi už naudotojo sąveikos su svetaine, šiuo konkrečiu atveju sąveikos su mūsų žemėlapiu, valdymą.
Prieš pradėdami praktiką, pirmiausia turime žinoti tam tikrą teoriją, pagrįstą įvykių, kuriuos tvarko API, naudojančią vardų sritį google.maps.event dirbti su jais. Jis turi statinius metodus, kaip klausytis API ir valdiklio apibrėžtų įvykių addListener () juos užregistruoti.
Žinodami tai, pažiūrėkime kai kuriuos svarbiausius įvykius, pasiekiamus API ir kuriuos naudosime savo pavyzdžiuose:
centras_keistasŠis įvykis suaktyvinamas pasikeitus žemėlapio centro ypatybei.
spustelėkiteŠis įvykis suaktyvinamas, kai naudotojas spustelėja žemėlapį. Svarbu paminėti, kad jis neįtraukia žymeklių ar informacijos langų paspaudimų.
vilkiteŠis įvykis suaktyvinamas pakartotinai, kai vartotojas tempia žemėlapį.
pelės judėjimasŠis įvykis suaktyvinamas, kai naudotojas perkelia pelę bet kurioje žemėlapio sudėtinio rodinio vietoje.
dešiniuoju pelės mygtuku spustelėkiteŠis įvykis suaktyvinamas, kai suaktyvinamas DOM kontekstinio meniu įvykis.
zoom_changedŠis įvykis suaktyvinamas pasikeitus žemėlapio mastelio keitimo ypatybei.
Svarbu paminėti, kad nors šie įvykiai gali atrodyti kaip standartiniai SAULĖ jie ne, jie yra dalis „Google“ žemėlapių API. Taip išvengiama problemos, kai naršyklės tvarko įvairių tipų įvykius SAULĖ.
Jau matęs įvykius, kuriais dažniausiai naudojasi API Pradėkime praktiką, kad pademonstruotume jų naudojimą kuriant žemėlapius, pirmasis šios pamokos pavyzdys bus sutelktas į įvykius, susijusius su žemėlapio savybių keitimu, o tai leis mums gauti sinchronizuotą žemėlapio funkciją, t. , turėti žemėlapius su skirtingais pagrindais, kuriuose būtų rodoma ta pati informacija, neatsižvelgiant į jų centro ar mastelio pokyčius.
Pažiūrėkime, kokių veiksmų turime imtis, kad pasiektume šį tikslą:
1- Pirmiausia sukuriame naują failą, kuriam paskambinsime synchronized_maps.html ir mes įtraukiame API kartu su stiliais, kuriuos turės mūsų žemėlapių sudėtinis rodiklis, svarbu apibrėžti pasaulinius žemėlapių kintamuosius, nes turėsime juos naudoti visoje programos srityje:
var map1, map2;
2- Kaip minėjome anksčiau, ketiname sinchronizuoti du žemėlapius su skirtingais pagrindais, todėl turime sukurti dvi funkcijas, kurios juos inicijuoja. Šios funkcijos bus gana panašios į tas, kurias išmokome ankstesniuose vadovėliuose, tačiau jos valdys įvykius, kad būtų pasiektas sinchronizavimo funkcionalumas, pažiūrėkime pirmosios funkcijos kodą:
function initializeMap1 () {var mapOptions = {centre: new google.maps.LatLng (40.41678, -3.70379), mastelis: 10, mapTypeId: google.maps.MapTypeId.ROADMAP}; var mapElement = document.getElementById ('divmap'); map1 = new google.maps.Map (mapElement, mapOptions); google.maps.event.addListener (map1, 'center_changed', function () {map2.setCenter (map1.getCenter ());}); google.maps.event.addListener (map1, 'zoom_changed', function () {map2.setZoom (map1.getZoom ());}); } Kaip matome, kaip įprasta, turime savo žemėlapio parinktis, kad apibrėžtume centrą, mastelį ir bazę, kuri šiuo atveju yra KELIO ŽEMĖLAPIS, tada mes nustatome savo žemėlapio parinktis ir galiausiai savo įvykius, atsakingus už žemėlapio Nr. 1 ypatybių reikšmių gavimą ir nustatymą 2 žemėlapio numeryje, tam mes naudosime centras_keistas Y zoom_changed tai leidžia mums sinchronizuoti.
3- Tada turime sukurti savo funkciją inicijuoti antrąjį žemėlapį, kodas yra panašus į ankstesnį, tačiau įvykiai bus suaktyvinti nuo žemėlapio 2 iki 1 ir bazė bus HIBRIDAS parodyti skirtumą tarp abiejų:
function initializeMap2 () {var mapOptions2 = {centras: naujas google.maps.LatLng (40.41678, -3.70379), mastelis: 10, mapTypeId: google.maps.MapTypeId.HYBRID}; var mapElement2 = document.getElementById ('mapDiv2'); map2 = new google.maps.Map (mapElement2, mapOptions2); google.maps.event.addListener (map2, '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- Galiausiai sukuriame žemėlapių momentinio atvaizdavimo funkciją, kuri leis mums sukurti abiejų pavyzdžius, sukuriame savo HTML ir mes priskiriame tą pačią klasę divams, kuriuose bus mūsų žemėlapiai:
function initializeMaps () {initializeMap1 (); initializeMap2 (); } google.maps.event.addDomListener (langas, 'load', initializeMaps); Sinchronizuoti žemėlapiai
Pažiūrėkime, kaip atrodo mūsų sinchronizuoti žemėlapiai, kai atliekame pratimą naršyklėje:
DIDELIS
DIDELIS
1- Sukuriame naują failą pavadinimu get_coordinates.html ir mes įtraukiame savo API kartu su stiliais:
2- Tada mes sukuriame funkciją initializeMap () kaip įprasta, tačiau tai turės kažką kitokio ir yra įvykio apibrėžimas spustelėkite viduje addListener kartu su dialogo lango, kuris suteiks mums informacijos apie spustelėjus platumą ir ilgumą, įgyvendinimu, pažiūrėkime:
google.maps.event.addListener (žemėlapis, 'spustelėkite', funkcija (e) {if (infowindow! = null) infowindow.close (); infowindow = new google.maps.InfoWindow ({content: 'Pelės koordinatės:
Platuma: ' + e.latLng.lat () +'
Ilgis: '+ e.latLng.lng (), pozicija: e.latLng}); infowindow.open (žemėlapis); }); 3- Pagaliau mes statome savo HTML ir mes apibrėžiame žemėlapio sudėtinį rodinį:
Koordinačių gavimas paspaudus pelę
Baigę kodą, pažiūrėkime, kaip mūsų žemėlapis atrodo naršyklėje, kai spustelime jį ir rodoma to taško platumos ir ilgumos informacija:
DIDELIS
1- Mes įtraukiame savo API ir kuriame savo stilius mūsų žemėlapiui ir valdymui, kuris bus atsakingas už platumos ir ilgumos informacijos rodymą:
2- Mes kuriame savo funkciją initializeMap () kaip ir ankstesniuose pratimuose ir mes apibrėžiame savo valdymo parametrus, kur mes inicijuojame jį su koordinatėmis 0.00 / 0.00:
var controlDiv = document.createElement ('div'); controlDiv.className = 'mapControl'; controlDiv.id = 'mapCoordinates'; controlDiv.innerHTML = 'Platumas / ilgis: 0,00 / 0,00'; 3- Tada turime sukurti valdiklį ir pridėti jį prie savo žemėlapio, tai darome su google.controls, kur galime nurodyti poziciją, kurioje ji bus, šiuo atveju naudosime RIGHT_BOTTOM kuris atitinka apatinėje dešinėje dalyje ir talpyklą, kurioje jis bus rodomas:
map.controls [google.maps.ControlPosition.RIGHT_BOTTOM] .push (controlDiv);
4- Galiausiai mes apibrėžiame savo renginį, kuris bus tokio tipo pelės judėjimas ir įves tekstą į mūsų gaunamos informacijos kontrolę:
google.maps.event.addListener (žemėlapis, 'mousemove', funkcija (e) {var koordinateText = 'Lat / Lng:' + e.latLng.lat (). toFixed (6) + ' /' + e.latLng. lng (). toFixed (6); controlDiv.innerHTML =ordinateText;}); Pažiūrėkime, kaip atrodo mūsų žemėlapis valdikliu, kad gautume platumos ir ilgumos informaciją:
DIDELIS
1- Mes sukuriame failą pavadinimu menu_contextual.html ir mes įtraukiame „Google“ žemėlapių „Javascript“ API, taip pat kuriame žemėlapio ir kontekstinio meniu stilius:
2- Prieš kurdami mūsų funkciją initializeMap () Turime atlikti keletą papildomų veiksmų, vienas iš jų - sukurti funkciją apibrėžti kontekstinio meniu klasę, pažiūrėkime:
funkcija menuKontekstinis (žemėlapis) {this.setMap (žemėlapis); this.map = žemėlapis; this.mapDiv = map.getDiv (); this.menuDiv = null; }; 3- Kai tai bus padaryta, turime sukurti kontekstinio meniu parinktis ir pridėti įvykį, kuris suaktyvins kiekvieną iš jų pasirinkus, kuris, kaip įsivaizduojame, bus spustelėkite:
menuContextual.prototype = new google.maps.OverlayView (); menuContextual.prototype.draw = function () {}; menuContextual.prototype.onAdd = function () {var that = this; this.menuDiv = document.createElement ('div'); this.menuDiv.className = 'kontekstinis meniu'; this.menuDiv.innerHTML = 'Sukurti žymę
Mastelis
Anuliuoti mastelio keitimą
“; this.getPanes (). floatPane.appendChild (this.menuDiv); google.maps.event.addListener (this.map, 'click', function (mouseEvent) {that.hide ();}); }; 4- Norėdami užbaigti kontekstinį meniu, turime tik pridėti laidą ir paslėpti veiksmus, pažiūrėkime, kaip atrodo mūsų kodo dalis:
menuContextual.prototype.show = function (coord) {var proj = this.getProjection (); var mouseCoords = proj.fromLatLngToDivPixel (derinys); var kairė = Math.floor (mouseCoords.x); var top = Math.floor (mouseCoords.y); this.menuDiv.style.display = 'blokas'; this.menuDiv.style.left = kairė + 'px'; this.menuDiv.style.top = viršuje + 'px'; this.menuDiv.style.visibility = 'matomas'; }; menuContextual.prototype.hide = function (x, y) {this.menuDiv.style.visibility = 'paslėptas'; } 5- Baigę kontekstinį meniu, turime tik užprogramuoti meniu parinkčių funkcijas, kurios yra priartinti, anuliuoti mastelį ir uždėti žymeklį:
funkcija doZoom () {map.setZoom (map.getZoom () + 1); } funkcija undoZoom () {map.setZoom (map.getZoom () - 1); } function createMarker () {var marker = new google.maps.Marker ({pozicija: lastCoordinate, map: map, title: 'Atsitiktinis žymeklis'}); } 6- Galiausiai inicijuojame savo žemėlapį, kuriame svarbu sukurti žemėlapį kontekstinis meniu mūsų žemėlapiui ir apibrėžti pagrindinį įvykį dešiniuoju pelės mygtuku spustelėkite kuris bus suaktyvintas paspaudus dešinį pelės klavišą:
contextMenu = naujas meniuKontekstinis (žemėlapis); google.maps.event.addListener (žemėlapis, 'dešiniuoju pelės klavišu', funkcija (e) {lastCoordinate = e.latLng; contextMenu.show (e.latLng);}); 7- Mes kuriame savo HTML įprastu būdu ir paleiskite mūsų pavyzdį, pažiūrėkime, kaip atrodo mūsų kontekstinis meniu, kai dešiniuoju pelės mygtuku spustelėkite mūsų žemėlapį:
DIDELIS
DIDELIS
