Question

我正在使用react-google-maps来显示带有标记的地图，当您点击标记时，所有信息窗口都会打开。我想点击它时只显示一个标记的信息窗口，而其他标记的信息窗口则保持关闭状态。

这是我的代码：

    <GoogleMap
        defaultZoom={15}
        defaultCenter={{ lat: 51.508530, lng: -0.076132 }}
    >
        {props.places && props.places.map((place, i) =>
            <Marker onClick={props.onToggleOpen} key={i} position={{ lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }} >
                {props.isOpen && <InfoWindow onCloseClick={props.onToggleOpen}>
                  <div>{place.name}</div>
                </InfoWindow>}
            </Marker>
        )}
    </GoogleMap>

我正在用这个

打开和关闭InfoWindow

import { compose, withProps, withStateHandlers, withHandlers, withState } from "recompose";

...

withStateHandlers(() => ({
  isOpen: false,
}), {
  onToggleOpen: ({ isOpen, id }) => () => ({
    isOpen: !isOpen,
  })
}),

我正在映射所有标记，并在地图上显示它们。我怎么能单击打开一个标记InfoWindow？ Here is a related question，但它不是使用React制作的，并且不使用react-google-maps。

Answer 1

这更像是一个import numpy as np def conversion(obj): if isinstance(obj, np.generic): return np.asscalar(obj) mergeddfnew["speech_main_wordspersentcount_wc"]=mergeddfnew["speech_main_wordspersentcount_wc"].apply(conversion)问题。您可以将点击的React的索引传递给Marker而不是onToggleOpen，而是使用保存所点击的isOpen索引的selectedPlace状态并使用此索引用于呈现正确的Marker。

这是一个例子（没有经过全面测试，但你可以得到这个想法）：

InfoWindow

在地图上显示多个标记时，如何在单击标记时打开一个信息窗口？

1 个答案: