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

Question

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

这是我的代码：

    <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>

我用这个打开和关闭信息窗口

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

...

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

我正在绘制所有标记，并将它们显示在地图上。我怎样才能点击只打开一个标记信息窗口？ Here is a related question，但它不是用 React 制作的，也不使用 react-google-maps。

Answer 1

这更像是一个 React 问题。您可以将已点击的 Marker 的索引传递给 onToggleOpen，而不是 isOpen，您可以使用 selectedPlace 状态来保存已点击的 Marker 的索引并使用此索引渲染正确 InfoWindow.

这里有一个例子（没有完全测试，但你可以理解）：

/*global google*/
import React from "react"
import { compose, withProps, withHandlers, withState, withStateHandlers } from "recompose"
import { withScriptjs, withGoogleMap, GoogleMap, Marker, InfoWindow } from "react-google-maps"

const MyMapComponent = compose(
    withProps({
        googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places",
        loadingElement: <div style={{ height: `100%` }} />,
        containerElement: <div style={{ height: `400px` }} />,
        mapElement: <div style={{ height: `100%` }} />,
    }),
    withScriptjs,
    withGoogleMap,
    withState('places', 'updatePlaces', ''),
    withState('selectedPlace', 'updateSelectedPlace', null),
    withHandlers(() => {
        const refs = {
            map: undefined,
        }

        return {
            onMapMounted: () => ref => {
                refs.map = ref
            },
            fetchPlaces: ({ updatePlaces }) => {
                let places;
                const bounds = refs.map.getBounds();
                const service = new google.maps.places.PlacesService(refs.map.context.__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED);
                const request = {
                    bounds: bounds,
                    type: ['hotel']
                };
                service.nearbySearch(request, (results, status) => {
                    if (status == google.maps.places.PlacesServiceStatus.OK) {
                        console.log(results);
                        updatePlaces(results);
                    }
                })
            },
            onToggleOpen: ({ updateSelectedPlace }) => key => {
                updateSelectedPlace(key);
            }
        }
    }),
)((props) => {
    console.log(props);
    return (
        <GoogleMap
            onTilesLoaded={props.fetchPlaces}
            ref={props.onMapMounted}
            onBoundsChanged={props.fetchPlaces}
            defaultZoom={15}
            defaultCenter={{ lat: 51.508530, lng: -0.076132 }}
        >
            {props.places && props.places.map((place, i) =>
                <Marker onClick={() => props.onToggleOpen(i)} key={i} position={{ lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }}>
                    {props.selectedPlace === i && <InfoWindow onCloseClick={props.onToggleOpen}>
                        <div>
                            {props.places[props.selectedPlace].name}
                        </div>
                    </InfoWindow>}
                </Marker>
            )}
        </GoogleMap>
    )
})

export default class MyFancyComponent extends React.PureComponent {
    render() {
        return (
            <MyMapComponent />
        )
    }
}

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

When displaying multiple markers on a map, how to open just one info window, when clicking on a marker?

javascript

google-maps

google-maps-api-3

reactjs

react-google-maps