1

我在这里发现这个帖子有类似的问题，但它没有帮助。 谷歌地图标记作为 Reactjs 组件

在我的数据库中，我存储了一些纬度和经度值。我在模型中检索这些值以向用户显示一些数据。我将这些值发送到我按照本教程https://tomchentw.github.io/react-google-maps/#introduction创建的简单 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
    />
  )
 }
}
4

1 回答 1

2

您没有将道具传递给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}
/>
于 2018-01-24T13:13:58.313 回答