reactjs - 谷歌地图反应标记不显示

Question

我是新手，我尝试使用谷歌地图，我想通过点击地图并显示我找到并尝试过的标记来获得 latlng [this][1]

它工作，我可以选择我想要的位置并通过点击地图获得latlng，但标记没有显示

这是我的代码

async componentDidMount() {
    const { lat, lng } = await this.getcurrentLocation();
    this.setState(prev => ({
      fields: {
        ...prev.fields,
        location: {
          lat,
          lng
        }
      },
      currentLocation: {
        lat,
        lng
      }
    }));
  }
   getcurrentLocation() {
    if (navigator && navigator.geolocation) {
      return new Promise((resolve, reject) => {
        navigator.geolocation.getCurrentPosition(pos => {
          const coords = pos.coords;
          resolve({
            lat: coords.latitude,
            lng: coords.longitude
          });
        });
      });
    }
    return {
      lat: 0,
      lng: 0
    };
  }
  addMarker = (location, map) => {
    this.setState(prev => ({
      fields: {
        ...prev.fields,
        location
      }
    }));
    map.panTo(location);
    alert(location);
  };


in render 

<Map
    google={this.props.google}
     style={{
      width: "auto",
      height: "300px",
      position: "relative"
     }}
      onClick={(t, map, c) => this.addMarker(c.latLng, map)}

      zoom={14}
      >
      {(marker => {
        return <Marker position={this.state.fields.location}
       />
      })};
 Map>

谢谢

Answer 1

<Marker
    title={'The marker`s title will appear as a tooltip.'}
    name={'SOMA'}
    position={{lat: 37.778519, lng: -122.405640}} />

手动添加此代码并检查标记是否正常工作。请仔细检查您是否正在获取lat和lng通过console.log()

Answer 2

使用条件渲染来渲染标记组件，例如：

{this.state.fields.location && <Marker position={this.state.fields.location}/>}

或者

{
     this.state.fields.location ?
       <Marker position={this.state.fields.location}/> : null
}

这是一个演示