Google지도 API는 DirectionsService()에 directions.js 의존성을 제공하지 않습니다.

Question

Google지도 API v3를 반응으로 사용하려고하지만 반응을 사용할 때 일부 Google지도 서비스가로드되지 않는 것으로 보입니다. this tutorial을 통해 스크립트를 로딩하는 것을 모두 시도했지만, 내 index.html 파일에 직접 스크립트를로드하고 있지만 아무 소용이 없습니다. 나는-반응 만들-응용 프로그램을 사용하고 다음 종속성 :

"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" 

내가 응용 프로그램 반응 내 밖으로하려면 DirectionsService 코드의 인스턴스을하고 GMAP의 API에게 나가와 나는 같은 방법을 포함 다음을 codepen 반응하는 경우 모든 Google지도 종속성이로드되고있는 것처럼 보입니다. 실제로 코드 펜에서 DirectionsService 코드에 대한 참조를 제거하는 경우 directions.js 파일이 여전히 네트워크 탭에로드됩니다. 그러나

이 내 네트워크 탭 모습입니다 반응과 :

은 누구도 이런 일을 경험 한 적이 있습니까?

Answer 1

지도가 있기 전에 DirectionsService()을 인스턴스화해야한다는 것이 밝혀졌습니다.

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); 
    } 
    }