Başlama

Platform seçin: Android iOS JavaScript

Bu eğitimde, Maps JavaScript'te fotogerçekçi 3D haritalar kullanarak ilk JavaScript uygulamanızı oluşturma sürecinde size rehberlik edeceğiz: Marin Headlands'in arka planda olduğu Golden Gate Köprüsü'nün kuşbakışı görünümünü gösteren temel bir pencere.

Eğitimi tamamladığınızda geliştirme ortamınızda aşağıdaki haritayı görürsünüz:

Ortamınızı ayarlama

Kod yazmaya başlamadan önce JavaScript'in çalıştığı bir ortam oluşturmanız gerekir. Bu eğiticide ortamınız olarak bir web tarayıcısı kullanacaksınız. Tüm modern web tarayıcılarında JavaScript için yerleşik destek bulunur. Bu nedenle, ek bir yazılım yüklemeniz gerekmez.

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

HTML sayfası yazma

Başlamak için temel bir HTML yapısına sahip bir web sayfası oluşturursunuz:

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

JavaScript ekleme

Ardından, haritayı yüklemek için özel bir HTML öğesi ekleyeceksiniz. Kod iki öğe içerir:

  • gmp-map-3d, başlangıç kamera 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çerir. 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 mode="hybrid" center="37.841157, -122.551679" range="2000" tilt="75" heading="330"></gmp-map-3d>
    <script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=beta&libraries=maps3d"></script>
  </body>
</html>

Uygulamayı çalıştırın

Uygulamayı çalıştırmak ve çıktıyı 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, tarayıcı penceresine sürükleyebilir veya sağ tıklayıp "Birlikte aç"ı kullanabilirsiniz).
  3. Haritayı tarayıcı pencerenizde görmeniz gerekir.

Tebrikler! Google'ın Maps JavaScript API'deki Photorealistic 3D Maps özelliğini kullanarak yeni bir uygulama yazdınız.

Sonraki adımlar

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