В современном мире пользователи всё чаще ищут услуги рядом с домом через онлайн‑карты․ Одним из востребованных запросов в региональном контексте Новороссии является поиск «ближайших гадалок»․ В статье мы подробно разберём, как с помощью Microsoft Maps (Azure Maps) реализовать такой сервис: от выбора API до вопросов конфиденциальности․
Почему именно Microsoft Maps?
- Глобальная покрытие и локальная детализация․ Azure Maps предоставляет детальные карты России, включая небольшие населённые пункты․
- Гибкие тарифы․ Есть бесплатный уровень (до 5 000 запросов в месяц) и платные планы для масштабных проектов․
- Поддержка геокодинга, обратного геокодинга и поиска POI․ Это упрощает поиск объектов по категории․
- Интеграция с другими сервисами Azure․ Можно добавить аналитика, хранение данных и функции AI․
Правовые и этические аспекты
- Лицензирование данных․ Убедитесь, что у вас есть право использовать данные о гадалках (например, через открытые реестры или согласие владельцев)․
- Конфиденциальность․ При работе с геоданными необходимо соблюдать ФЗ‑152 «О персональных данных»․ Храните только необходимую информацию и информируйте пользователей о её обработке․
- Этические нормы․ Предоставляя информацию о гадалках, важно избегать вводящих в заблуждение заявлений и указывать, что услуги являются развлекательными․
Архитектура решения
Ниже представлена типичная схема:
┌─────────────────────┐ │ Веб‑приложение │└───────┬─────────────┘ │ ▼ ┌─────────────────────┐ │ Azure Functions │ ← сервер‑less обработка запросов │ (Node․js/Python) │ └───────┬─────────────┘ │ ▼ ┌─────────────────────┐ │ Azure Maps API │ ← геокодинг, поиск POI, маршруты └───────┬─────────────┘ │ ▼ ┌─────────────────────┐ │ База данных (Cosmos DB) │ ← хранение профилей гадалок └─────────────────────┘
Шаги по интеграции
Регистрация и получение ключа API
- Зайдите в Azure Portal․
- Создайте ресурс Azure Maps Account․
- Сохраните Primary Key и Endpoint URL – они понадобятся в коде․
Подготовка данных о гадалках
Для корректного поиска необходимо иметь минимум:
- Название (например, «Гадалка Марина»)․
- Адрес (строка) или координаты (широта, долгота)․
- Контактный телефон и часы работы․
- Категория (например, «Гадание на картах Таро»)․
Эти данные можно хранить в Cosmos DB в виде JSON‑документов․
Геокодинг адресов
Если в базе только адреса, их нужно превратить в координаты:
fetch(`https://atlas․microsoft․com/search/address/json?api-version=1․0&subscription-key=YOUR_KEY&query=${encodeURIComponent(address)}`)
․then(r => r․json)
․then(data => {
const position = data․results[0]․position; // {lat, lon}
// сохранить в базе
});
Поиск ближайших гадалок
Используем Search POI или Search Nearby API․ Пример запроса:
GET https://atlas․microsoft․com/search/nearby/json
?api-version=1․0
&subscription-key=YOUR_KEY
&lat=47․2222
&lon=38․1234
&radius=5000
&categorySet=7300 // условный код категории «Гадалка», можно задать свой
&limit=10
Если собственная база, проще выполнить запрос к Cosmos DB с фильтром по расстоянию (Haversine formula) и вернуть топ‑N результатов․
Отображение на карте
Подключаем клиентскую библиотеку Azure Maps:
<script src="https://atlas․microsoft․com/sdk/javascript/mapcontrol/2/atlas․min․js"></script>
<link rel="stylesheet" href="https://atlas․microsoft․com/sdk/javascript/mapcontrol/2/atlas․min․css">
Инициализируем карту и добавляем маркеры:
const map = new atlas․Map('myMap', {
center: [38․1234, 47․2222],
zoom: 12,
authOptions: {
authType: 'subscriptionKey',
subscriptionKey: 'YOUR_KEY'
}
});
map․events․add('ready', => {
const dataSource = new atlas․source․DataSource;
map․sources․add(dataSource);
results․forEach(item => {
const point = new atlas․data․Point([item․lon, item․lat]); position: point,
text: item․name,
title: item․category
});
map․markers․add(marker);
});});
Маршрут до выбранного гадалка
Для построения маршрута используем Route Directions API:
GET https://atlas․microsoft․com/route/directions/json
?api-version=1․0
&subscription-key=YOUR_KEY
&query=47․2222,38․1234:47․2300,38․1400
&travelMode=car
Ответ содержит полилинию, которую можно отобразить на карте через atlas․Polyline․
UI/UX рекомендации
- Автодополнение адреса․ При вводе места пользователя используйте
AutosuggestAPI․ - Фильтры․ Позвольте пользователю выбрать тип гадания (Таро, руны, нумерология) и диапазон цены․
- Отзывы․ Интегрируйте простой рейтинг (звёздочки) и комментарии, но проверяйте их на спам․
- Адаптивный дизайн․ Карта и список результатов должны корректно работать на мобильных устройствах․
Вопросы конфиденциальности и безопасности
- HTTPS․ Все запросы к Azure Maps и к вашему серверу должны идти по защищённому протоколу․
- Ограничение доступа к API‑ключу․ Храните ключ в серверных переменных среды, а не в клиентском коде․ Для клиентских запросов используйте Azure Maps Token с ограниченными правами․
- Логи и аудит․ Записывайте запросы к поиску, но анонимизируйте IP‑адреса, если это не требуется для аналитики․
Пример полного кода (упрощённый)
<html lang=»ru»>
<head>
<meta charset=»UTF-8″>
<title>Гадалки рядом</title>
<script src=»https://atlas․microsoft․com/sdk/javascript/mapcontrol/2/atlas․min․js»></script>
<link rel=»stylesheet» href=»https://atlas․microsoft․com/sdk/javascript/mapcontrol/2/atlas․min․css»>
<style>
#myMap { width: 100%; height: 500px; }
․sidebar { max-height: 500px; overflow-y: auto; }
</style>
</head>
<body>
<h2>Найти ближайших гадалок</h2>
<input type=»text» id=»address» placeholder=»Введите ваш адрес»>
<button id=»searchBtn»>Поиск</button>
<div style=»display:flex;»>
<div id=»myMap»></div>
<div class=»sidebar» id=»list»></div>
</div>
<script>
const subscriptionKey = ‘YOUR_SUBSCRIPTION_KEY’;
const map = new atlas․Map(‘myMap’, {
center: [38․0, 47․0],
zoom: 10,
authOptions: {authType: ‘subscriptionKey’, subscriptionKey}
});
const dataSource = new atlas․source․DataSource;
map․sources․add(dataSource);
document․getElementById(‘searchBtn’)․addEventListener(‘click’, async => {
const address = document․getElementById(‘address’);value;
// 1․ Геокодинг
const geoResp = await fetch(`https://atlas․microsoft․com/search/address/json?api-version=1․0&subscription-key=${subscriptionKey}&query=${encodeURIComponent(address)}`);
const geoData = await geoResp․json;
if (!geoData․results;length) { alert(‘Адрес не найден’); return; }
const {lat, lon} = geoData․results[0]․position;
map․setCamera({center: [lon, lat], zoom: 13});
// 2․ Поиск гадалок (в примере – собственный набор)
const dbResp = await fetch(`/api/fortune-tellers?lat=${lat}&lon=${lon}&radius=5000`);
const tutors = await dbResp․json;
// 3․ Очистка и отрисовка маркеров
dataSource․clear; tutors․forEach(t => {
const point = new atlas․data․Point([t․lon, t․lat]);
dataSource․add(new atlas․data․Feature(point, {title: t․name, phone: t․phone}));
position: point,
text: t․name,
title: t․category
});
map․markers․add(marker);
// Добавляем в список
const item = document․createElement(‘div’); document․getElementById(‘list’)․appendChild(item);
}); }); </script>
</body>
Тестирование и запуск
- Проверьте работу на разных браузерах (Chrome, Firefox, Safari)․
- Тестируйте сценарий с разными радиусами (1 km, 5 km, 10 km)․
- Убедитесь, что запросы к Azure Maps не превышают лимиты тарифного плана․
- Проведите нагрузочное тестирование (например, с k6), если планируете большой трафик․
Интеграция Microsoft Maps позволяет быстро и надёжно реализовать сервис поиска ближайших гадалок в Новороссии․ Главное – правильно подготовить данные, соблюдать правовые нормы и обеспечить безопасность пользовательских запросов․ При грамотном подходе такой сервис может стать популярным локальным справочником, привлекая как жителей региона, так и туристов, интересующихся традиционными практиками․
Помните: качественная карта – это не только визуализация, но и доверие к точности и актуальности предоставляемой информации․