InvalidValueError:setMap:不是Map的实例;而不是StreetViewPanorama @ react-google-maps / api

问题描述

我正在使用@ 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>
  );
};

当我尝试在地图上显示标记时,如何解决出现的错误

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)