MAPBOX REACT DUVIDA SOBRE MARKERS

10/09/2021

0

Boa noite, estou fazendo o TCC e está impossível inserir os Markers (aqueles pings) no mapa, segue a parte do código:

import * as React from "react";
import { useRef, useEffect, useState, useContext } from "react";
import { Link, Redirect } from "react-router-dom";

import NoInternet from "../../no internet/no-internet";

import "./jogo.css";
import back from "../../../assets/icons/blackback.svg";

import mapboxgl from "mapbox-gl";
mapboxgl.accessToken = process.env.REACT_APP_MAPBOX_PRIVATE_TOKEN;

export default function Jogo() {
  //pensando em congelar a latitude e longitude da região ABCD e diminuir o zoom do mapa
  const [coords, setCoords] = useState({
    lat: -23.6858501,
    long: -46.564429999999994,
  });
  useEffect(() => {
    navigator.geolocation.getCurrentPosition(
      (pos) => {
        setCoords({
          lat: pos.coords.latitude,
          long: pos.coords.longitude,
        });
      },
      (err) => {
        //será executada quando ocorrer um erro na solicitação da posição
        alert("É necessário que o uso da localização seja autorizado!");
      }z
    );
  }, []);

  const [online] = useState(navigator.onLine);
  return <>{!online ? <NoInternet /> : <ComponenteMapa coords= />}</>;
}

/* MAPA FOI COMPONENTIZADO PARA MELHOR MANUTENÇÃO DAS INFORMAÇÕES */
function Mapa({ coords }) {
  const marker = new mapboxgl.Marker({
    color: "#ff1500",
    draggable: false,
  }).setLngLat([-23.6858501, -46.56443]);

  const mapContainer = useRef(null);
  const map = useRef(null);
  const [zoom] = useState(10);
  const [latitude] = useState(coords.lat);
  const [longitude] = useState(coords.long);

  useEffect(() => {
    if (map.current) return; // initialize map only once
    map.current = new mapboxgl.Map({
      container: mapContainer.current,
      style: process.env.REACT_APP_MAPBOX_STYLE_URL,
      center: [longitude, latitude],
      zoom: zoom,
    });
  });
  return (
    <div>
      <div ref= className="map-container"></div>
    </div>
  );
}

function ComponenteMapa({ coords }) {
  return (
    <>
      <Link to="/home">
        <img src= alt="" className="sair-aba-jogo" />
      </Link>
      <Mapa coords= />
    </>
  );
}


O mapa funciona normal na tela, mas o marker não aparece..
Eduardo Rigo

Eduardo Rigo

Responder

Que tal ter acesso a um e-book gratuito que vai te ajudar muito nesse momento decisivo?

Ver ebook

Recomendado pra quem ainda não iniciou o estudos.

Eu quero
Ver ebook

Recomendado para quem está passando por dificuldades nessa etapa inicial

Eu quero

Utilizamos cookies para fornecer uma melhor experiência para nossos usuários, consulte nossa política de privacidade.

Aceitar