Как при клике на ссылки на странице менять координаты метки Яндекс карты?

Question

[winde_alps]

Подскажите как решить данную проблему: на странице есть несколько блоков с классом 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);


            }
        });

    });

};

Answer 1

[0xD34F]

let
  map = null,
  marker = null;

document.addEventListener('click', function(e) {
  if (!e.target.classList.contains('contacts__address--link')) {
    return;
  }

  e.preventDefault();

  const
    addressData = e.target.closest('.js-address').dataset,
    coord = [ addressData.longtitude, addressData.latitude ];

  if (!map) {
    map = new ymaps.Map('map', {
      center: coord,
      zoom: 17,
    });

    marker = new ymaps.Placemark(coord);

    map.geoObjects.add(marker);
    map.behaviors.disable('scrollZoom');
  } else {
    map.setCenter(coord);
    marker.geometry.setCoordinates(coord);
  }
});

Comments

[winde_alps]

Да, адрес меняется, но подскажите, пожалуйста, как мне при новых координатах добавлять сдвиг карты относительно центра?
Вот у меня в коде там где pixelCenter...
В вашей реализации при клике на ссылку карта становится с новым адресом по центру, а мне важно сохранять этот сдвиг в 300пх (там поверх карты блок контента, который перекрывает центр карты).

Я пробовал добавить в else новую переменную с сдвигом, но в таком случае (как в этом примере, что я привел) при кликах на ссылки просто сдвигается карта, а не меняются координаты с сдвигом

if(!map) {

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

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

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

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

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

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

					map.setCenter(geoCenter);

				} else {

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

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

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

					map.setCenter(newGeoCenter);
				

					
					marker.geometry.setCoordinates(coords);
			
	
				}

[0xD34F]

winde_alps, добавить после if-else:

const pixelCenter = map.getGlobalPixelCenter(...coord);
pixelCenter[0] -= 300;
map.setCenter(map.options.get('projection').fromGlobalPixels(pixelCenter, map.getZoom()));

[winde_alps]

0xD34F, Огромное спасибо за помощь