[英]How to load google maps markers in a React Component
I've found this post here with a similar issue, but it didn't help. 我在这里发现了与此类似的帖子,但没有帮助。 Google Map Marker as Reactjs Component
Google Map Marker作为Reactjs组件
In my database I have some Latitude and Longitude values stored. 在我的数据库中,我存储了一些纬度和经度值。 I retrieve these values in a model to display some data for the user.
我在模型中检索这些值以为用户显示一些数据。 I am sending these values to a simple Google Maps Component I created following this tutorial https://tomchentw.github.io/react-google-maps/#introduction
我将这些值发送到我按照本教程https://tomchentw.github.io/react-google-maps/#introduction创建的一个简单的Google Maps Component
The component receives "model" from "props", I get these values and set in two variables and try to send them to the google component. 该组件从“ props”接收“ model”,我得到了这些值并设置了两个变量,然后尝试将它们发送到google组件。
The map simply does not load with these values I am sending. 该地图根本不会加载我正在发送的这些值。 If I don't use "parseFloat" I get an error saying the values were not in a correct format.
如果我不使用“ parseFloat”,则会收到一条错误消息,指出值的格式不正确。
import React from 'react'
import {withGoogleMap,
withScriptjs,
GoogleMap,
Marker } from 'react-google-maps';
import { compose, withProps } from 'recompose'
const MyMapComponent = withScriptjs(withGoogleMap((props) =>
<GoogleMap
defaultZoom={8}
defaultCenter={{lat:parseFloat(props.lat),lng:parseFloat(props.long)}}
>
{props.isMarkerShown && <Marker position={{lat:-18.245630,lng:-45.222387}}
/>}
</GoogleMap>
))
export default class extends React.Component {
constructor(props) {
super(props)
this.state = {
isMarkerShown: false
}
}
componentDidMount() {
this.delayedShowMarker()
}
delayedShowMarker = () => {
setTimeout(() => {
this.setState({ isMarkerShown: true })
}, 3000)
}
handleMarkerClick = () => {
this.setState({ isMarkerShown: false })
this.delayedShowMarker()
}
render() {
let { model } = this.props;
let lat = model.value.latitudeGeoreferencia
let long = model.value.longitudeGeoreferencia
return (
<MyMapComponent
isMarkerShown
googleMapURL="https://maps.googleapis.com/maps/api/js?
key=myKey.exp&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
lat
long
/>
)
}
}
You aren't passing the props to MyMapComponent
. 您没有将道具传递给
MyMapComponent
。 If you just put the attribute name, it will receive true as the prop value. 如果仅输入属性名称,它将收到true作为prop值。 Try:
尝试:
<MyMapComponent
isMarkerShown={this.state.isMarkerShown}
googleMapURL="https://maps.googleapis.com/maps/api/js?
key=myKey.exp&libraries=geometry,drawing,places"
loadingElement={<div style={{ height: `100%` }} />}
containerElement={<div style={{ height: `400px` }} />}
mapElement={<div style={{ height: `100%` }} />}
lat={lat}
long={long}
/>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.