Как рендерить lat и lng через api в google maps на react.js?

Question

[Feruza Beknazarova]

Пожалуйста помогите с проблемой на реакте! Я хочу вывести lat и lng координат через айпи и вроде бы у меня получилось карта, маркер работает и координаты правильно расставелись, но показывает совсем другое место точнее океан. Не понимаю в чем тут проблема. Наверное я не правильно рендерю в коде точнее тут
в коде
const location={
lat:Number(this.state.lat),
lng:Number(this.state.lng)
}
, очень трудно понять.
Посмотрите код

const API = 'http://...';

export default class Api extends React.Component {  
  constructor(props) {
    super(props)
    this.state = {
      lat:'',
      lng:''
    }
  }
  fetchProfile(id) { 
    let url = `${API}${name}`;
    fetch(url)
      .then((res) => res.json() )
      .then((data) => {   
        this.setState({
          lat:data.data.latitude,
          lng:data.data.longitude
        })
      })
      .catch((error) => console.log(error) )
  }
  componentDidMount() {
    this.fetchProfile(this.state.name);
  }
  render() {
 const location={
       lat:Number(this.state.lat),
       lng:Number(this.state.lng)
     }
    
     const markers=[
       {  
         location:  {
           lat:Number(this.state.lat),
           lng:Number(this.state.lng)
         }
       }
     ]
    return (
    <div> 
           <div style={{width:'100%', height:500}} className="col-sm-12">
                      <Map data={this.state} center={location} markers={markers} />
                  </div>
     </div>
    )
  }
}

import React from 'react';
import {GoogleMapLoader, GoogleMap, Marker} from "react-google-maps";
 
export default class Map extends React.Component{  
    render(){
        let data = this.props.data;
        const mapContainer = <div style={{height:'100%', width:'100%'}}></div>
        const markers =this.props.markers.map((venue,i)=>{
            const marker={
                position:{
                    lat:venue.location.lat,
                    lng:venue.location.lng
                }
                
            }
            return <Marker key={i} {...marker} />
        })
        return(
            <GoogleMapLoader 
                containerElement={mapContainer}
                googleMapElement={
                    <GoogleMap
                        defaultZoom={8} 
                        defaultCenter={this.props.center}
                        options={{streetViewControl:false,mapTypeControl:false, scrollwheel: false}}>
                        {markers}
                    </GoogleMap>           
                } />
        )
    }

};

Вот такой результат


Но если я меняю zoom в ручную на карте то видно что координаты правильные, но почему то изначально показывает океан

Answer 1

[Александр]

Широту и долготу поменяйте местами.

Вот так должно быть:
lat 43.2220146
lng 76.8512485

defaultCenter={this.props.center}

Comments

[Feruza Beknazarova]

Вы имеете ввиду так поменять?
до
const location={
lat:Number(this.state.lat),
lng:Number(this.state.lng)
}
после
const location={
lng:Number(this.state.lng),
lat:Number(this.state.lat)
}

и все? но это решение мне не помогло(((

[Александр]

Feruza Beknazarova: this.state.lat какое принимает значение 43.2 или 76.85 при опредилении defaultCenter={this.props.center}. Прорвете!

[Feruza Beknazarova]

нет мне же нужно брать координаты через айпи например айпи содержит
"data": {
"latitude": "51.1806",
"longitude": "71.4611"
} вот такие координаты, я не могу просто проставить координаты в ручную из за этого сложновато, а так конечно я проставила бы сама их.

[Feruza Beknazarova]

Александр lat: 43.2 значение

[Александр]

defaultCenter копать наверное нужно, какие значения он получает по факту?

[Feruza Beknazarova]

Александр он получает latitude longitude