100 lines
2.9 KiB
TypeScript
100 lines
2.9 KiB
TypeScript
const mapRoot = document.querySelector<HTMLElement>('[data-map]')
|
|
|
|
// Загружаем API Яндекс Карт
|
|
function loadYMaps() {
|
|
return new Promise((resolve, reject) => {
|
|
const script = document.createElement('script')
|
|
script.src = `https://api-maps.yandex.ru/v3/?apikey=${import.meta.env.VITE_YANDEX_MAPS_API_KEY}&lang=ru_RU`
|
|
script.onload = () => {
|
|
// @ts-ignore - ymaps3 будет доступен после загрузки скрипта
|
|
resolve(window.ymaps3)
|
|
}
|
|
script.onerror = () => reject(new Error('Failed to load Yandex Maps API'))
|
|
document.body.appendChild(script)
|
|
})
|
|
}
|
|
|
|
async function initMap() {
|
|
if (!mapRoot) return
|
|
const ymaps3: any = await loadYMaps()
|
|
await ymaps3.ready
|
|
const { YMap, YMapDefaultSchemeLayer, YMapDefaultFeaturesLayer, YMapMarker } = ymaps3
|
|
|
|
// Координаты центра
|
|
const coordinates = mapRoot!.getAttribute('data-coordinates')
|
|
const center = coordinates!.split(',').reverse()
|
|
|
|
// Создаем слой
|
|
const layer = new YMapDefaultSchemeLayer({
|
|
customization: [
|
|
{
|
|
tags: {
|
|
any: ['road'],
|
|
},
|
|
elements: 'geometry',
|
|
stylers: [
|
|
{
|
|
color: '#4E4E4E',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
tags: {
|
|
any: ['water'],
|
|
},
|
|
elements: 'geometry',
|
|
stylers: [
|
|
{
|
|
color: '#000000',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
tags: {
|
|
any: ['landscape', 'admin', 'land', 'transit'],
|
|
},
|
|
elements: 'geometry',
|
|
stylers: [
|
|
{
|
|
color: '#212121',
|
|
},
|
|
],
|
|
},
|
|
{
|
|
tags: {
|
|
any: ['building'],
|
|
},
|
|
elements: 'geometry',
|
|
stylers: [
|
|
{
|
|
color: '#757474',
|
|
},
|
|
],
|
|
},
|
|
],
|
|
})
|
|
|
|
// Создаем карту
|
|
const map = new YMap(mapRoot, {
|
|
location: {
|
|
center,
|
|
zoom: 17,
|
|
},
|
|
showScaleInCopyrights: false,
|
|
})
|
|
|
|
// Создаем маркер
|
|
const markerElement = document.createElement('img')
|
|
markerElement.className = 'icon-marker'
|
|
markerElement.src = 'images/pin.svg'
|
|
const marker = new YMapMarker({ coordinates: center }, markerElement)
|
|
|
|
// Добавляем элементы на карту
|
|
map.addChild(new YMapDefaultFeaturesLayer())
|
|
map.addChild(layer)
|
|
map.addChild(marker)
|
|
map.setBehaviors(['drag', 'pinchZoom', 'mouseRotate', 'mouseTilt'])
|
|
}
|
|
|
|
initMap()
|