我正在使用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? 这是一个相关的问题,但这不是React提出的,并且不使用react-google-maps。
这更是一个React问题。您可以将clicked的索引传递Marker给onToggleOpen,而不是isOpen使用selectedPlace保存clicked的索引的状态,Marker并使用此索引来呈现权利InfoWindow。
React
Marker
onToggleOpen
isOpen
selectedPlace
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 /> ) } }