0

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.

7
  • como são retornados nesse endereço: /api/clientes.coordenada?
    – novic
    Commented 2/02/2021 às 13:53
  • Tem erros no seu código await/async e no mesmo código then ou é um ou é outro.
    – novic
    Commented 2/02/2021 às 13:54
  • esse endereço retorna essas variáveis id, lat e lon, dessa maneira: { "_id": "5fb9ef8193f4ac34cc242187", "lat": "-46.781061", "lon": "-23.531740" },(retorna varias está é apenas 1 exemplo delas)
    – Rmmh
    Commented 3/02/2021 às 20:16
  • vou arrumar o await/async, sou novo com react e assim tava funcionando então não sabia que era errado ,mas o problema maior é conseguir por esses dados que vem do Mongo no lugar dos dados estaticos
    – Rmmh
    Commented 3/02/2021 às 20:18
  • retornar um array disso? tipo [{},{},{}]?
    – novic
    Commented 3/02/2021 às 21:26

2 Respostas 2

0

No método componentDidMount() faça as seguintes alterações:

componentDidMount() {
    api.get('/api/clientes.coordenada')
        .then(res => {
            const local = res.data; 
            this.setState({ 
                position: rest
                    .data
                    .map(m => { return {
                        lat: m.lat, 
                        lng: mat.log
                    }}) 
            });
    });
}

nota que ao tentar usar async/await não utilize then, porque já é resolvido o promisse e retornado, no seu caso eu prefiro retornar pelo then e consolidar as informações do novo estado para a variável position que é um array. Um outro fator que foi feito no código é colocar somente as informações de lat e lng conforme seus comentários com o método map criando um novo array com a organização esperada.

4
  • tentei utilizar seu código e tentei arrumar e adaptar, mas não estou conseguindo, ele sempre retorna este erro" Expected an assignment or function call and instead saw an expression no-unused-expressions" na linha do lat e lng depois do m => e ainda não consegui resolvelo
    – Rmmh
    Commented 11/02/2021 às 6:29
  • Alguma sugestão?
    – Rmmh
    Commented 16/02/2021 às 6:50
  • @Rmmh editei o código faltou um { e } e return.
    – novic
    Commented 16/02/2021 às 12:23
  • MUUITO OBRIGADO!!!! FUCIONOU SUAS DICAS !!
    – Rmmh
    Commented 1/03/2021 às 22:42
0

Segue o Codigo fucionando com alguns pequenos ajustes de como troca de "mat" por "m" e a varivel "log" por "lon"

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: [],
     
    }
  }

  componentDidMount() {
    api.get('/api/clientes.coordenada')
        .then(res => {
            const local = res.data; 
            console.log(res.data);  
            this.setState({ 
                position: res.data.map(m => { return {
                        lat: m.lat,    
                        lng: m.lon    
                    }}) 
            });
    });
  }
  render() {
    return (<React.Fragment>
      <Map center={{ lat: -23.532881, lng: -46.792004 }} zoom={14} positions={this.state.position} />
    </React.Fragment>);
  }
}

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .