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

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 的道具来实现这一点，它是 objects 的 array，您可以在其中指定 addHandler，例如 click、mouseover等

例如：

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;

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

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

How to add onclick event for info boxes into pushpins on bingmaps in reactjs

javascript

frontend

bing-maps

reactjs