JavaScript'te Google Haritalar API'si ile istemci koordinatlarını alın (HMTL5, CSS3 ve Bootstrap)

Neye ihtiyacımız var?

ile) Temel html, css3, javascript ve bootstrap bilgisi (sınırlayıcı olmayan).
B) Bir kod editörü (Benim durumumda Sublime text 3 kullanacağım).
C) Test edilecek yerel bir sunucu (Xampp sunucusunu kullanacağım)
Başlayalım …

Aşama 1

Benim durumumda yerel sunucumuzun dizinine gidiyoruz "C: / xampp / htdocs /" ve arayacağım yeni bir klasör oluşturacağız "Öğretici_geolocalizacion", bunun içine 2 arama daha ekleyeceğiz "Cs" Y "Js".

BÜYÜT

Adım 2

kod editörümüzü açacağız "Dosya> Yeni" ve içine bir html5 yapısı yazıyoruz.

BÜYÜT

Daha sonra bu yeni dosyayı "tutorial_geolocalizacion" klasörünün kök dizinine "index.html" olarak kaydediyoruz.

Aşama 3

Önyüklemeyi resmi sayfasından indirip dosyayı kopyalıyoruz "Bootstrap.min.css" css klasörümüzde.

BÜYÜT

4. Adım

Editörümüze geri dönüyoruz ve bu dosyanın referansını dosyamıza ekliyoruz. "Index.html".

BÜYÜT

Adım 5

Yeni bir dosya oluşturacağız ve onu arayacağız "Stil.css" css klasörüne kaydedeceğiz…

BÜYÜT

6. Adım

içine ekleyeceğiz index.html önceki adımda oluşturulan css dosyasına yapılan referanslar. Ek olarak, aşağıdakileri içeren bir çevrimiçi komut dosyası da ekleyeceğiz. Google Haritalar JavaScript API'sı.

BÜYÜT

7. Adım

Ayrıca yeni bir .js dosyası oluşturmamız gerekecek burada coğrafi konumu yapacak ve haritayı gösterecek fonksiyonu yazacağız, onu "js" klasörüne kaydedeceğiz, adını "localiza.js" koyacağım. Ayrıca index.html'de buna bir referans ekleyeceğim.

BÜYÜT

BÜYÜT

Şimdi HTML'mizin düzenini tamamlayacağız, kodu aşağıdaki resimde görebilirsiniz:

BÜYÜT

8. Adım

Beri ana çerçeve olacak ve haritayı içerecek, daha sonra sahip oldukları boyut ve özellikleri kontrol etmemiz gerekecek, bunun için dosyamıza yazacağız "Stil.css" aşağıdaki kod.

BÜYÜT

Bununla tarayıcıya, # map-canvas katmanının otomatik bir kenar boşluğuna, 420 piksel yüksekliğe, göreceli konuma ve onu içeren katmanın veya div'in %100 genişliğine sahip olacağını söyleriz, bu durumda bir div içindedir cihazın ekranının %90'ını işgal etmesini ve yatay olarak ortalanmış olarak göstermesini söylediğimiz .container sınıfı ile.
Tarayıcımızda görürsek, şu ana kadar sonuç bu olurdu …

BÜYÜT

Şimdiye kadar sadece tasarımımız var ama en önemli şey haritayı kaçırıyoruz, gelelim konuya…

9. Adım

"localiza.js" dosyasında, istemcinin tarayıcısının koordinatlarını alacak ve harita üzerinde yaklaşık konumunu gösterecek yeni bir işlev oluşturacağız.API'nin istemcide düzgün çalışmaması durumunda, bazı varsayılan koordinatlar tanımlayacağız. ve ayrıca müşterinin yer tutucuyu gerçek konumuna sürükleme Yeteneği'ni içerir. Kodda adım adım anlatıyorum bakalım…

BÜYÜT

Dosyalarımız hazır olduğuna göre yerel sunucumuzda bir test yapabiliriz ve sonuç aşağıdaki gibi olacaktır.

BÜYÜT

Adım 10

Şimdi haritamızı mobil cihazlara uyarlanabilir hale getireceğiz, bunu başarmak için "style.css" dosyamıza geri dönüyoruz ve bunlara medya sorguları adı verilen bazı yeni seçiciler ekleyeceğiz, tasarımımızın buna göre nasıl davranacağını tanımlayacağız. olduğu ekran boyutu görselleştiriyor… Gelelim ona.

BÜYÜT

İhtiyacımız olan her şeye zaten sahibiz, şimdi mobil cihazları taklit eden sonuçları görelim, bunun için kullanabiliriz "Google Chrome", uygulamamızı tarayıcıda açtıktan sonra sağ tıklayıp "Öğeyi inceleyin".

BÜYÜT

Aşağıdaki gibi bir pencere açılacak ve sol altta cep telefonu şeklindeki aracı seçeceğiz…

BÜYÜT

Sol üstte etiketli bir seçici olacağını göreceksiniz. "Cihaz" yazdığı yeri gösterirsek “” Ekran boyutları daha yaygın olan mobil cihazların isimlerini içeren bir liste görebiliriz, her birini seçersek tasarımımızın o cihazların ekranlarında nasıl davranacağını görebiliriz, gördüğümüz herhangi bir hata medya ile düzeltilebilir. dosyamıza eklediğimiz sorgular "Stil.css", bunun için sadece sorunu fark ettiğimiz cihazın boyutunu temsil eden medya sorgusu içerisinde gerekli ayarlamaları yapmamız gerekecekti…
Bakalım mevcut tasarımımız bazı cep telefonlarında nasıl görünüyor…

Bu Eğitimi beğendiniz ve yardım ettiniz mi?Yazara olumlu puan vermek için bu düğmeye basarak yazarı ödüllendirebilirsiniz.