Başlarken

Bu eğiticide, Haritalar JavaScript'teki Fotogerçekçi 3D Haritalar'ı kullanarak ilk JavaScript programınızı oluşturacaksınız. Bu pencere, arka planda Marin Headlands ile Golden Gate Köprüsü'nün yukarıdan görünümünü gösteren basit bir penceredir.

Eğiticiyi tamamladıktan sonra, geliştirme ortamınızda aşağıdaki haritayı görmeniz gerekir:

Ortamınızı ayarlama

Kod yazmaya başlamadan önce JavaScript çalıştıran bir ortam oluşturmanız gerekir. Bu eğitim için ortamınız olarak bir web tarayıcısı kullanacaksınız. Tüm modern web tarayıcıları yerleşik JavaScript desteğine sahiptir. Bu nedenle herhangi bir ek yazılım yüklemenize gerek yoktur.

  1. İstediğiniz metin düzenleyiciyi açın.
  2. Yeni bir dosya oluşturun ve dosyayı .html uzantısıyla kaydedin (ör. hello-p3djs.html).

HTML sayfası yazma

Başlangıç olarak temel HTML yapısına sahip bir web sayfası oluşturacaksınız:

<!DOCTYPE html>
<html>
<head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>
</head>
<body>
    <!-- Your JavaScript code will go here -->
</body>
</html>

JavaScript ekleyin

Sonra, haritayı yüklemek için JavaScript kodu eklemeniz gerekir. Bu kodda iki öğe bulunur:

  • gmp-map-3d, başlangıç kamerası konumunu ve görünümünü başlatmak için kullanılan parametreleri içerir.
  • script, Maps JavaScript API'yi yükleme çağrısını içeriyor. YOUR_KEY kısmını API anahtarınızla değiştirdiğinizden emin olun.
<!DOCTYPE html>
<html>
  <head>
    <title>Hello Photorealistic 3D Maps in Maps JavaScript</title>

    <style>
      html,
      body {
        height:100%;
        margin: 0;
        padding: 0;
      }
    </style>
  </head>
  <body>
    <gmp-map-3d center="37.841157, -122.551679" tilt="67.5"></gmp-map-3d>
    <script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=alpha&libraries=maps3d"></script>
  </body>
</html>

Programı çalıştırma

Programı çalıştırmak ve sonucu görmek için aşağıdaki adımları uygulayın:

  1. Oluşturduğunuz HTML dosyasını kaydedin.
  2. Dosyayı bir web tarayıcısında açın (dosyayı çift tıklayabilir, bir tarayıcı penceresine sürükleyebilir veya sağ tıklayıp "Birlikte aç" seçeneğini kullanabilirsiniz).
  3. Haritayı tarayıcı pencerenizde göreceksiniz.

Tebrikler! Google'ın Maps JavaScript API'sini kullanarak fotogerçekçi 3D haritaları kullanarak bir program yazdınız.

Sonraki adımlar

  • Google'ın mevcut örneklerini kullanarak daha karmaşık 3D harita deneyimleri oluşturun.
  • Referans belgeleri okuyarak Maps JavaScript API'de 3D Haritalar'ın tüm potansiyelini keşfedin.