使用 @react-google-maps/api 时出现 CORS 错误

Question

我在 onClick 函数设置中遇到了 CORS 错误。我只是设置静态标记（页面加载时的标记而不是动态添加的）。我已经让它们渲染得很好，但是当我实际单击标记时，我得到一个指向 setSelected 行的 CORS 错误。知道为什么吗？

import React from 'react';
import styled from 'styled-components';
import { GoogleMap, useLoadScript, Marker, InfoWindow } from '@react-google-maps/api';
import mapStyles from "./mapStyles";


const libraries = ["places"];
const mapContainerStyle = {
    width: "100vw",
    height: "70vh"
    
};
const center = {
    lat: 44.962950,
    lng: -93.182013
};
const styles = {
    styles: mapStyles,
    disableDefaultUI: true,
    zoomControl: true,
};
const storeOne = {
    lat:44.970304,
    lng:-93.182184,
}
const storeTwo = {
    lat: 44.957346,
    lng: -93.322546,
}

const onLoad = marker => {
    console.log('marker: ', marker)
  }




const Styled = styled.div` {

    #locationTitle {
        font-family: Dosis;
        text-align: center;
        margin-top: 5%;
        padding-bottom: 50px;
        margin-top: 20px;
    }


}
`;

export default function Locations() {


    const {isLoaded, loadError} = useLoadScript({
        googleMapsApiKey: process.env.REACT_APP_GOOGLE_KEY,
        libraries,
    })

    const [selected, setSelected] = React.useState(null);
    const [marker, setMarkers] = React.useState([]);
    const mapRef = React.useRef();
    const onMapLoad = React.useCallback((map) => {
        mapRef.current = map;
    }, [])


    if (loadError) return "Error loading maps";
    if (!isLoaded) return "Loading Maps"

    



    return (
        <div>

            <Styled>

                <h2 id="locationTitle">Our Locations</h2>

            </Styled>
            <GoogleMap id="map"

                    mapContainerStyle={mapContainerStyle}
                    zoom={12} 
                    center={center}
                    options={styles}

            >

            <Marker 
                onLoad={onMapLoad}
                position={storeOne}
                onClick={() => {
                    setSelected(marker);

                }}
            />
            <Marker 
                onLoad={onMapLoad}
                position={storeTwo}
            />

            {selected ? (
                    <InfoWindow anchor={{lat:44.970304, lng:-93.182184}}>
                            <div>
                                <h2>St. Paul</h2>
                            </div>
                        </InfoWindow>
                        ) : null}

            </GoogleMap>
           


        </div>
    )
};

这是我的控制台错误的图像

cors issue

Answer 1

根据库的documentation，看起来anchor 属性需要MVCObject 类型值，但您传递给它的是LatLngLiteral。使用position 而不是anchor。

{selected ? (
  <InfoWindow position={{ lat: 44.970304, lng: -93.182184 }}>
    <div>
      <h2>St. Paul</h2>
    </div>
  </InfoWindow>
) : null}