Блог

У меня возникли проблемы при рендеринге нескольких маркеров на карте Google с помощью функции map, поскольку маркеры, которые я жестко запрограммировал, отображаются на карте, в то время как массив dataArr, содержащий широту и lng разных мест, которые я пытаюсь передать маркеру, а затем возвращаю его, не отображается на карте.также я не могу понять, почему тогда маркеры не отображаются на карте для широты и спг в разных местах. `

 import { SettingsSystemDaydreamTwoTone } from "@material-ui/icons";
import React, { useEffect, useState } from "react";
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
} from "react-google-maps";
let dataArr = [];
const Map = () => {
  return (
    <GoogleMap defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }}>
      <Marker position={{ lat: -34.397, lng: 150.644 }} />
      <Marker position={{ lat: -35.397, lng: 151.644 }} />
      {dataArr.map((el, i) => {
        return <Marker key={i} position={{ lat: el.lat, lng: el.lng }} />;
      })}
    </GoogleMap>
  );
};

const setData = (data) => {
  console.log(data);
  dataArr = data;
  Map();
};
let WrapperMap = withScriptjs(withGoogleMap(Map));
const MapComp = (props) => {
  useEffect(() => {
    setData(props.results);
  }, [props.results]);
  return (
    <div>
      <WrapperMap
        googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.expamp;libraries=geometry,drawing,placesamp;key=AIzaSyAduxOyZEAyoz4mLWTgTobz_7lfDNoc-_I"
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `400px` }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    </div>
  );
};
export default MapComp;
  

Попробуйте удалить return оператор и закрученные скобки перед <Marker...> тегом, как показано ниже

  <GoogleMap defaultZoom={8} defaultCenter={{ lat: -34.397, lng: 150.644 }}>
      <Marker position={{ lat: -34.397, lng: 150.644 }} />
      <Marker position={{ lat: -35.397, lng: 151.644 }} />
      {dataArr.map((el, i) => 
        <Marker key={i} position={{ lat: el.lat, lng: el.lng }} />;
      )}
    </GoogleMap>