1

Застрял, реально застрял с такой проблемой. Есть станица «Контакты» на сайте. На странице — карта и список объектов (филиалов). Остальное элементы опустим для упрощения.

Что нужно: взять из API информацию о филиале, добавить в список под картой и поставить соответствующую метку на карте (в API есть даже координаты).

Также нужно при клике на метку на карте вывести отдельный блок-информацию (который почти повторяет блок-описание, но содержит дополнительные данные). Схематично для простоты восприятия (гео-метки сделал специально разные, это не важно):

пример того, как это будет выглядеть

Для карты используется react-yandex-maps. Реакт только учу, поэтому много туплю из-за свалившихся задач.

Вопросы такие:

  1. Как одновременно выводить филиал и в списке в филиалов и добавлять гео-метку на карту?
  2. Как при клике на гео-метку развернуть дополнительное описание и поменять иконку на карте (чтобы было видно, куда ткнули)? Вот так наглядно:

пример того, что происходит по клику на гео-метку

Как правильно это сделать? В одном компоненте? Передавать состояния? Я увы, плохо всё это понимаю, но стараюсь. Подскажите, пожалуйста?

1
  • Если не знаете полного решения, то, пожалуйста, подскажите, с чего начать? 22 окт 2017 в 14:42

1 ответ 1

1

Задаете state

constructor(){
super();
this.state = {
    markers: [],
    activeMarker: null
}

Получаете данные из API.

let markersURL = "ссылка на нужное в api";
    fetch(markersURL)
    .then(response => response.json())
    .then(response => {
        this.setState({
            markers: response //тут все сохраняется в state
     })
});

Маркеры выводите любым удобным способом (присваиваем key):

  1. Placemark
  2. GeoObject

см примеры в папке https://github.com/gribnoysup/react-yandex-maps/tree/master/examples/src/sandbox или https://gribnoysup.github.io/react-yandex-maps/#/sandbox/controls/listbox

В нужном месте выводите блоки с контактами - массив тот же со state

const contacts = this.state.markers.map((marker, index)=>{
    return (
        <div className="contact (activeMarker===marker.id)?'active':''">
            <p>{marker.title}</p>
            <p>{marker.phone}</p>
            //... и так далее
        </div>
    );
});

Вставляете в нужный блок, например

<div className="contacts">
    {contacts}
</div>

На клик по метке ловите id маркера (при создании можно его задать) В функции меняете activeMarker на текущий. В выводе информации контакта, добавьте проверки и выводите доп информацию.

Полное решение не предлагаю, думаю Вы сами справитесь или уже справились)

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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