javascript - 如何仅在需要时在我的 React 应用程序中加载 google maps api <script>？

Question

我想尝试使用 google maps API 来显示 map ，但我想知道是否有更好的方法来加载 <script>标记而不是将它放在我的 index.html 中。

我希望脚本仅在我转到 /map 时才加载路线。所以，我想将它从我的 index.html 中删除并动态加载它。但是，我还想确保如果它已经加载，我不会尝试再次加载它。

我不确定是否有库可以处理这个问题。到目前为止我尝试过(但失败了)是创建一个 loadScript附加 <script> 的函数到实际的 dom 并为其分配一个键，所以在这种情况下 'google-maps .

谢谢

Answer 1

2019 年 10 月 6 日更新:示例代码仍然运行良好，我刚刚将它们更新为使用非装饰器语法。

---

这就是我在最近的项目中让它发挥作用的原因。我用了react-async-script-loader组件。

import React from 'react';
import scriptLoader from 'react-async-script-loader';

class Maps extends React.Component {
  constructor(props) {
    super(props);
    this.map = null;
  }

  componentWillReceiveProps({ isScriptLoaded, isScriptLoadSucceed }) {
    if (isScriptLoaded && !this.props.isScriptLoaded) {
      // load finished
      if (isScriptLoadSucceed) {
        this.map = new google.maps.Map(this.refs.map, {
          center: { lat: 10.794234, lng: 106.706541 },
          zoom: 20
        });

        if (navigator.geolocation) {
          navigator.geolocation.getCurrentPosition(
            position => {
              const pos = {
                lat: position.coords.latitude,
                lng: position.coords.longitude
              };

              this.map.setCenter(pos);

              const marker = new google.maps.Marker({
                position: pos,
                map: this.map,
                title: 'Hello World!'
              });
            },
            () => {
              console.log('navigator disabled');
            }
          );
        } else {
          // Browser doesn't support Geolocation
          console.log('navigator disabled');
        }
      } else this.props.onError();
    }
  }

  render() {
    return (
      <div>
        <div ref="map" style={{ height: '80%', width: '100%' }}></div>
        {!this.map && <div className="center-md">Loading...</div>}
      </div>
    );
  }
}

export default scriptLoader(['https://maps.googleapis.com/maps/api/js?key=API_KEY'])(Maps);