Пожалуйста помогите с проблемой на реакте! Я хочу вывести 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 в ручную на карте то видно что координаты правильные, но почему то изначально показывает океан
Простой
