reactjs - InvalidValueError：setMap：不是 Map 的实例；而不是 StreetViewPanorama @react-google-maps/api 的实例

Question

我正在使用 @react-google-maps/api 并将脚本从 cdn 加载到我的公共目录 index.html 文件中。

我得到InvalidValueError: setMap: not an instance of Map; and not an instance of StreetViewPanorama并且标记没有出现在我的地图上。奇怪的是，得到这个错误是完全随机的。有时它可以正常工作。这是我首先不明白的。

import React, { useEffect } from 'react';
import { GoogleMap, Marker } from '@react-google-maps/api';
import mapStyles from './mapStyles';
//google map height 100
import './MapDisplay.css';

import { connect } from 'react-redux';

const mapContainerStyle = {
  height: '100%',
  width: '100%',
};
const options = {
  styles: mapStyles,
  disableDefaultUI: true,
  zoomControl: true,
};

const MapDisplay = ({
  userLocation,
  mouseHoverIdR,
  selectedInfoR,
  searchedResults,
  unAuthNoSearchResults,
  selectedLocationInfoWindowS,
}) => {
  const onClickMarker = (e) => {
    selectedLocationInfoWindowS({
      selectedInfoR: e,
      type: 'infoWindowLocations',
    });
  };
  const onClickMap = () => {
    selectedLocationInfoWindowS({
      type: '',
      selectedInfoR: {
        _id: '',
      },
    });
  };

  return (
    <div id='map'>
      <GoogleMap
        id='map_canvas'
        mapContainerStyle={mapContainerStyle}
        zoom={12}
        center={userLocation}
        options={options}
        onClick={() => onClickMap()}
      >
        {!unAuthNoSearchResults &&
          searchedResults.map((searchedResult) => {
            if (
              mouseHoverIdR === searchedResult._id ||
              selectedInfoR._id === searchedResult._id
            ) {
              var a = window.google.maps.Animation.BOUNCE;
            }

            return (
              <Marker
                position={searchedResult.coordinates}
                key={searchedResult._id}
                clickable
                onClick={() => onClickMarker(searchedResult)}
                animation={a}
                id={'hello'}
              />
            );
          })}
     
      </GoogleMap>
    </div>
  );
};

当我尝试在地图上显示标记时，如何解决我得到的错误？

标签： reactjsgoogle-mapsreact-google-maps