Как загрузить маркеры карт Google в компонент React

Я нашел здесь этот пост с похожей проблемой, но это не помогло. Маркер карты Google как компонент Reactjs

В моей базе данных хранятся некоторые значения широты и долготы. Я извлекаю эти значения в модели, чтобы отобразить некоторые данные для пользователя. Я отправляю эти значения в простой компонент Google Maps, который я создал после этого руководства 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
    />
  )
 }
}

reactjs javascript google-maps-api-3 google-maps-markers react-google-maps
person Arthur Medeiros    schedule 24.01.2018    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Вы не передаете реквизит 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}
/>
person Matt Pawley    schedule 24.01.2018
comment
Большое спасибо, это сработало. Знаете ли вы, можно ли отправить значения маркеров обратно в предыдущий компонент? Другими словами, если пользователь хочет сохранить другое место, мне нужно отправить эти значения обратно в модель, чтобы я мог отправить их своему контроллеру. - person Arthur Medeiros; 24.01.2018
comment
Конечно, вам нужно будет передать обратный вызов как опору от родительского компонента, посмотрите этот кодовый код и как флажок Показывать только товары на складе взаимодействует с родительским компонентом. В качестве альтернативы вы можете рассмотреть возможность использования Redux, а затем «соедините» два ваших компонента. Пример, представленный на сайте, в общих чертах описывает то, что вы ищете - redux.js.org/ docs / basics / UsageWithReact.html - person Matt Pawley; 25.01.2018
comment
@ArthurMedeiros - тебе помогли советы Мэтта? Мне интересно, можно ли его применить к моему вопросу: stackoverflow.com/questions/49890542/ - person BaronGrivet; 01.05.2018
comment
@BaronGrivet да, его совет сработал для меня. Я прочитал ваш вопрос, и похоже, что у вас проблема с загрузкой маркеров, верно? Я не упоминал об этом здесь, но в моем случае я использую вызов axios для извлечения маркера из контроллера. Этот вызов axios был помещен внутри componentDidMount. Ваша функция выборки делает то же самое? Я понимаю, что ваш JSON где-то обновляется, а затем вы хотите отреагировать, чтобы увидеть, что он изменился, я прав? Если да, то пробовали ли вы использовать ComponentDidUpdate? Но этого недостаточно, похоже, вам нужен какой-то цикл, который бы продолжал прослушивать изменения. - person Arthur Medeiros; 03.05.2018