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

Question

我遇到了 CORS 错误与 onClick function 设置。 我只是设置 static 标记（页面加载时的标记而不是动态添加的）。 我已经让它们渲染得很好，但是当我实际单击标记时，我得到一个指向 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 问题

Answer 1

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

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