Как правильно подойти к вопросу: какая карта может строить линии с текстом?
Ссылка скопирована
Сейчас ситуация такая: в гугл картах такое вроде как проблемно сделать плюс апи ключ нужен
По вводным: и чтобы была возможность кластеризации и сами кластеры иметь возможность кастомизировать
Нужно решить такую задачу?
Заказать помощь
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Лучший ответ
1
Другие ответы (0)
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопроскомментарий
Вам также может быть интересно
печатные-платы
Как заставить запускаться программу M3.exe от компании Hanxing AOI в инспекционной машине на Windows 7 Pro?
1 ответ
VPN
Как правильно настроить vless для Android TV?
1 ответ
Pyrogram
Как правильно зарегистрировать юзер бота в Telegram?
1 ответ
linkedin
Из-за чего выкидывает из аккаунта LinkedIn?
1 ответ


Если нужно строить линии с подписью, кастомизировать кластеры и не зависеть от ключа Google Maps, я бы смотрел в сторону Leaflet или MapLibre GL JS. Выбор зависит от того, какая карта нужна: простая 2D-карта с маркерами и линиями или более современный векторный рендер с хорошей стилизацией.
Leaflet проще. Для линий используется L.polyline, для текста вдоль линии можно использовать плагины вроде leaflet-polylinedecorator или подписи отдельными marker/divIcon. Для кластеризации есть leaflet.markercluster, который легко кастомизируется.
const map = L.map('map').setView([55.75, 37.61], 10); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); const line = L.polyline([ [55.75, 37.61], [55.80, 37.70] ], { color: '#2563eb' }).addTo(map); L.marker([55.77, 37.65], { icon: L.divIcon({ className: 'line-label', html: 'Маршрут 1' }) }).addTo(map);const map = L.map('map').setView([55.75, 37.61], 10); L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map); const line = L.polyline([ [55.75, 37.61], [55.80, 37.70] ], { color: '#2563eb' }).addTo(map); L.marker([55.77, 37.65], { icon: L.divIcon({ className: 'line-label', html: 'Маршрут 1' }) }).addTo(map);
MapLibre GL JS мощнее, если нужны векторные слои, подписи, стили и производительность на большом количестве объектов. Для линий можно добавить GeoJSON source и line layer, а подпись сделать symbol layer по тем же данным.
map.addSource('routes', { type: 'geojson', data: routesGeoJson }); map.addLayer({ id: 'route-lines', type: 'line', source: 'routes', paint: { 'line-color': '#2563eb', 'line-width': 3 } }); map.addLayer({ id: 'route-labels', type: 'symbol', source: 'routes', layout: { 'text-field': ['get', 'name'], 'symbol-placement': 'line' } });map.addSource('routes', { type: 'geojson', data: routesGeoJson }); map.addLayer({ id: 'route-lines', type: 'line', source: 'routes', paint: { 'line-color': '#2563eb', 'line-width': 3 } }); map.addLayer({ id: 'route-labels', type: 'symbol', source: 'routes', layout: { 'text-field': ['get', 'name'], 'symbol-placement': 'line' } });
Если задача типовая и нужна быстрая разработка - Leaflet. Если будет много объектов, сложная стилизация, подписи вдоль линий и кастомный внешний вид карты - MapLibre. Оба варианта позволяют уйти от Google API key, но тайлы все равно нужно брать из легального источника: OpenStreetMap tile policy для больших нагрузок не подходит, лучше использовать свой tile server или провайдера тайлов.