Добавьте кнопку закрытия в пользовательский информационный блок HTML Bing Maps в проекте React - PullRequest
Новая
       15

Добавьте кнопку закрытия в пользовательский информационный блок HTML Bing Maps в проекте React

0 голосов
/ 27 октября 2019

Существует пример « Пользовательский HTML InfoBox » для Bing Maps. По иронии судьбы, в настроенном InfoBox нет кнопки закрытия. Каждый InfoBox (InfoWindow) других API-интерфейсов карты (Google Map, MapBox,) имеет кнопку закрытия по умолчанию с настраиваемым содержимым HTML, за исключением одного из Bing Map API. Трудно закрыть InfoBox без кнопки закрытия.

Итак, я должен добавить кнопку закрытия в настраиваемый HTML InfoBox. Ниже приведен псевдокод, который я пишу. Я использую React + Next.js. 

// MyInfoBox.js
export class MyInfoBox extends Component {
  constructor(props) {
    super(props);
    const { map, pos, events, children } = props;
    const htmlContent = renderToStaticMarkup(
      <div>
        <button onClick={events.close}>&#10006;</button>
        {children}
      </div>
    );
    const infoBox = new Microsoft.Maps.InfoBox(
      pos,
      htmlContent,
    );
    infoBox.setMap(map);
  }

  render() {
    return null;
  }
}


// index.js
export default () => <MyInfoBox events={{ close: () => console.log('close') }} />;

InfoBox принимает только HTML для параметра содержимого (почему не элемент DOM?). К сожалению, renderToStaticMarkup (или renderToString) отображает все свойства, кроме onClick, в HTML. Таким образом, реакция на нажатие кнопки закрытия отсутствует.

Как написать доступную кнопку закрытия для настраиваемого информационного блока HTML Bing Map в проекте React?

1 Ответ

0 голосов
/ 29 октября 2019

После расследования в течение нескольких дней я нахожу очень хитрое решение. Мы должны зарегистрировать обработчик событий в InfoBox и определить исходный источник события. Если это кнопка закрытия, вызовите соответствующий обратный вызов. 

    Microsoft.Maps.Events.addHandler(this.#infoWindow, 'click', e => {
      if (e.originalEvent.target.id === closeButtonId) {
        events.close(e);
      }
    });

Это слишком сложно. Мы бы предпочли, чтобы InfoBox карт Bing предоставлял кнопку закрытия по умолчанию (с перехватом событий).

...