我想在 ReactJS 应用程序中单击谷歌地图标记时显示信息窗口？

如何解决我想在 ReactJS 应用程序中单击谷歌地图标记时显示信息窗口？

我使用了 infoWindow，但是当我点击标记时，没有显示 infoWindow。单击标记将如何显示？我正在从道具中获取标记。地图上显示的标记，但这些标记不可点击。如果我在 Click 上调用一个函数并显示警报框，则所有数据都显示在警报框中。但我只想在点击标记时打开 infoWindow。

import React,{ Component } from "react";
import { Map,GoogleApiWrapper,Marker,InfoWindow } from 'google-maps-react';
import logo from '../assests/fbicon.png'

const mapStyles = {
  width: '100%',height: '50%'
};

class LiveLocation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      lati: "",long: "",isOpen: false,showingInfoWindow: false,activeMarker: {},selectedplace: {},markerMap: "",selectedplace: ""
    };
  }

  onMarkerClick = (props,marker,e) =>
    this.setState({
      selectedplace: props,activeMarker: marker,showingInfoWindow: true
    });

  onClose = props => {
    if (this.state.showingInfoWindow) {
      this.setState({
        showingInfoWindow: false,activeMarker: null
      });
    }
  }
  handletoggleOpen = () => {

    this.setState({
      isOpen: true
    });
  }

  handletoggleClose = () => {
    this.setState({
      isOpen: false
    });
  }

  displayMarkers = () => {
    console.log(this.props.store)
    return this.props.store.map((stores,index) => {
      console.log(stores._id)
      return (
        <Marker
          key={index}
          position={{ lat: stores.lat,lng: stores.lng }}
          label={index}
          onClick={() => this.handletoggleopen()}
          icon={{url:logo,scaledSize:new window.google.maps.Size(40,40)}}
        >

          {
            this.state.isOpen && 
            <InfoWindow  onCloseClick={this.onClose}>
              <span>Something</span>
            </InfoWindow>
          }

        </Marker>
      );
    });
  };

  componentDidMount() {
    navigator.geolocation.getCurrentPosition((position) => {
      this.setState({
        lati: position.coords.latitude,long: position.coords.longitude
      });
    });
  }


  render() {
    return (
      <>
        {console.log(this.props)}
        <div>
          <Map
            google={this.props.google}
            zoom={10}
            style={mapStyles}
            initialCenter={{
              lat: this.props.lati,lng: this.props.long

            }}
          >
            {this.displayMarkers()}
          </Map>

        </div>

      </>
    );
  }
}

解决方法

我在您提供的代码中注意到了一些事情，

1. 您将 initialCenter 设置为 this.props.lati and this.props.long，但是我注意到您正在 componentDidMount 中获取用户的位置，您在其中设置了 lati 和 long 的状态。您的道具中是否有 lati 和 long 变量，或者您的意思是使用状态中的 lati 和 long 变量？如果是这样，您需要使用 this.state.lati or this.state.long。您的状态值为空，它会将初始中心默认为 (0,0)。如果您希望它以用户位置为中心，请使用 center 参数而不是 initialCenter。

2. 在 Marker 对象中的 onClick 中，您需要调用 {this.onMarkerClick} 函数，并且可以删除 handleToggleOpen 和 handleToggleClose 函数。您还可以在您所在的州删除这些：

   isOpen: false,markerMap: "",selectedPlace: ""

3. 在标记中的标签参数中，您传递的是 {index} 并且它的数据类型不是字符串。标签需要字符串才能工作。你可以让它{index.toString()}。

4. 要显示信息窗口，您无需将其附加到 displayMarkers 函数中的对象内。将它放在您在 Map 对象中调用 {this.displayMarkers()} 之后。

您可以查看我为实现您的用例而制作的此 code 和代码片段。请注意，我使用了示例 props 值，并且只使用了地图中心的 props 值。其余的，我从你的代码中得出。要使代码正常工作，您需要放置 API 密钥。

代码片段

import React,{ Component } from 'react';
import { Map,GoogleApiWrapper,Marker,InfoWindow } from 'google-maps-react';

const mapStyles = {
  width: '100%',height: '50%'
};

class LiveLocation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      lati: this.props.center.lat,long: this.props.center.lng,showingInfoWindow: false,activeMarker: {},selectedPlace: {}
    };
  }

  onMarkerClick = (props,marker,e) =>
    this.setState({
      selectedPlace: props,activeMarker: marker,showingInfoWindow: true
    });

  onInfoWindowClose = () => {
    this.setState({
      activeMarker: null,showingInfoWindow: false
    });
  };
  



  displayMarkers = () => {
    return this.props.store.map((stores,index) => {
      return (
        <Marker
          key={index}
          position={{ lat: stores.lat,lng: stores.lng }}
          label={index.toString()}
          name={stores.id}
          onClick={this.onMarkerClick}
          //icon={{url:logo,scaledSize:new window.google.maps.Size(40,40)}}
        />
      );
    });
  };

  componentDidMount() {
    navigator.geolocation.getCurrentPosition(position => {
      this.setState({
        lati: position.coords.latitude,long: position.coords.longitude
      });
    });
  }

  render() {
    return (
      <>
        <div>
          <Map
            google={this.props.google}
            zoom={14}
            style={mapStyles}
            initialCenter={{
              lat: this.state.lati,lng: this.state.long
            }}
          >
            {this.displayMarkers()}
            <InfoWindow
              marker={this.state.activeMarker}
              onClose={this.onInfoWindowClose}
              visible={this.state.showingInfoWindow}
            >
              <div>
                <h4>{this.state.selectedPlace.name}</h4>
              </div>
            </InfoWindow>
          </Map>
        </div>
      </>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: 'YOUR_KEY'
})(LiveLocation);