如何解决我可以在 Google Map 组件中查询 GraphQL 吗?
我在玩 Gatsby/Contentful 和 Google 地图。
我已经创建了这个组件:
import React from 'react'
import { GoogleMap,Marker,InfoWindow } from 'react-google-maps'
const Map = (props) => {
return (
<GoogleMap
defaultZoom={12}
defaultCenter={{
lat: 34.0522,lng: 118.2437
}}
>
<Marker
onMouseOver={() => {
setInfoWindow(true)
}}
onClick={() => props.setmodal(true)}
position={{
lat: 34.0522,lng: 118.2437
}}
/>
</GoogleMap>
)
}
export default Map;
地图正在显示,一切正常。我尝试使用这种方法访问我的 Contentful 数据,但收到一个错误,提示 allContentfulLocations 未定义。如何在 Google 地图中查询我的 Contentful 数据?
这是我失败的方法。
import React from 'react'
import { GoogleMap,InfoWindow } from 'react-google-maps'
import { graphql } from "gatsby"
export const query = graphql`
{
allContentfulLocations {
nodes {
id
name
location {
lat
lon
}
}
}
}
`
const Map = ({props,data}) => {
const {
allContentfulLocations: { nodes: locations },} = data
const [infoWindow,setInfoWindow] = useState(false)
return (
<GoogleMap
defaultZoom={12}
defaultCenter={{
lat: location.location.lat
lng: location.location.lon
}}
>
{locations.map(location => {
return (
<Marker
onMouseOver={() => {
setInfoWindow(true)
}}
onClick={() => props.setmodal(true)}
position={{
lat: 34.0522,lng: 118.2437
}}
/>
)
})}
</GoogleMap>
)
}
export default Map;
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。