1

Подскажите как решить данную проблему: на странице есть несколько блоков с классом js-address и ссылкой "Показать на карте" внутри них. При клике на эту ссылку на карте должна появляется соответствующая метка с нужными координатами. Координаты я задал в разметке при помощи data атрибутов у блока-родителя ссылки js-address.

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

Я отталкивался от этого примера в документации https://tech.yandex.ru/maps/jsbox/2.1/request_map, но что то не пошло.

Код скрипта:

var mapContainer = $('#map');

if(mapContainer.length) {
    ymaps.ready(init);
}

function init() {

    var map; 

    $('.contacts__address--link').each(function() {

        var self = $(this);

        self.bind({
            click: function (e) {
                e.preventDefault();

                var longitude = self.parents('.js-address').attr('data-longitude');
                var latitude = self.parents('.js-address').attr('data-latitude');

                map =  new ymaps.Map('map', {
                    // Координаты центра карты. «широта, долгота».
                    center: [longitude, latitude],
                    // Уровень масштабирования. Допустимые значения: от 0 (весь мир) до 19.
                    zoom: 17
                });

                // Создание метки
                var myGeoObject = new ymaps.GeoObject({
                    // Описание геометрии.
                    geometry: {
                        type: "Point",
                        coordinates: [longitude, latitude]
                    }
                });



                map.geoObjects.add(myGeoObject);
                map.behaviors.disable('scrollZoom');

                // Получаем центр карты в пикселях
                var pixelCenter = map.getGlobalPixelCenter(longitude, latitude);

                // Устанавливаем сдвиг центра по оси Х
                pixelCenter = [
                    pixelCenter[0] - 300,
                    pixelCenter[1]
                ];

                // Устанавливаем новые координаты
                var geoCenter = map.options.get('projection').fromGlobalPixels(pixelCenter, map.getZoom());

                map.setCenter(geoCenter);


            }
        });

    });

};

1 ответ 1

1

У меня вот так получилось (если я правильно понял задачу).

ymaps.ready(function() {
  var myMap = new ymaps.Map('map', {
      center: [55.75, 37.65],
      zoom: 9
    }, {
      searchControlProvider: 'yandex#search'
    }),
    placemark = new ymaps.Placemark(null),
    longitude, latitude;
  myMap.geoObjects.add(placemark);
  console.log(myMap.geoObjects);
  console.log(placemark);
  $('.contacts__address--link').each(function() {
    var self = $(this);
    self.bind({
      click: function(e) {
        e.preventDefault();
        longitude = self.parents('.js-address').attr('data-longitude');
        latitude = self.parents('.js-address').attr('data-latitude');
        placemark.geometry.setCoordinates([longitude, latitude]);
        myMap.setCenter(placemark.geometry.getCoordinates());
      }
    })
  });
});
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>links</title>
  <style>
    html,
    body {
      width: 100%;
      height: 100%;
      padding: 0;
      margin: 0;
    }
    
    #map {
      width: 100%;
      height: 70%;
      padding: 0;
      margin: 0;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script src="https://api-maps.yandex.ru/2.1/?lang=ru_RU&apikey=<ваш API-ключ>" type="text/javascript"></script>
</head>

<body>
  <div id="map"></div>
  <div>
    <ul>
      <li class="js-address" data-longitude="59.94" data-latitude="30.31">
        <a class="contacts__address--link" href="#">Санкт-Петербург</a>
      </li>
      <li class="js-address" data-longitude="55.76" data-latitude="37.64">
        <a class="contacts__address--link" href="#">Москва</a>
      </li>
    </ul>
  </div>
</body>

1
  • Все круто спасибо!
    – Карен
    17 мар 2021 в 19:27

Ваш ответ

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

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