在 react-google-maps 库中访问地图 google maps 对象

Question

在我的 react 应用程序中使用 react-google-maps 库，我试图在第 32 行访问谷歌地图对象调用构造函数，但我得到“谷歌未定义”错误。 这个库不公开地图对象，我如何访问谷歌对象？它也不包含在道具中

import React, { useState, useEffect } from 'react';
import flicker from '../assets/flicker.svg';
import axios from 'axios';
import { compose, withProps } from 'recompose';
import {
  withScriptjs,
  withGoogleMap,
  GoogleMap,
  Marker,
} from 'react-google-maps';

const MyMapComponent = compose(
  withProps({
    googleMapURL: `https://maps.googleapis.com/maps/api/js?key=${process.env.REACT_APP_GOOGLE_API_KEY}&v=3.exp&libraries=geometry,drawing,places&callback=initMap`,
    loadingElement: <div style={{ height: `100%` }} />,
    containerElement: <div style={{ height: `400px` }} />,
    mapElement: <div style={{ height: `100%` }} />,
  }),
  withScriptjs,
  withGoogleMap
)(props => {
  console.log(props.google);
  return (
    <GoogleMap defaultZoom={3} defaultCenter={{ lat: 46, lng: 2 }}>
      {props.datas.map(data => (
        <Marker
          key={data.countryInfo._id}
          position={{ lat: data.countryInfo.lat, lng: data.countryInfo.long }}
          defaultLabel={data.cases}
          icon={{
            url: flicker,
            size: new google.maps.Size(15, 25), ### HERE ###
          }}
        />
      ))}
    </GoogleMap>
  );
});

const CoronaMap = props => {
  const [data, setData] = useState([]);

  useEffect(() => {
    axios
      .get('https://disease.sh/v3/covid-19/countries?yesterday=0&sort=cases')
      .then(res => setData(res.data));
  }, []);

  return <MyMapComponent datas={data} />;
};

export default CoronaMap;

但在文档中，可以访问 google 对象 https://prnt.sc/tx78tf

Answer 1

我无法最终复制这个问题。第 32 行在我这边正常工作，但是可以看到您需要在您提供的代码中修复的一些问题。

1. 删除 googleMapURL 内 Google 地图脚本中的 &callback=initMap，因为您的代码中没有 initMap 函数。

2. 确保您没有在密钥中使用相同的值。看起来data.countryInfo._id 有两个null 值，这会在您的代码中引发警告。您也可以使用 index 来确保您的 key 的值是唯一的。您可以使用以下代码来做到这一点：

{props.datas.map((data,index) => (
        <Marker
          key={index}

1. Marker 的标签只接受字符串值，而且{data.cases} 的值似乎不是字符串。您需要将此值转换为字符串才能使用此数据。您可以使用{data.cases.toString()} 或{JSON.stringify(data.cases)} 来实现。

这是sample code。