Как добавить событие onclick для информационных блоков в кнопки на bingmaps в reactjs

Question

Мне удалось расположить все координаты с помощью кнопок на карте, теперь я хочу создать событие, когда нажимаю на кнопки для отображения инфобокса?

Могу ли я получить пример того, как скрыть инфобоксы и показывать только инфобокс при нажатии на кнопки?

Мой код:

import React from 'react';

import { ReactBingmaps } from 'react-bingmaps';

function App() {
  return (
    <div className="App">
      <header className="App-header">

        <ReactBingmaps
          bingmapKey="AnK1IGWE20I4jxXYE6lqu5sPHf9rQR5OEBs1vyrXBt6LGy4HpbAHqc0kGvq1pFpf"
          center={[42.6170006, 25.3999996]}
          zoom={8}
          mapTypeId={"aerial"}



          pushPins={
            [
              { 'location': [41.19197, 25.33719], 'option': { color: 'yellow' }, },
              { 'location': [41.26352, 25.1471], 'option': { color: 'yellow' }, },
              { 'location': [41.26365, 25.24215], 'option': { color: 'yellow' }, },
              { 'location': [41.26369, 25.33719], 'option': { color: 'yellow' }, },
            ]
          }

          infoboxes={
            [
              {
                "location": [42.6170006, 25.3999996], "option": { title: '№ на станция', description: '...' }
              },
              {
                "location": [42.43278, 25.64194], "option": { title: '№ на станция', description: '...' }
              }
            ]
          }
        >
        </ReactBingmaps>
      </header>

    </div>
  );
}

export default App;

Теперь, когда я запускаю проект, инфобоксы открыты, я хочу скрыть эти инфобоксы при запуске.

Answer 1

Это довольно легко на самом деле. Вы можете достичь этого, используя реквизит infoboxesWithPushPins, который является array из objects, где вы можете указать addHandler как click, mouseover et c.

Например:

import React from 'react';

import { ReactBingmaps } from 'react-bingmaps';

function App() {
  return (
    <div className="App">
      <header className="App-header">

        <ReactBingmaps
          bingmapKey="AnK1IGWE20I4jxXYE6lqu5sPHf9rQR5OEBs1vyrXBt6LGy4HpbAHqc0kGvq1pFpf"
          center={[42.6170006, 25.3999996]}
          zoom={8}
          mapTypeId={"aerial"}

          infoboxesWithPushPins = {[
            {
              "location":[41.19197, 25.33719], 
              "addHandler": "click", //on click the pushpin, infobox shown
              "infoboxOption": { title: '№ на станция', description: '...' },
              "pushPinOption":{ color: 'yellow' },
            },
          ]
          }
        >
        </ReactBingmaps>
      </header>

    </div>
  );
}

export default App;

Я только что попробовал с одной из ваших координат, теперь вам просто нужно добавить другие. Приветствия.