Использование карт TomTom с Vue 3
Мы покажем, как интегрировать TomTom Maps в приложение Vue 3, открыв множество вариантов сопоставления, чтобы вывести ваше приложение на новый уровень.
ВВЕДЕНИЕ
Как интерфейсный разработчик или разработчик полного стека, вам может быть интересно попробовать TomTom Maps SDK для Интернета. В этой статье мы покажем, как интегрировать TomTom Maps в приложение Vue 3, открыв множество вариантов сопоставления, чтобы вывести ваше приложение на новый уровень.
Vue 3 — это новейшая версия Vue.js, одной из самых популярных библиотек JavaScript — наряду с React и Angular — для создания пользовательских интерфейсов. После работы с Angular.js для Google Эван Ю создал исходный фреймворк Vue JavaScript в 2013 году и выпустил его в 2014 году. Затем, после двух лет разработки, его команда выпустила версию 3 18 сентября 2020 года.
Новые функции и изменения Vue 3 включают в себя:
- Composition API: набор аддитивных функциональных API (интерфейсов прикладного программирования), обеспечивающих гибкую логическую композицию компонентов.
- Новый метод createApp() для создания приложения Vue вместо нового Vue({}).
- Система Vue 3 reactivity теперь построена поверх ECMAScript 6 Proxies.
- Полная поддержка TypeScript: Vue 3 написан на TypeScript, поэтому вам не нужны дополнительные инструменты для использования TypeScript с Vue.
- Телепорт: новая функция, позволяющая визуализировать компонент в другом месте модуля объекта документа (DOM), упрощая создание модальных окон, всплывающих окон и т. д.
С каждым днем популярность Vue.js среди разработчиков растет. Кроме того, Vue.js уже начали использовать крупные компании, включая Alibaba, Grammarly и Laracasts.
Карты TomTom хорошо интегрируются с популярной библиотекой Vue.js. Вы можете легко интегрировать карты TomTom в режиме реального времени и данные о трафике с глобальным охватом и расширенными функциями в свое приложение Vue 3 с помощью TomTom Maps SDK для Интернета. Этот комплект для разработки программного обеспечения скрывает сложность простых вызовов службы RESTful от разработчиков и повышает производительность с помощью полностью настраиваемых и легко настраиваемых компонентов.
В следующем разделе мы узнаем, как создать новое приложение Vue 3 с помощью Vue CLI (интерфейс командной строки), а затем интегрируем TomTom Maps SDK из CDN (сети доставки контента).
НАСТРОЙКА
Прежде чем создавать наш проект, давайте начнем с установки Vue CLI, который является официальным инструментом для инициализации проектов Vue.
В качестве предварительного условия для установки и использования Vue CLI в вашей системе должны быть установлены Node.js и npm (менеджер пакетов Node). Если это не так, вы можете установить Node.js одним из следующих способов:
- Перейдите на официальный сайт и скачайте установщики для вашей операционной системы.
- Используйте официальный менеджер пакетов для вашей системы.
- Используйте диспетчер версий Node, например NVM, который позволит вам управлять несколькими версиями Node на вашем компьютере для разработки. Это также позволяет избежать использования sudo в Linux и macOS или запроса с доступом администратора для глобальной установки пакетов в вашей системе.
Теперь перейдите в новый интерфейс командной строки и выполните следующую команду:
$ npm install -g @vue/cli
Примечание. Если ваша система требует, чтобы вы добавили sudo к своей команде в системах на базе macOS или Debian или использовали приглашение CMD с правами администратора в Windows для установки пакета, вам необходимо исправить свои разрешения. Вы можете обратиться к веб-сайту npm за инструкциями или просто использовать диспетчер версий, такой как NVM, который позаботится обо всех необходимых конфигурациях.
Предыдущая команда установит vue/cli v4.5.8 (текущая версия на момент написания).
Затем давайте создадим новый проект Vue 3, используя следующую команду:
$ vue create vue3tomtomdemo
Вам будет предложено выбрать пресет. Выберите «По умолчанию» (предварительный просмотр Vue 3) ([Vue 3] babel, eslint).
Подождите, пока CLI создаст файлы вашего проекта и установит зависимости из npm, затем перейдите в папку проекта и запустите сервер разработки, используя следующие команды:
$ cd vue3tomtomdemo
$ npm run serve
Откройте веб-браузер и перейдите на http://localhost:8080/, чтобы увидеть, как ваше приложение Vue 3 запущено и Бег.
ДОБАВЛЕНИЕ КАРТЫ
Теперь давайте создадим компонент Vue 3 и добавим карту TomTom. Мы будем использовать Composition API, новый в Vue 3.
Мы узнаем, как инициализировать карту TomTom и прикрепить ее к элементу DOM в нашем компоненте, когда он загружается, используя функцию ref, чтобы получить ссылку на необработанный элемент DOM, где он нам нужен для вставки карты.
Во-первых, вам нужно зарегистрировать ключ API. См. Как получить ключ TomTom API? Чтобы получить больше информации.
Последняя версия TomTom Maps SDK for Web доступна по трем каналам распространения: CDN, пакет npm или загруженный ZIP-файл. Выберите тот, который подходит вам лучше всего. Для примера в этом сообщении блога мы будем использовать дистрибутив CDN. (На момент написания последней общедоступной версией была версия 5.)
Откройте файл public/index.html и включите файлы CSS и JavaScript для SDK следующим образом:
<html lang="en"> <head> <!-- [...] --> <link rel='stylesheet' type='text/css' href='https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.64.0/maps/maps.css'> </head> <body> <!-- [...] --> <div id="app"></div> <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.64.0/maps/maps-web.min.js"></script> <script src="https://api.tomtom.com/maps-sdk-for-web/cdn/5.x/5.64.0/services/services-web.min.js"></script> </body> </html>
Обратите внимание, что ссылка на версию CDN включает в себя как файл maps-web.min.js для SDK, так и файл maps.css для стилей.
Затем внутри папки src/components/ нашего проекта создайте файл Map.js и добавьте следующий код для создания компонента Vue 3:
<template>
<h1>Vue 3 TomTom Maps Demo</h1>
<div id='map' ref="mapRef"></div>
</template>
<script>
export default {
name: 'Map',
}
</script>
Мы просто создали компонент с именем Map, который отображает заголовок и элемент ‹div›, куда он должен вставлять нашу карту. Мы также добавили ссылку с именем mapRef и карту с именем ID в контейнер карты, чтобы мы могли ссылаться на нее позже из разделов стиля и скрипта нашего компонента.
Затем добавьте следующие импорты:
<script>
import { onMounted, ref } from 'vue'
export default {
name: 'Map',
// [...]
Затем добавьте в компонент метод setup() со следующим кодом для инициализации и вставки карты в DOM:
export default {
name: 'Map',
setup() {
const mapRef = ref(null);
onMounted(() => {
const tt = window.tt;
var map = tt.map({
key: '<INSERT API KEY HERE>',
container: mapRef.value,
style: 'tomtom://vector/1/basic-main',
});
map.addControl(new tt.FullscreenControl());
map.addControl(new tt.NavigationControl());
})
return {
mapRef,
};
}
}
Внутри метода setup() мы использовали функцию ref для создания ссылочной переменной с именем mapRef, которая позволит нам получить доступ к элементу DOM, куда мы хотим вставить карту.
Затем мы вызвали метод жизненного цикла onMounted() для запуска кода, когда наш компонент монтируется в DOM. Это создаст объект карты и добавит два элемента управления, что позволит пользователю переключаться в полноэкранный режим и перемещаться по карте. Наконец, мы вернули переменную mapRef из метода setup(), чтобы сделать ее доступной из шаблона компонента.
Затем добавьте следующие стили CSS под разделом ‹style›‹/style›:
<style>
#map {
height: 50vh;
width: 50vw;
}
</style>
Это устанавливает высоту и ширину карты равными половине окна просмотра.
ДОБАВЛЕНИЕ ОБЪЕКТОВ КАРТЫ
Теперь давайте добавим в наш компонент Map метод, который добавляет маркер на карту.
Под методом onMounted() компонента определите следующую функцию:
function addMarker(map) {
const tt = window.tt;
var location = [-121.91595, 37.36729];
var popupOffset = 25;
var marker = new tt.Marker().setLngLat(location).addTo(map);
var popup = new tt.Popup({ offset: popupOffset }).setHTML("Your address!");
marker.setPopup(popup).togglePopup();
}
Согласно документации класса Popup, атрибут смещения принимает смещение в пикселях, которое применяется к местоположению всплывающего окна и может быть указано как:
- одно число, указывающее расстояние от местоположения всплывающего окна
- объект Maps.PointLike, указывающий постоянное смещение в виде массива или координат в пикселях
- объект Points, определяющий смещение для каждой позиции привязки. Отрицательные смещения указывают влево и вверх.
Предыдущее смещение позволит нам отобразить всплывающее окно поверх маркера. Мы используем одно число, указывающее расстояние от местоположения всплывающего окна.
Затем вызовите метод внутри метода onMounted() и передайте объект карты следующим образом:
onMounted(() => {
// [...]
addMarker(map);
})
Подробнее см. в разделе Как добавить и настроить маркер местоположения.
ПОЛУЧЕНИЕ АДРЕСА С ОБРАТНЫМ ГЕОКОДИРОВАНИЕМ
С нашим маркером, добавленным на карту, давайте посмотрим, как мы можем получить адрес, соответствующий нашим координатам, и отобразить его во всплывающем окне с помощью API обратного геокодирования.
Давайте создадим для этого новую функцию, добавив следующий код после функции addMarker:
function reverseGeocoding(marker, popup) {
const tt = window.tt;
tt.services.reverseGeocode({
key: 'iTF86GRA2V5iGjM6LMMV54lrK8v6zC1w',
position: marker.getLngLat()
}).go().then( function( result ){
console.log(result.addresses[0].address.freeformAddress);
popup.setHTML(result.addresses[0].address.freeformAddress);
})
}
Мы вызываем метод reverseGeocode() с нашим ключом API и положением маркера, которое мы можем получить, вызвав метод getLngLat() маркера. Затем в методе then() возвращенного промиса мы извлекаем адрес из объекта результата и вызываем метод setHTML() всплывающего окна, чтобы установить адрес, который будет отображаться.
Затем нам нужно обновить функцию addMarker, чтобы вызвать функцию reverseGeocoding, прежде чем мы установим адрес следующим образом:
function addMarker(map) {
const tt = window.tt;
var location = [-121.91595, 37.36729];
var popupOffset = 25;
var marker = new tt.Marker().setLngLat(location).addTo(map);
var popup = new tt.Popup({ offset: popupOffset });
reverseGeocoding(marker, popup);
marker.setPopup(popup).togglePopup();
}
ИСПОЛЬЗОВАНИЕ КАРТЫ
Теперь, когда мы создали компонент карты, пришло время его использовать!
Откройте файл src/App.vue и обновите его следующим образом:
<template>
<Map />
</template>
<script>
import Map from './components/Map.vue'
export default {
name: 'App',
components: {
Map
}
}
</script>
<style>
</style>
Сначала мы удалили существующий шаблонный код и импортировали компонент карты в наш компонент приложения с помощью оператора импорта. Затем мы включили компонент внутрь объекта компонентов и, наконец, добавили компонент через его тег ‹Map /› в шаблон.
Вы можете найти полный исходный код в этом репозитории GitHub.
Это скриншот нашей готовой карты:
СЛЕДУЮЩИЕ ШАГИ
В этой статье мы видели, как легко добавить карту TomTom в наше приложение Vue 3 с помощью Maps SDK for Web. Но зачем останавливаться на достигнутом? Отображение карты — это только начало. Теперь, когда вы можете визуализировать карту, добавьте дополнительные функции, такие как планирование маршрута и нечеткий поиск. Эти функции помогут вывести ваше приложение на новый уровень, обеспечив еще более удобный пользовательский интерфейс. Зарегистрируйте учетную запись разработчика TomTom прямо сейчас, чтобы начать интеграцию TomTom Maps SDK для Интернета в ваше следующее замечательное приложение.
Эта статья первоначально появилась как https://developer.tomtom.com/blog.
