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

Question

我在这里发现这篇帖子有类似的问题，但没有帮助。 Google Map Marker as Reactjs Component

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

组件从“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
    />
  )
 }
}

Answer 1

您没有将道具传递给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}
/>