Question

我是新手我尝试使用Google地图，我想通过单击地图并显示标记来获取我发现并尝试过[this] [1]

工作正常，我可以选择想要的位置并通过单击地图来获取位置，但标记未显示

这是我的代码

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

手动添加此代码，然后检查Marker是否正常工作。请仔细检查您是否在lat之前得到lng和console.log()

Answer 2

使用conditional rendering渲染标记组件，例如：

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

或

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

Here is a demo

谷歌地图反应标记未显示

2 个答案: