使用@react-google-maps/api 时出现 CORS 错误
CORS error working with @react-google-maps/api
我 运行 遇到 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
根据库的 documentation,anchor
属性 似乎需要一个 MVCObject
类型值,但您传递给它的是 LatLngLiteral
.使用 position
而不是 anchor
.
{selected ? (
<InfoWindow position={{ lat: 44.970304, lng: -93.182184 }}>
<div>
<h2>St. Paul</h2>
</div>
</InfoWindow>
) : null}
我 运行 遇到 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
根据库的 documentation,anchor
属性 似乎需要一个 MVCObject
类型值,但您传递给它的是 LatLngLiteral
.使用 position
而不是 anchor
.
{selected ? (
<InfoWindow position={{ lat: 44.970304, lng: -93.182184 }}>
<div>
<h2>St. Paul</h2>
</div>
</InfoWindow>
) : null}