İçeriğe geç

Nuxt.js Projesine Mapbox Harita Servisi Nasıl Eklenir?

Bir projem için Google Maps dışında harita servisi araştırırken Mapbox’a denk geldim. Biraz inceleyince projem için uygun olduğunu görüp kullanmaya karar verdim.

Benim projem Nuxt projesi olduğu için onun üzerinde kullanımı göstermeye çalışacağım.

Gogole gibi Mapbox’da kendi servislerini kullanabilmemiz için kayıt olup API key almamızı istiyor. Bu linkten kayıt olup key API key aldıktan sonra aşağıdaki işlemlere geçebilirsiniz.

API key aldıktan sonra ilk olarak paketi sisteme dahil ederek başlayalım.

veya

Ardından nuxt.config.js içine aşağıdaki gibi CSS eklemesini yapalım.

Gerekli ön hazırlığı bitirdikten sonra haritayı görüntülemek istediğiniz sayfayı açarak aşağıdaki kodu ekleyelim.

Son olarak haritamızın görüntüleneceği div elemanını template içine ekleyelim.

İşlem başarıyla tamamlandı. Eğer CSS tarafında bir sorununuz olmazsa harita görüntülemek istediğiniz yerde sorunsuz görüntülenmeli.

Bazı durumlarda CSS çakışmalarından dolayı veya z-index farkından dolayı harita görünmeyebilir. Bu gibi durumlarda biraz müdahale etmeniz gerekecektir.

CSS sorunu olmadan çalışan örneğini buradan alabilirsiniz. 

Herhangi bir sorunuz olursa yorum yoluyla ulaşabilirsiniz.

Faydalı olması dileğiyle..

Tarih:JavascriptNuxtWeb Programlama

İlk Yorumu Siz Yapın

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

two × 3 =