javascript - 如何将信息框的 onclick 事件添加到 ReactJS 中 bingmaps 上的图钉中

Question

我成功地用图钉在 map 上定位了所有坐标，现在我想在单击图钉以显示信息框时创建事件？

我可以获取一个示例，说明如何在单击图钉时隐藏信息框并仅显示信息框吗？

我的代码:

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 的 prop 来实现此目的，它是 objects 的 array，您可以在其中指定 addHandler 如点击、鼠标悬停等。

例如:

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;

我刚刚尝试了您的一个坐标，现在您只需添加另一个坐标即可。干杯。