Карты Google реагируют, маркер не отображается - PullRequest
Новая
       26

Карты Google реагируют, маркер не отображается

0 голосов
/ 07 февраля 2019

Я новичок в реакции. Я пытался использовать карты Google. Я хочу получить последние данные, щелкнув по карте и показывая найденный маркер, и попытался [это] [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>

спасибо

Ответы [ 2 ]

0 голосов
/ 07 февраля 2019

Используйте условный рендеринг для рендеринга компонента маркера, например: 

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

или 

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

Вот демонстрационная версия

0 голосов
/ 07 февраля 2019 
<Marker
    title={'The marker`s title will appear as a tooltip.'}
    name={'SOMA'}
    position={{lat: 37.778519, lng: -122.405640}} />

Добавьте этот код вручную и проверьте, работает Маркер или нет.Пожалуйста, проверьте, если вы получаете lat и lng по console.log()

...