google 地图 api 不为 DirectionsService() 提供 directions.js 依赖

Question

我正在尝试将 google 地图 api v3 与 React 一起使用，但似乎某些 google 地图服务在使用 React 时未加载。我试过通过 this tutorial 延迟加载脚本和直接在我的 index.html 文件中加载脚本，但都无济于事。我正在使用具有以下依赖项的 create-react-app：

"classnames": "^2.2.5",
"invariant": "^2.2.2",
"node-sass-chokidar": "0.0.3",
"npm-run-all": "^4.1.1",
"prop-types": "^15.5.10",
"react": "^15.6.1",
"react-dom": "^15.6.1",
"react-redux": "^5.0.6",
"react-scripts": "1.0.13",
"redux": "^3.7.2"

如果我从我的 React 应用程序中取出 DirectionsService 代码的实例化并以与 React codepen 相同的方式包含 GMAP API 那么似乎所有 google 正在加载地图依赖项。事实上，如果我从代码笔中删除对 DirectionsService 代码的任何引用，directions.js 文件仍会加载到网络选项卡中。

但是，有了 React，我的网络选项卡看起来像这样：

有没有人经历过这样的事情？

Answer 1

原来是DirectionsService()需要在map之前实例化

  loadMap(node) {
    if (this.props && this.props.google) {
      const { google } = this.props;

      // instantiate Direction Service first
      this.directionsService = new google.maps.DirectionsService();

      this.directionsDisplay = new google.maps.DirectionsRenderer({
        suppressMarkers: true,
      });

      const zoom = 13;
      const mapTypeId = google.maps.MapTypeId.ROADMAP;
      const lat = 37.776443;
      const lng = -122.451978;
      const center = new google.maps.LatLng(lat, lng);

      const mapConfig = Object.assign({}, {
        center,
        zoom,
        mapTypeId,
      });


      this.map = new google.maps.Map(node, mapConfig);

      this.directionsDisplay.setMap(this.map);

      // make the map instance available to other components as it is just data
      this.props.dispatchGoogleMap(this.map);
    }
  }

google 地图 api 不为 DirectionsService() 提供 directions.js 依赖

google maps api does not provide directions.js dependency for DirectionsService()

javascript

google-maps-api-3

reactjs

create-react-app