Начать

В этом уроке вы научитесь создавать свою первую программу на JavaScript с использованием фотореалистичных 3D-карт в Maps JavaScript: простое окно, в котором отображается вид сверху на мост Золотые Ворота с мысом Марин на заднем плане.

По завершении руководства вы должны увидеть следующую карту в своей среде разработки:

Настройте свою среду

Прежде чем приступить к написанию кода, необходимо настроить среду, в которой работает JavaScript. В этом руководстве в качестве среды вы будете использовать веб-браузер. Все современные веб-браузеры имеют встроенную поддержку JavaScript, поэтому вам не нужно устанавливать какое-либо дополнительное программное обеспечение.

  1. Откройте текстовый редактор по вашему выбору.
  2. Создайте новый файл и сохраните его с расширением .html (например, hello-p3djs.html ).

Написать HTML-страницу

Для начала вы создадите веб-страницу с базовой структурой HTML:

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

Добавить JavaScript

Далее вы добавите код JavaScript для загрузки карты. Код содержит два элемента:

  • gmp-map-3d содержит параметры, используемые для инициализации начального положения и вида камеры.
  • script содержит вызов для загрузки Maps JavaScript API. Обязательно замените YOUR_KEY своим ключом API. 
<!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" range="2000" tilt="75" heading="330"></gmp-map-3d>
    <script async src="https://maps.googleapis.com/maps/api/js?key=<YOUR_KEY>&v=alpha&libraries=maps3d"></script>
  </body>
</html>

Запустите программу

Чтобы запустить программу и увидеть результат, выполните следующие действия:

  1. Сохраните созданный HTML-файл.
  2. Откройте файл в веб-браузере (вы можете дважды щелкнуть файл, перетащить его в окно браузера или щелкнуть правой кнопкой мыши и использовать «Открыть с помощью»).
  3. Вы должны увидеть карту в окне браузера.

Поздравляем! Вы только что написали программу, использующую фотореалистичные 3D-карты Google Maps JavaScript API.

Следующие шаги

  • Создавайте более сложные трехмерные карты, используя существующие образцы Google.
  • Откройте для себя весь потенциал 3D-карт в Maps JavaScript API, прочитав справочную документацию .