0

как по клику в конкретную область России получать название этого региона в yandex map?!
ни по точке, ни по ещё какой то х"рне, которую почему то все на форумах,
за каким то х"ром, спрашивают вместо нормальных вопросов!

у меня есть вот такая карта: я разбил её на полигоны и сделал вывод названия страны при нажатии на неё, но мне нужно, чтобы в России можно было получать названия регионов.

введите сюда описание изображения

Вот так должно быть, но:

  1. это какой-то баг, ибо при каждой перезагрузке страницы то одно,
    то другое (то как на первом скрине, то как на втором)
  2. только тут оно при наведении работает,
    а мне же нужно при нажатии, чтобы я отлавливать корректно мог

как должно быть

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>

1 ответ 1

0

Яндекс убрал из документации и прекратил поддержку и обновление модуля «Регионы». Как следствие, он возвращает неактуальные данные и может быть полностью отключен в любой момент.

Сейчас разработку карты с делением на регионы имеет смысл вести лишь на сторонней geojson-базе полигонов, добавляя их на карту сразу в нужном цвете и с нужным балуном.

Кастомизация подложки доступна в JS API 3.0. Для удобства редактирования мы собрали удобный редактор.

2
  • а как js api 3.0 использовать на localhost? в настройках ключа, как я понял, нужно настроить ограничения по ip и HTTP Referer, но как, если у меня сейчас localhost?
    – ralph
    Commented 22 июн. в 3:12
  • В настройках ключа в поле Referrer добавить просто localhost, и всё заработает локально. Только не сразу, через 15 минут обещают. Я поставил, потыкался, не заработало, отчаялся и пошёл спать, на следующий день всё просто заработало без дополнительных телодвижений. @YaSupport вы б добавили подсказку в форме редактирования IP и Referrer, как для локальной разработки это настроить, ведь это же вообще все разработчики используют - сначала локально разрабатывают на каком-нибудь localhost:3000, а потом только в прод. Куча вопросов тут уже на SO, как ключ локально заставить работать. Commented 11 сент. в 9:34

Ваш ответ

Нажимая «Отправить ответ», вы соглашаетесь с условиями пользования и подтверждаете, что прочитали политику конфиденциальности.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.