reactjs - 无法使用地图功能在 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;

标签： reactjsgoogle-maps

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>