Как добавить карту на сайт за 30 секунд

Добавление карты на веб-страницу еще никогда не было таким простым. Все, что требуется, — это базовый HTML-документ, TomTom Maps SDK для Интернета и несколько простых строк кода JavaScript. Мы покажем вам, как это сделать.

Добавление карты в ваше веб-приложение

Благодаря Maps SDK for Web от TomTom добавление карты на веб-страницу стало еще проще. Все, что вам нужно, — это базовый HTML-документ, сам SDK и несколько простых строк кода JavaScript.

В этой статье мы быстро покажем вам, как сделать следующее:

Зарегистрируйте учетную запись разработчика.
Получите ключ API, чтобы использовать SDK.
Создайте простое приложение, отображающее карту с жестко заданными широтой и долготой.
Внесите небольшое изменение в приложение, чтобы определить широту и долготу нужного места.

Вы найдете полный исходный код для обеих версий приложения на https://github.com/josejoserojas/AMapIn30Seconds.

Получение ключа API

Чтобы использовать SDK, вам необходимо получить учетную запись разработчика и ключ API. Ключ API является бесплатным и позволяет аутентифицировать вас в TomTom, чтобы вы могли использовать все замечательные функции, доступные в SDK.

Если вы еще не зарегистрировали учетную запись TomTom, посетите https:// developer.tomtom.com/user/register. Там вы найдете очень короткую форму, похожую на приведенную ниже, которая запрашивает только основную информацию.

Когда вы нажмете кнопку «Зарегистрироваться», вам будет предложено решить «капчу», чтобы доказать, что вы человек. После этого вы получите электронное письмо, которое позволит вам активировать вашу учетную запись. Когда вы нажмете кнопку «Активировать учетную запись» в этом письме, вы вернетесь на страницу, подобную этой:

Нажмите «Моя панель», чтобы увидеть панель управления своей учетной записи, где вы найдете свой первый ключ API. Это ключ, который вы включите в свое приложение, чтобы использовать SDK.

Веб-страница

Мы начнем с простой веб-страницы, которая отображает карту моста Золотые Ворота в Сан-Франциско. Сначала, чтобы упростить задачу, мы жестко зададим широту (37,80776) и долготу (-122,47483) для этого местоположения.

Ссылка на SDK

Чтобы использовать SDK, мы должны сначала включить ссылку на него. TomTom предлагает три канала распространения:

Сеть распространения контента (CDN) — SDK размещается в CDN TomTom.
Диспетчер пакетов Node.js (NPM) — SDK размещается локально после установки диспетчером пакетов Node.js.
ZIP-файлы — SDK сначала загружается и распаковывается, а затем приложение ссылается на локально размещенные копии этих файлов.

Самый простой подход — использовать CDN TomTom, что так же просто, как добавить несколько строк кода в элемент HEAD нашего HTML. Это то, что мы будем использовать в нашем приложении.

Чтобы включить стили CSS и JavaScript, необходимые для отображения карт, добавьте следующие строки:

<link rel="stylesheet" type="text/css" href="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.41.0/maps/maps.css">

<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.41.0/maps/maps-web.min.js"></script>

SDK также включает в себя такие службы, как служба нечеткого поиска, которая позволяет нам искать информацию о местоположении (например, «Мост Золотые Ворота»). Чтобы включить JavaScript, необходимый для этих служб, добавьте следующее:

<script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.41.0/services/services-web.min.js"></script>

Обратите внимание, что URL-адреса в этих строках ссылаются на определенную версию SDK (v.5.41.0). Чтобы найти URL-адреса последней версии, а также информацию о других вариантах распространения, посетите https://developer.tomtom.com/maps-sdk-web-js/downloads.

Один раз вы добавили JavaScript, становится доступным глобальный объект с именем tt (TomTom). Затем вы ссылаетесь на функции и объекты карты через пространство имен tt.map, а на сервисные функции и объекты — через пространство имен tt.service.

Размещение карты

Если мы хотим отобразить карту, нам нужно выделить место на нашей веб-странице, где будет находиться карта. Самый простой способ сделать это — добавить элемент DIV в BODY HTML:

<div id="map-div"></div>

Обратите внимание, что мы включили идентификатор (map-div) для раздела, чтобы упростить обращение к нему позже.

Мы также хотим изменить размер раздела, чтобы было место для отображения карты. В этом случае мы сделаем так, чтобы карта покрывала 100% веб-страницы. Мы можем добиться этого, добавив следующий стиль CSS к элементу HEAD HTML:

<style>
  body, html { margin: 0; padding: 0; }
  #map-div { width: 100vw; height: 100vh; }
</style>

Код

Теперь, когда мы включили SDK и выделили место для отображения нашей карты, остался только один шаг: нам нужно добавить немного кода JavaScript, чтобы фактически использовать SDK.

Так как это представляет собой простое приложение, мы включим код в строку, внутри элемента SCRIPT, внутри элемента BODY нашего HTML. Если бы приложение стало более сложным, мы бы хотели переместить этот код в отдельный файл JavaScript.

Идентификация приложения

Мы начнем с установки информации о продукте для нашего приложения. Хотя это не обязательно, но позволяет TomTom собирать статистику использования приложения.

const API_KEY = 'YOUR_API_KEY';
const APPLICATION_NAME = 'My Application';
const APPLICATION_VERSION = '1.0';
 
tt.setProductInfo(APPLICATION_NAME, APPLICATION_VERSION);

Вы должны отредактировать эту информацию, чтобы отразить информацию о вашем собственном продукте. Там, где появляется «YOUR_API_KEY», замените его ключом API, который вы получили ранее в этой статье.

Отображение карты

Затем мы создадим карту, свяжем ее с элементом DIV, который будет ее содержать, и отцентрируем/увеличим карту до нужного места (мост Золотые Ворота). Для простоты мы жестко закодировали широту и долготу местоположения в константе:

const GOLDEN_GATE_BRIDGE = {lng: -122.47483, lat: 37.80776};
 
var map = tt.map({
  key: API_KEY,
  container: 'map-div',
  center: GOLDEN_GATE_BRIDGE,
  zoom: 12
});

Обратите внимание, что мы выбрали уровень масштабирования 12, чтобы отобразить как мост, так и часть окружающего города Сан-Франциско. Допустимые уровни масштабирования находятся в диапазоне от 0 до 22. Более высокие уровни масштабирования обеспечивают большую детализацию карт, но охватывают меньшую площадь.

С этим кодом наше приложение для отображения карты моста Золотые Ворота полный. Это так просто!

Поиск местоположения для отображения

В реальном мире маловероятно, что мы будем знать широту и долготу желаемого местоположения. Обычный способ найти эту информацию — использовать службу нечеткого поиска, предоставляемую SDK.

К счастью, нам не нужно много делать, чтобы использовать эту службу. Изменить наш предыдущий пример очень просто:

var map = ...
 
tt.services.fuzzySearch({
  key: API_KEY,
  query: 'Golden Gate Bridge'
})
.go()
.then(function(response) {
  map = tt.map({
	key: API_KEY,
	container: 'map-div',
	center: response.results[0].position,
	zoom: 12
  });
});

Большинство служб в SDK, включая нечеткий поиск, выполняются асинхронно. Обычно они возвращают Promise JavaScript.

Чтобы дождаться завершения поиска, мы используем функцию then JavaScript Promise. Там мы передаем анонимную функцию обратного вызова, которая отображает карту местоположения из результатов поиска. В этой функции обратного вызова мы используем код, аналогичный тому, что был представлен ранее, для отображения карты.

Ответ на поиск может включать несколько совпадающих результатов. В нашем коде мы ссылаемся на позицию (широту/долготу) первого (и лучшего) результата сопоставления. Этот результат содержится в нулевом элементе массива.

Вывод

С очень небольшим количеством кода мы быстро создали приложение, которое можно использовать для отображения карты любого желаемого местоположения. Без дополнительного кода карта также является адаптивной, что позволяет пользователю легко масштабировать и перемещать карту.

Используя тот же SDK, вы можете легко улучшить приложение, чтобы пользователи могли искать свои собственные местоположения. , отображать маршруты между местоположениями и добавлять множество других функций.

Для получения полной документации по TomTom Maps SDK для Интернета посетите: https://developer.tomtom.com/maps-sdk-web-js/documentation
Для получения списка дополнительных руководств по использованию SDK посетите: https://developer.tomtom.com/maps-sdk-web-js/tutorials

Ищете другой ресурс для создания карты? Тогда посмотрите наше видео о том, как добавить карту на свой веб-сайт!

Эта статья была впервые опубликована на https://developer.tomtom.com. Автором оригинала является Хосе Хосе Рохас.

Как добавить карту на сайт за 30 секунд