Estou criando um mapa de calor do google maps com reactjs, consegui implementar ele e passar as coordenadas manualmente, mas preciso criar as coordenadas dinamicamente vindas do banco no MongoDB, na parte das positions, estou com dificuldade para colocar os dados vindos do banco e o código ler os mesmos como coordenadas ao invés de ler como um array. Se eu seto algum número no array ele funciona mas só de a um, preciso que ele liste todas latitudes e longitudes e crie todos os pontos de uma vez. segue o código com as coordenadas inseridas manualmente (assim ele funciona de forma estatica)
import React, { Component } from 'react';
import Map from './mapa';
const data = [
{ lat: -23.532881, lng: -46.792004 },
{ lat: -23.532200, lng: -46.781681 },
{ lat: -23.532681, lng: -46.782104 },
{ lat: -23.532281, lng: -46.792084 },
{ lat: -23.532881, lng: -46.792005 }
];
export default class IndexMapa extends Component {
render() {
return ( <React.Fragment>
<Map center={{ lat: -23.532881, lng: -46.792004 }} zoom={14} positions={data} />
</React.Fragment>);
}
}
preciso que essa constante data seja dinâmica com os pontos que tenho no MongoDB. segue o código que eu tenho mas está retornando apenas 1 coordenada (apenas 1 ponto no mapa). obs. se eu nâo setar um número no lat e no lng, o código retorna um array e não aparece nenhum ponto no mapa.
import React, { Component } from 'react';
import Map from './mapa';
import api from '../../../services/api';
// const data = [];
export default class IndexMapa extends Component {
constructor(props) {
super(props);
this.state = {
position:[]
}
}
async componentDidMount() {
await api.get('/api/clientes.coordenada').then(res => {
const local = res.data;
let lng = [];
let lat = [];
local.forEach(element => {
lat.push(element.lat);
lng.push(element.lon);
});
// console.log(local);
this.setState({
position: [
{lat: lat[0], lng: lng[0]}
]
});
});
// console.log(this.state.position);
}
render() {
return (
<React.Fragment>
<Map center={{ lat: -23.532881, lng: -46.792004 }} zoom={14} positions={this.state.position} />
</React.Fragment>);
}
}
desde já agradeço.
/api/clientes.coordenada
?await/async
e no mesmo códigothen
ou é um ou é outro.array
disso? tipo[{},{},{}]
?