jeerjmin
@jeerjmin

Как сделать layout в yandex map с помощью React?

Использую https://github.com/effrenus/yandex-map-react-examples.
Создаю карту и метку на ней с помощью

import { Map, Marker, BalloonLayout } from 'yandex-map-react';
  <Map width={'100%'} center={[59.91817154482064,30.30557799999997]} zoom={10}>
              <Marker lat='59.823' lon='30.28'  >
              </Marker>      
      </Map>

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

Стандартно это делается так, тут классическое оформление модального окна от яндекса, есть кнопка закрытия:

<Map width={'100%'} center={[59.91817154482064,30.30557799999997]} zoom={10} properties={{  balloonContentHeader: "Ресторан Катюша", balloonContentBody: "www.restorankatusha.com"  }}>

Но в браузере balloonContentBody("www.restorankatusha.com") не будет ссылкой, что очевидно.
Встала задача вставить кликабельную ссылку сайта внутрь метки.

Нашел другую возможность описания содержимого метки, но здесь появляется модальное окно при нажатии и исчезает только при нажатии на другую метку, нету стандартного оформления и соответственно нету кнопки-крестика для закрытия окна. И я не знаю как ее добавить, в документации яндекса говорится, что она должна быть по умолчанию, но это пакет для react... для которого отдельной документации нету.

<Map width={'100%'} state={mapState} center={[59.91817154482064,30.30557799999997]} zoom={10}>
              <Marker lat='59.823' lon='30.28'  >
                <BalloonLayout>
                <div className="Layout">
                <a href="www.google.com">Hello</a>
                </div>
                </BalloonLayout>
              </Marker>
          ))}
      </Map>

Конечная цель добавить ссылку внутрь модального окна.
  • Вопрос задан
  • 386 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы