Question

我正在使用google-maps-react并做出反应在地图上显示一些数据，现在我正处于我想要点击或悬停标记时显示工具提示的位置。为此，我想我可以使用google-maps-react附带的'InfoWindown'组件，但是它给了我一个错误'无法读取null的属性'props'。

这是我的代码..

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

export default class GoogleMap extends Component {
  constructor(props) {
    super(props);

    this.state = {
      showingInfoWindow: false,
      activeMarker: {},
      selectedPlace: {}
    };

    this.renderTrucks = this.renderTrucks.bind(this);
    this.onMarkerClick = this.onMarkerClick.bind(this);
  }

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

  renderTrucks() { 
    if (this.props.list.length === 0) {
      return;
    }   
    return this.props.list.map((truckInfo) => {
      return (<Marker
        key={truckInfo.objectid}
        name={truckInfo.applicant}
        onClick={this.onMarkerClick}
        position={{lat:truckInfo.latitude, lng:truckInfo.longitude}} />
      );
    });
  }


  render() {
    return (
      <Map google={window.google}
        className={'map'}
        style={{width: '50%', height: '80%', position: 'relative'}}
        zoom={13}>
        {this.renderTrucks()}

        <InfoWindow
          marker={this.state.activeMarker}
          visible={this.state.showingInfoWindow}>
          <p>{this.state.selectedPlace.name}</p>
        </InfoWindow>        
      </Map>
    );
  }
}

我认为我的所有回调函数都很好但在我看来'InfoWindow'组件是给我带来麻烦的组件。有谁知道如何使用这个东西？

谢谢，

Answer 1

我认为问题出在onClick={this.onMarkerClick}。回调中的this与其外部不同。

使用以下代码为标记设置onClick属性时是否有效？

onClick={(props, marker, e) => this.onMarkerClick(props, marker, e)}

有关箭头功能的更多信息：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

箭头函数不会创建自己的上下文，因此这具有封闭上下文的原始含义。

未捕获的TypeError：无法读取与google-maps对应的null属性'props'

1 个答案: