如何在React组件中加载google地图标记

Question

我发现这篇文章有类似的问题，但没有帮助。谷歌地图标记作为Reactjs组件

在我的数据库中，我存储了一些纬度和经度值。我在模型中检索这些值，以便为用户显示一些数据。我将这些值发送到一个简单的GoogleMaps组件，该组件是我根据本教程创建的https://tomchentw.github.io/react-google-maps/#introduction

组件从"道具"接收"模型"，我得到这些值，并设置在两个变量，并尝试将它们发送到谷歌组件。

地图根本没有加载我发送的这些值。如果我不使用“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
    />
  )
 }
}

Answer 1

您没有将道具传递给MyMapComponent。如果您只输入属性名，它将接收true作为属性值。尝试：

<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}
/>