как по клику в конкретную область России получать название этого региона в yandex map?!
ни по точке, ни по ещё какой то х"рне, которую почему то все на форумах,
за каким то х"ром, спрашивают вместо нормальных вопросов!
у меня есть вот такая карта: я разбил её на полигоны и сделал вывод названия страны при нажатии на неё, но мне нужно, чтобы в России можно было получать названия регионов.
Вот так должно быть, но:
- это какой-то баг, ибо при каждой перезагрузке страницы то одно,
то другое (то как на первом скрине, то как на втором) - только тут оно при наведении работает,
а мне же нужно при нажатии, чтобы я отлавливать корректно мог
ps1: я уже видел этот геокодер - там снова нужно какой-то api ключ получать, я уже закалебался их делать... и тем более, как то же я ведь могу при наведении получать названия регионов без этого геокодера, значит можно и при нажатии сделать же
ps2: если ещё поможете с тем, как изменить цвет карты на тот, который захочу, вообще от души (у меня в js уже есть строчка по этому поводу, там белый цвет получается, а я хочу в цвет сайта сделать, чтобы сливалось и красивенько было)
код
js:
function init() {
//Создаем карту
let map = new ymaps.Map('map', {
center: [50, 30],
zoom: 2,
controls: [],
type: null //отключает стандартную подложку карты
}, {
minZoom: 1, //ограничиваем зум карты
maxZoom: 5,
restrictMapArea: [
[85, -169],
[-70, 190],
], //ограничиваем область видимости карты
});
// map.controls.remove('geolocationControl');
// map.controls.remove('searchControl');
// map.controls.remove('zoomControl');
// map.controls.remove('trafficControl');
// map.controls.remove('typeSelector');
// map.controls.remove('fullscreenControl');
// map.controls.remove('rulerControl');
// Добавляем белый фон карты
map.layers.add(new ymaps.Layer('https://sandbox.api.maps.yandex.net/examples/ru/2.1/azimuthal_map/images/tiles_arctic/3/tile-0-0.jpg'));
ymaps.borders.load('RU').then(function (geojson) {
let regions = ymaps.geoQuery(geojson);
regions.addToMap(map);
});
ymaps.borders.load('001', {lang: 'ru', quality: 1}).then(function (geojson) {
let regions = ymaps.geoQuery(geojson);
regions.search('properties.iso3166 = "TR"').setOptions('fillColor', '#ff001a').addToMap(map);
});
// загружаем страны мира (код '001') на русском языке в стандартном качестве
ymaps.regions.load('001', {
lang: 'ru',
quality: 1
}).then(function(result) {
let regions = result.geoObjects; // ссылка на коллекцию GeoObjectCollection
// настраиваем дефолтный внешний вид полигонов
regions.options.set({
fillColor: '#8ca9cf99',
strokeColor: '#FFF',
pixelRendering: 'static',
hasHint: false
});
// перекрашиваем нужные регионы
regions.each(function(reg) {
if (reg.properties.get('name') == "Россия" || reg.properties.get('name') == "Беларусь" || reg.properties.get('name') == "Украина") {
// Меняем цвет
reg.options.set('fillColor', '#89e8e099')
}
});
// обрабатываем клики по странам
result.geoObjects.events.add('click', function(e) {
console.log(e.get('target'));
// определяем полигон, в который кликнули, и координаты клика
let regClicked = e.get('target'),
coords = e.get('coords');
// открываем балун с названием страны в точке клика
regClicked.properties.set('balloonContent', regClicked.properties.get('name'));
regClicked.balloon.open(coords);
console.log(regClicked.properties.get('name'));
});
// добавляем регионы на карту
map.geoObjects.add(regions);
}, function() {
// коллбек на случай незагрузки регионов
alert('No response');
});
// Определяем адрес по координатам (обратное геокодирование).
// async function getAddress(coords) {
// const response = await fetch(`https://geocode-maps.yandex.ru/1.x/?apikey=API&geocode=25.194867,55.274795&format=json`);
// const data = await response.json();
// console.log(data);
// }
}
ymaps.ready(init);
html:
<!DOCTYPE html>
<html lang="ru">
<head>
<script src="https://api-maps.yandex.ru/2.1/?apikey=ваш API-ключ&lang=ru_RU&width=100%&height=100%" type="text/javascript" defer></script>
<script src="https://yandex.st/jquery/2.2.3/jquery.min.js" type="text/javascript" defer></script>
</head>
<body>
<section class="map">
<div class="container map__container">
<div class="map__map" id="map"></div>
</div>
</section>
</body>