如何在 React 组件中加载 google 地图标记
How to load google maps markers in a React Component
我在这里 post 发现了类似的问题,但没有帮助。
Google Map Marker as Reactjs Component
在我的数据库中,我存储了一些纬度和经度值。我在模型中检索这些值以向用户显示一些数据。我将这些值发送到我按照本教程 https://tomchentw.github.io/react-google-maps/#introduction
创建的简单 Google 地图组件
组件从 "props" 接收 "model",我获取这些值并设置两个变量并尝试将它们发送到 google 组件。
地图根本不加载我发送的这些值。如果我不使用 "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
/>
)
}
}
您没有将道具传递给 MyMapComponent
。如果您只输入属性名称,它将接收 true 作为 prop 值。尝试:
<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}
/>
我在这里 post 发现了类似的问题,但没有帮助。 Google Map Marker as Reactjs Component
在我的数据库中,我存储了一些纬度和经度值。我在模型中检索这些值以向用户显示一些数据。我将这些值发送到我按照本教程 https://tomchentw.github.io/react-google-maps/#introduction
创建的简单 Google 地图组件组件从 "props" 接收 "model",我获取这些值并设置两个变量并尝试将它们发送到 google 组件。
地图根本不加载我发送的这些值。如果我不使用 "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
/>
)
}
}
您没有将道具传递给 MyMapComponent
。如果您只输入属性名称,它将接收 true 作为 prop 值。尝试:
<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}
/>