无法使用地图功能在 react-google-maps 上加载多个标记

Question

我在通过 map 函数在谷歌地图上渲染多个标记时遇到问题，因为我硬编码的标记显示在地图上，而 dataArr 数组包含我试图传递的不同地方的 lat 和 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.exp&libraries=geometry,drawing,places&key=AIzaSyAduxOyZEAyoz4mLWTgTobz_7lfDNoc-_I"
        loadingElement={<div style={{ height: `100%` }} />}
        containerElement={<div style={{ height: `400px` }} />}
        mapElement={<div style={{ height: `100%` }} />}
      />
    </div>
  );
};
export default MapComp;

Answer 1

尝试删除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>