无效的latlng对象：（37.42216，未定义）错误在我的React-Redux应用程序上呈现Google Map时

Question

我正在尝试在我的React-Redux应用程序上渲染Google Map。一切都很好。直到我决定将一些自定义标记添加到渲染的Google地图上。现在，该页面是空白的，因为我在浏览器控制台中看到的错误，

lat_lng.js:21 Uncaught Error: Invalid LatLng object: (37.42216, undefined)
    at new e (lat_lng.js:21:1)
    at O.convert (lat_lng.js:5:1)
    at t.fromLatLngToCenterPixel (index.js:43:1)

我很快将其恢复到工作代码。...但是它仍然显示出相同的错误。

这些是相关的代码：

locationpin.js

import { Icon } from '@iconify/react'
import locationIcon from '@iconify/icons-mdi/map-marker'

const LocationPin = ({ text }) => (
    <div className="pin">
      <Icon icon={locationIcon} className="pin-icon" />
      <p className="pin-text">{text}</p>
    </div>
  )

export default LocationPin;  

map.js

import GoogleMapReact from 'google-map-react'
import LocationPin from './LocationPin';
import { MapContainer } from './style';

  const Map = ({ location, zoomLevel }) => {
    console.log('location', location);
    console.log('zoomLevel', zoomLevel);
  
     return ( 
     <MapContainer>
        <GoogleMapReact
          bootstrapURLKeys= {{ key: process.env.REACT_APP_API_KEY }}
          defaultCenter={location}
          defaultZoom={zoomLevel}
        >
          <LocationPin
            lat={location.lat}
            long={location.long}
            text={location.address}
          />
        </GoogleMapReact>
      </MapContainer>
     )
  }

  export default Map;

revervationsDetails.js

import Map from "../../components/map/Map";
import ParkingGridVertical from "../../components/ParkingGridVertical";
import { ParkingGridVerticalWrapper, ReservationsAsideWrapper,
         ReservationsDetailsContainer,
         ReservationsMainWrapper,
         ReservationTypeWrapper,
         SearchReservationsWrapper,
         SearchResultWrapper,
       } from "./style";

const ReservationsDetails = () => {
    const reserveParking = [
        'https://user-images.githubusercontent.com/51296741/169976664-533d9594-fb24-4e81-b097-ee16fbfe9189.png',
        'https://user-images.githubusercontent.com/51296741/169976664-533d9594-fb24-4e81-b097-ee16fbfe9189.png',
        'https://user-images.githubusercontent.com/51296741/169976664-533d9594-fb24-4e81-b097-ee16fbfe9189.png',
      ];
      

      const location = {
        address: '1600 Amphitheatre Parkway, Mountain View, california.',
        lat: 37.42216,
        long: -122.08427,
      }
      console.log('locationMe', location);

    return (
        <ReservationsDetailsContainer>
            <ReservationsAsideWrapper>
                <SearchReservationsWrapper>
                    <ReservationTypeWrapper>
                        <p>Single Day</p>
                        <p>Flex</p>
                        <p>Monthly</p>
                    </ReservationTypeWrapper> 
                    <SearchResultWrapper>
                    <input
                    type="text"
                    name="search"
                    placeholder="Search Address, Place and Event"
                    />
                    <button type="submit">Search</button>
                    </SearchResultWrapper>
                </SearchReservationsWrapper>
                <ParkingGridVerticalWrapper>
                    <ParkingGridVertical
                     locations={reserveParking}
                    />
                </ParkingGridVerticalWrapper>               
            </ReservationsAsideWrapper>
           <ReservationsMainWrapper>
             <Map location={location} zoomLevel={17} />
           </ReservationsMainWrapper>         
        </ReservationsDetailsContainer>
    );
}

export default ReservationsDetails;

关于如何解决此问题的任何想法将不胜感激。

Answer 1

我需要做的就是将长替换为lng上述组件中的各个位置。它奏效了

示例

long={location.long}

...

lng={location.lng}