В этом уроке вы научитесь создавать свою первую программу на JavaScript с использованием фотореалистичных 3D-карт в Maps JavaScript: простое окно, в котором отображается вид сверху на мост Золотые Ворота с мысом Марин на заднем плане.
По завершении руководства вы должны увидеть следующую карту в своей среде разработки:
Настройте свою среду
Прежде чем приступить к написанию кода, необходимо настроить среду, в которой работает JavaScript. В этом руководстве в качестве среды вы будете использовать веб-браузер. Все современные веб-браузеры имеют встроенную поддержку JavaScript, поэтому вам не нужно устанавливать какое-либо дополнительное программное обеспечение.
- Откройте текстовый редактор по вашему выбору.
- Создайте новый файл и сохраните его с расширением
.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>
Запустите программу
Чтобы запустить программу и увидеть результат, выполните следующие действия:
- Сохраните созданный HTML-файл.
- Откройте файл в веб-браузере (вы можете дважды щелкнуть файл, перетащить его в окно браузера или щелкнуть правой кнопкой мыши и использовать «Открыть с помощью»).
- Вы должны увидеть карту в окне браузера.
Поздравляем! Вы только что написали программу, использующую фотореалистичные 3D-карты Google Maps JavaScript API.
Следующие шаги
- Создавайте более сложные трехмерные карты, используя существующие образцы Google.
- Откройте для себя весь потенциал 3D-карт в Maps JavaScript API, прочитав справочную документацию .
В этом уроке вы научитесь создавать свою первую программу на JavaScript с использованием фотореалистичных 3D-карт в Maps JavaScript: простое окно, в котором отображается вид сверху на мост Золотые Ворота с мысом Марин на заднем плане.
По завершении руководства вы должны увидеть следующую карту в своей среде разработки:
Настройте свою среду
Прежде чем приступить к написанию кода, необходимо настроить среду, в которой работает JavaScript. В этом руководстве в качестве среды вы будете использовать веб-браузер. Все современные веб-браузеры имеют встроенную поддержку JavaScript, поэтому вам не нужно устанавливать какое-либо дополнительное программное обеспечение.
- Откройте текстовый редактор по вашему выбору.
- Создайте новый файл и сохраните его с расширением
.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>
Запустите программу
Чтобы запустить программу и увидеть результат, выполните следующие действия:
- Сохраните созданный HTML-файл.
- Откройте файл в веб-браузере (вы можете дважды щелкнуть файл, перетащить его в окно браузера или щелкнуть правой кнопкой мыши и использовать «Открыть с помощью»).
- Вы должны увидеть карту в окне браузера.
Поздравляем! Вы только что написали программу, использующую фотореалистичные 3D-карты Google Maps JavaScript API.
Следующие шаги
- Создавайте более сложные трехмерные карты, используя существующие образцы Google.
- Откройте для себя весь потенциал 3D-карт в Maps JavaScript API, прочитав справочную документацию .
В этом уроке вы научитесь создавать свою первую программу на JavaScript с использованием фотореалистичных 3D-карт в Maps JavaScript: простое окно, в котором отображается вид сверху на мост Золотые Ворота с мысом Марин на заднем плане.
По завершении руководства вы должны увидеть следующую карту в своей среде разработки:
Настройте свою среду
Прежде чем приступить к написанию кода, необходимо настроить среду, в которой работает JavaScript. В этом руководстве в качестве среды вы будете использовать веб-браузер. Все современные веб-браузеры имеют встроенную поддержку JavaScript, поэтому вам не нужно устанавливать какое-либо дополнительное программное обеспечение.
- Откройте текстовый редактор по вашему выбору.
- Создайте новый файл и сохраните его с расширением
.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>
Запустите программу
Чтобы запустить программу и увидеть результат, выполните следующие действия:
- Сохраните созданный HTML-файл.
- Откройте файл в веб-браузере (вы можете дважды щелкнуть файл, перетащить его в окно браузера или щелкнуть правой кнопкой мыши и использовать «Открыть с помощью»).
- Вы должны увидеть карту в окне браузера.
Поздравляем! Вы только что написали программу, использующую фотореалистичные 3D-карты Google Maps JavaScript API.
Следующие шаги
- Создавайте более сложные трехмерные карты, используя существующие образцы Google.
- Откройте для себя весь потенциал 3D-карт в Maps JavaScript API, прочитав справочную документацию .