Ошибка типа: не удается прочитать свойство 'maps' из неопределенного - PullRequest
Новая
       10

Ошибка типа: не удается прочитать свойство 'maps' из неопределенного

0 голосов
/ 21 ноября 2018 
  componentDidMount() {
    window.initMap = this.initMap
    ((doc, script) => {
        const element = doc.getElementsByTagName(script)[0];
        const fjs =element;
        let js = doc.createElement(script);
        js.src = `https://maps.googleapis.com/maps/api/js?key=${this.props.mapKey}&callback=initMap`
        if (fjs && fjs.parentNode) {
            fjs.parentNode.insertBefore(js, fjs)
          } else {
            doc.head.appendChild(js)
          }
    })(document, 'script')
}

initMap = () =>{

        let uluru = {lat: -25.344, lng: 131.036};
        let map = new window.google.maps.Map(
            document.getElementById('map'), {zoom: 4, center: uluru});


}

Я динамически создаю тег сценария для загрузки функции Google и назначаю глобальную функцию initMap локальной функции, когда я выполняю эту программу. Я получаю сообщение, что не могу прочитать карты свойств undefiend. Кто-нибудь может мне помочь, что я не так?делать? * * 1002

1 Ответ

0 голосов
/ 21 ноября 2018

Проблема в том, что код выполняется до загрузки скрипта.
Уже есть проект с открытым исходным кодом, который реализует Карты Google, но если вы все еще хотите реализовать его самостоятельно, вы можете использовать scriptjs .Этот пакет позволяет импортировать ресурс и запускать функциональность при его загрузке.В этом случае не требуется тег сценария.

Пример выполнения: 

class GoogleMap extends React.Component {
  componentDidMount() {
    if (!window.google || !window.google.maps) {
      const { googleKey } = this.props;
      // require is not working inside stackoverflow snippets
      // we are using a cdn for scriptjs, you can use npm
      //const $script = require(`scriptjs`);
      $script(
        `https://maps.googleapis.com/maps/api/js?key=${googleKey}`,
        this.handleGoogleLoad
      );
    }
  }

  componentDidUpdate(prevProps) {
    const { position } = this.props;
    if (prevProps.position !== position) {
      this.map && this.map.setCenter(position);
      this.marker && this.marker.setPosition(position);
    }
  }

  handleGoogleLoad = () => {
    const { position } = this.props;
    this.map = new window.google.maps.Map(this.mapRef, {
      scaleControl: true,
      center: null,
      zoom: 10
    });
    this.marker = new window.google.maps.Marker({
      map: this.map,
      position: position
    });

    this.map.setCenter(position);
    this.marker.setPosition(position);
  };

  render() {
    return <div style={{ height: "350px" }} ref={ref => (this.mapRef = ref)} />;
  }
}

class App extends React.Component {
  state = { lat: 40.741895, lng: -73.989308, googleKey: "" };

  onInputChange = ({ target }) => {
    this.setState({ [target.name]: target.value });
  };

  render() {
    const { lat, lng, googleKey } = this.state;
    const position = { lat: Number(lat), lng: Number(lng) };
    return (
      <div className="App">
        <div>
          <label>Paste google key </label>
          <input
            name="googleKey"
            value={googleKey}
            onChange={this.onInputChange}
          />
          <hr />
          <div>Change coords</div>
          <input name="lat" value={lat} onChange={this.onInputChange} />
          <input name="lng" value={lng} onChange={this.onInputChange} />
        </div>
        <hr />
        {googleKey ? (
          <GoogleMap position={position} googleKey={googleKey} />
        ) : (
          <div>Missing google key</div>
        )}
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/script.js/2.5.9/script.min.js"></script>
<div id="root"/>
...