Узнайте, как добавлять и отображать несколько местоположений на карте для отслеживания водителей, планирования различных маршрутов и многого другого.
Во многих случаях пользователям ваших веб-приложений может потребоваться просмотреть несколько местоположений на карте. TomTom Maps SDK for Web упрощает этот процесс благодаря использованию React. Использование функционального компонента вместе с TomTom Maps SDK for Web делает отображение нескольких карт на экране плавным и простым.
React позволяет нам создать приложение, содержащее все связанные функции внутри компонента с возможностью многократного повторения. Это одна из самых популярных доступных клиентских платформ, поскольку она позволяет разработчикам легко создавать компоненты и повторно использовать их в качестве строительных блоков для более крупных и сложных приложений.
В этом руководстве мы рассмотрим, как отображать несколько карт с помощью TomTom Maps SDK for Web. Мы начнем с создания функционального компонента React для карты. Затем мы отобразим несколько карт в приложении с помощью компонента. Мы также рассмотрим взаимодействие с несколькими картами в нашем одностраничном приложении (SPA), добавив маркеры к каждому из компонентов. Наконец, мы предоставим параметры для изменения стиля карты.
Давайте начнем!
ПРЕДПОСЫЛКИ
В этой статье используется TomTom Maps SDK для веб-версии 6 и React 17 или выше. Вам понадобится бесплатный ключ API с Портала разработчиков TomTom, чтобы следовать дальше. Учетная запись Freemium предлагает тысячи запросов ежедневно и подходит для коммерческого использования — просто платите по мере роста.
Вам также необходимо создать приложение для реагирования с помощью команды:
npx create-react-app my-app
Кроме того, установите Maps SDK для Интернета с помощью команды в папке my-app:
npm i @tomtom-international/web-sdk-maps –save
Наконец, вы должны быть знакомы с JavaScript и React, чтобы следовать этому руководству. Мы покажем вам, как работать с решениями TomTom.
СОЗДАНИЕ ФУНКЦИОНАЛЬНОГО КОМПОНЕНТА КАРТЫ
Существует четыре основных этапа создания функционального компонента карты. Первым шагом является создание файла map.js для компонента.
Затем импортируйте SDK и лист CSS по умолчанию. Обратите внимание, что вы можете сделать копию и настроить ее по своему вкусу.
import "@tomtom-international/web-sdk-maps/dist/maps.css"; import * as tt from "@tomtom-international/web-sdk-maps";
Затем создайте новый функциональный компонент со следующим:
export function Map(props) {
return <></>
}
Внутри функционального компонента используйте хук useEffect для инициализации карты:
let map = tt.map({
/*
This key will API key only works on this Stackblitz. To use this code in your own project,
sign up for an API key on the TomTom Developer Portal.
*/
key: {your API Key},
container: mapElement.current,
language: language,
style: { map: style },
center: [mapLongitude, mapLatitude],
zoom: mapZoom,
});
setMap(map);
setInitialized(true);
return () => map.remove();
}, []);
Наконец, визуализируйте карту, используя следующий код:
return <div ref={mapElement} className="mapDiv" />
Если вам интересно увидеть подробный пример того, как создать компонент карты с центром вокруг заданной точки (mapLongitude и mapLatitude) с помощью хуков, ознакомьтесь с этой записью в блоге.
ИСПОЛЬЗОВАНИЕ КОМПОНЕНТА КАРТЫ
Компонент карты легко использовать. Перейдите в App.js и добавьте компонент карты в возврат:
function App() {
return (
<div className="App">
<Map />
<Map />
</div>
);
}
Использование компонента позволяет нам добавлять множество экземпляров карты по желанию. Например, это добавит в приложение две одинаковые карты.
function App() {
return (
<div className="App">
<Map />
<Map />
</div>
);
}
Используйте столько компонентов, сколько хотите. Чтобы изменить размер контейнера, используйте селекторы .mapContainer и .mapDiv в файле CSS:
.mapContainer {
margin-top: 25px;
}
.mapDiv{
height: 300px;
width: 300px;
}
Ваше приложение должно выглядеть как этот снимок экрана с двумя картами:
Код с этого шага доступен на StackBlitz.
СОЗДАНИЕ И ДОБАВЛЕНИЕ МАРКЕРОВ
Маркеры — это булавки, которые мы видим на картах, указывающие на определенное место. Мы можем добавить маркеры на карту используя Maps SDK for Web’s Marker API.
var marker = new tt.Marker()
.setLngLat([longitude, latitude])
.addTo(map);
Мы можем создать кнопку Добавить маркер, которая принимает координаты широты и долготы и создает маркер, используя заданные координаты, чтобы продемонстрировать эту функциональность.
Начните с определения состояний для координат:
const [mapLongitude, setMapLongitude] = useState(-121.91599); const [mapLatitude, setMapLatitude] = useState(37.36765);
Затем создайте входные данные, которые сопоставляются с этими значениями:
<Input
type="text"
name="longitude"
value={mapLongitude}
onChange={(e) => setMapLongitude(e.target.value)}
/>
<Input
type="text"
name="latitude"
value={mapLatitude}
onChange={(e) => setMapLatitude(e.target.value)}
/>
<Button color="primary" onClick={addMarker}>
Add Marker
</Button>
Затем создайте функцию addMarker:
const addMarker = () => {
const targetCoordinates = [mapLongitude, mapLatitude];
const marker = new tt.Marker().setLngLat(targetCoordinates).addTo(map);
};
Теперь мы можем добавить всплывающее окно, которое отображается, когда пользователи нажимают на маркер:
var popupOffsets = {
top: [0, 0],
bottom: [0, -50],
left: [25, -35],
right: [-25, -35]
}
var popup = new tt.Popup({ offset: popupOffsets })
.setHTML("Custom Marker");
marker.setPopup(popup);
Используйте marker.togglePopup для управления видимостью всплывающего окна.
Теперь у нас есть все необходимые функции для добавления нескольких маркеров на одну карту, как показано на скриншоте ниже.
ЗАГРУЗКА МАРКЕРА ПОД НАГРУЗКОЙ
Создание маркера для запуска карты позволяет пользователю видеть область вокруг центральной точки карты.
Мы можем сделать это, используя хук useEffect. Хук useEffect выполняет свой код при изменении заданного параметра в компоненте.
Мы уже видели, как использовать его для запуска карты TomTom. Хук useEffect имеет список параметров [], что означает, что он выполняется один раз, когда приложение впервые создает компонент.
Маркеры должны дождаться завершения инициализации карты. Первой попыткой будет вызвать addMarker после вызова setMap.
Инициализация карты еще не завершена, что приводит к ошибке. Однако мы можем ввести другое состояние, чтобы указать, что загрузка карты завершена. Затем мы используем другой хук useEffect, чтобы отреагировать на инициализированное состояние.
useEffect(() => {
if (initialized) {
addMarker();
}
}, [initialized]);
При необходимости мы можем настроить маркеры. Например, мы можем изменить цвет, ширину и высоту маркера, указав эти свойства в нашем новом вызове tt.Marker().
new tt.Marker({
color: ‘#ABABAB’,
width: ‘50px’,
height: ‘50px’,
}
НАСТРОЙКА КОМПОНЕНТА КАРТЫ
Теперь, когда мы изучили, как стилизовать маркер, мы можем увидеть преимущества создания компонента карты. Мы можем передать параметры, чтобы по-разному стилизовать каждый экземпляр карты.
В создании компонента карты участвуют четыре шага:
1. Передайте переменную props в наш компонент, чтобы объявление стало функцией экспорта Map(props).
2. Создайте внутри компонента переменную/состояние, соответствующее определяемому нами свойству, например, const color = props.markerColor ?? «#CCCCCC»; .
3. Используйте переменную для настройки карты. Например, мы можем изменить вызов new tt.Marker() на const marker = new tt.Marker({color: color}), чтобы изменить цвет маркера.
4. Передайте свойство при создании экземпляра компонента, например, ‹Map markerColor="#ABABAB" /›.
Как и маркеры, карта TomTom также настраивается.
Как обсуждалось ранее, одним из вариантов, доступных при создании карты, является координата как комбинация долготы и широты. Чтобы передать его в качестве параметра, все, что нам нужно сделать, это изменить инициализацию состояния с этого:
const [mapLongitude, setMapLongitude] = useState(-121.91599); const [mapLatitude, setMapLatitude] = useState(37.36765);
к тому, который использует входящее свойство:
const [mapLongitude, setMapLongitude] = useState(props.longitude ?? -121.91599); const [mapLatitude, setMapLatitude] = useState(props.latitude ?? 37.36765);
Теперь мы можем установить широту и долготу при выводе карты на экран:
useEffect(() => {
let map = tt.map({
/*
This API key only works on this StackBlitz. To use this code in your own project,
sign up for an API key on the TomTom Developer Portal.
*/
key: {your API Key},
container: mapElement.current,
language: language,
style: { map: style },
center: [mapLongitude, mapLatitude],
zoom: mapZoom,
});
setMap(map);
setInitialized(true);
return () => map.remove();
}, []);
Стиль может быть либо переданным свойством, либо состоянием, переключаемым внутри компонента, см. полную реализацию здесь.
<Button color="primary" onClick={() => {
const toggleStyle = style === 'basic_main' ? 'basic_night' : 'basic_main';
setStyle(toggleStyle);
map.setStyle({map: toggleStyle})
}}>Toggle Style</Button>
СОЕДИНЯЯ ЭТО ВМЕСТЕ
С TomTom вы можете быстро и легко создавать картографические приложения. В этом руководстве мы обсудили создание компонента React с использованием TomTom Maps SDK для Интернета, что позволяет разработчикам настраивать параметры, которые они хотят отображать вокруг компонента. Компонент также позволяет отображать на экране одновременно несколько карт с соответствующими параметрами.
Точно так же мы можем ввести дополнительные свойства, чтобы изменить поведение этого компонента. Использование title и markerText здесь — отличный пример настройки компонента в соответствии с нашими потребностями.
СЛЕДУЮЩИЕ ШАГИ
Отображение карты предлагает гораздо больше возможностей. Например, мы можем отображать на карте информацию о дорожном движении, происшествиях и точках интереса (POI). Мы также можем прикрепить к карте множество обработчиков событий, включая масштабирование и Click&Touch. Ознакомьтесь с документацией по карте и маркеру, чтобы получить полную информацию о возможностях TomTom Web SDK.
Начать работу с TomTom просто! Подпишитесь на бесплатный ключ API и начните творить сегодня.
Эта статья изначально была опубликована на страницеdeveloper.tomtom.com/blog.
