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

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

科尔斯问题

Answer 1

根据库的文档，看起来anchor属性需要一个MVCObject类型值，但您正在LatLngLiteral传递它。使用position而不是anchor。

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