Начать

Выберите платформу: Android iOS JavaScript

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

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

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

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

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

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

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

<html>
  <head>
      <title>Map</title>
  </head>
  <body>
      <!-- Your JavaScript code will go here -->
  </body>
</html>

Добавить JavaScript

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

  • gmp-map-3d содержит параметры, используемые для инициализации начального положения камеры и ракурса обзора.
  • script содержит вызов для загрузки JavaScript API карт. Обязательно замените YOUR_KEY на свой ключ API. 

<html>
    <head>
        <title>Map</title>
        <link rel="stylesheet" type="text/css" href="./style.css" />
        <script
            async
            src="https://maps.googleapis.com/maps/api/js?loading=async&key=AIzaSyA6myHzS10YXdcazAFalmXvDkrYCp5cLc8&libraries=maps3d"></script>
    </head>
    <body>
        <gmp-map-3d center="37.7704,-122.3985,500" tilt="67.5" mode="hybrid">
        </gmp-map-3d>
    </body>
</html>

Запустите приложение

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

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

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

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

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