0

$(document).ready(function(){
    var map_id = $('#map');

    if (map_id.length) {
/*
*** START
*/
        ymaps.ready(init);

        var myMap, myRectangle;

        function init(){

            myMap = new ymaps.Map("map", {
                center: [53.128851, 50.107236],
                zoom: 17,
                controls: [],
            });

            function clickGoto() {

                // город
                var city = this.getAttribute('data-goto'); 

                // получение координат по адресу - асинхронная функция
                var myGeocoder = ymaps.geocode(city);
                myGeocoder.then(
                    function(res) {
                        coords = res.geoObjects.get(0).geometry.getCoordinates();

                        // переходим по координатам
                        myMap.panTo(coords, {
                            flying: 1
                        });

                        // добавляем маркер
                        var placeMark = new ymaps.Placemark(coords, {
                            balloonContent: city
                        });
                        myMap.geoObjects.add(placeMark);
                        placeMark.balloon.open();
                    },
                    function(err) {
                        alert('Ошибка');
                    }
                );
                return false;
            }

            // навешиваем обработчики
            var col = document.getElementsByClassName('goto');
            for (var i = 0, n = col.length; i < n; ++i) {
                col[i].onclick = clickGoto;
            }
            
            /*
            myMap.balloon.open(myMap.getCenter(), {
                contentBody: '<div style="display: inline-block; margin-right: 10px"><img src="#" alt=""></div>' + '<div style="display: inline-block">' + '<p style="margin-bottom: 0">test</p >' + ' <p style="margin-bottom: 0">test</p>' + ' <p style="margin-bottom: 0">test</p></div>'
            }, {
                closeButton: false,
            });
            */


/*
*** Создаем многоугольник, используя вспомогательный класс Polygon.
*/
            var myPolygon = new ymaps.Polygon([
                [
                    [53.128822,50.108663],
                    [53.12979,50.107354],
                    [53.129016,50.10568],
                    [53.128261,50.107043]
                ],

            ], {
                // Описываем свойства геообъекта.
                // Содержимое балуна.
                hintContent: "Многоугольник"
            }, {
                // Задаем опции геообъекта.
                // Цвет заливки.
                fillColor: "#DB7093",
                strokeColor: "#990066",
                fillOpacity: 0.24565,
                strokeOpacity: 0.8,
                strokeWidth: 3,

            });

            // Добавляем объекты на карту.
            myMap.geoObjects.add(myPolygon);
        }
/*
*** END
*/
    };

/*
*** END
*/
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru-RU" type="text/javascript"></script>


<div id="map" style="width:400px; height:300px"></div>

<a href="#" class="goto" data-goto="Россия, Москва, Красная площадь, 1" title="Москва">Россия, Москва, Красная площадь, 1</a><br>
<a href="#" class="goto" data-goto="Украина, Киев, улица Крещатик, 1/2" title="Киев">Украина, Киев, улица Крещатик, 1/2</a><br>
<a href="#" class="goto" data-goto="Россия, Свердловская область, Екатеринбург, проспект Ленина, 1" title="Екатеринбург">Россия, Свердловская область, Екатеринбург, проспект Ленина, 1</a><br>
<a href="#" class="goto" data-goto="Украина, Одесса, Приморский бульвар, 1" title="Одесса">Украина, Одесса, Приморский бульвар, 1</a>

<div id="result"></div>

Использовал пример из этого вопроса в коде для перемещения по карте с помощью ссылок.

Теперь вопрос таков - как можно реализовать переключение балуна и выделения области при переходе по ссылкам, чтобы при переходе к области отображались только ее балун (который, если не ошибаюсь, может быть открыт только в единственном экземпляре) и выделенная область?

И один момент, который не появляется в этом примере - при использовании placeMark.balloon.open(); приходится нажимать на ссылку три раза, чтобы позиция оказалась в центре карты - т.е. сначала происходит просто смещение, затем выдвигается балун, потом уже встает на свое место. Что может влиять на это?

2
  • А что должен обозначать полигон? Это всегда фиксированая область вокруг точки (тогда вероятно лучше использовать круг) или для каждой локации есть собственные границы полигона, который надо отобразить?
    – Reni
    Commented 5 дек. 2017 в 10:07
  • Да, каждая локация имеет свои очертания.
    – Abaddorer
    Commented 5 дек. 2017 в 10:33

1 ответ 1

1

Если нужно добавлять полигон с особенной заранее известной геометрией при переходе к каждой из точек, то нужно сначала сохранить соответствие адрес - координаты геометрии полигона. По факту в коде достаточно создать один полигон и только менять его координаты при клике на ссылку с адресом методом geometry.setCoordinates() полигона.

При открытии балуна происходит смещение карты, чтобы метка и балун попали в видимую область, но это не гарантирует центрирования на объекте. Желаемый центр карты можно сразу установить в нужную точку методом карты setCenter().

Поправила ваш пример, но не стала делать выбор координат для каждого из городов. Показала логику только на примере Москвы.

$(document).ready(function() {
  var map_id = $('#map');

  if (map_id.length) {
    /*
     *** START
     */
    ymaps.ready(init);

    var myMap, myRectangle;

    function init() {

      myMap = new ymaps.Map("map", {
        center: [53.128851, 50.107236],
        zoom: 17,
        controls: [],
      });

      function clickGoto() {

        // город
        var city = this.getAttribute('data-goto');

        //пример задания координат для одного из городов
        //в реальном коде cityCoords должны выбираться в зависимости от нажатой ссылки 
        var cityCoords = [
          [
            [55.7545, 37.6170],
            [55.756, 37.6170],
            [55.756, 37.619],
            [55.7545, 37.619]
          ]
        ];

        // получение координат по адресу - асинхронная функция
        var myGeocoder = ymaps.geocode(city);
        myGeocoder.then(
          function(res) {
            coords = res.geoObjects.get(0).geometry.getCoordinates();

            // переходим по координатам
            myMap.panTo(coords, {
              flying: 1
            });

            // добавляем маркер
            var placeMark = new ymaps.Placemark(coords, {
              balloonContent: city
            });
            myMap.geoObjects.add(placeMark);
            // в этой строке меняем геометрию полигона на ту, которая соответсвует выбранному городу
            //в реальном коде cityCoords должны выбираться в зависимости от нажатой ссылки 
            myPolygon.geometry.setCoordinates(cityCoords);
            //позволяет выставить центр карты в координаты адреса
            myMap.setCenter(coords);
            placeMark.balloon.open();
          },
          function(err) {
            alert('Ошибка');
          }
        );
        return false;
      }

      // навешиваем обработчики
      var col = document.getElementsByClassName('goto');
      for (var i = 0, n = col.length; i < n; ++i) {
        col[i].onclick = clickGoto;
      }

      /*
       *** Создаем многоугольник, используя вспомогательный класс Polygon.
       */
      var myPolygon = new ymaps.Polygon([
        [
          [53.128822, 50.108663],
          [53.12979, 50.107354],
          [53.129016, 50.10568],
          [53.128261, 50.107043]
        ],

      ], {
        // Описываем свойства геообъекта.
        // Содержимое балуна.
        hintContent: "Многоугольник"
      }, {
        // Задаем опции геообъекта.
        // Цвет заливки.
        fillColor: "#DB7093",
        strokeColor: "#990066",
        fillOpacity: 0.24565,
        strokeOpacity: 0.8,
        strokeWidth: 3,

      });

      // Добавляем объекты на карту.
      myMap.geoObjects.add(myPolygon);
    }
    /*
     *** END
     */
  };

  /*
   *** END
   */
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://api-maps.yandex.ru/2.1/?lang=ru-RU" type="text/javascript"></script>


<div id="map" style="width:400px; height:300px"></div>

<a href="#" class="goto" data-goto="Россия, Москва, Красная площадь, 1" title="Москва">Россия, Москва, Красная площадь, 1</a><br>
<a href="#" class="goto" data-goto="Украина, Киев, улица Крещатик, 1/2" title="Киев">Украина, Киев, улица Крещатик, 1/2</a><br>
<a href="#" class="goto" data-goto="Россия, Свердловская область, Екатеринбург, проспект Ленина, 1" title="Екатеринбург">Россия, Свердловская область, Екатеринбург, проспект Ленина, 1</a><br>
<a href="#" class="goto" data-goto="Украина, Одесса, Приморский бульвар, 1" title="Одесса">Украина, Одесса, Приморский бульвар, 1</a>

<div id="result"></div>

Ваш ответ

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

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