1

GoogleマップAPIを使用して地図上に場所を表示しています。しかし、私は私の地図上の位置をドラッグするたびに、私は次のエラーを取得:GoogleマップAPIでエラーを取得するには、recomposeとreact-google-mapsを使用してください。

errors on console

はここで、recomposereact-google-mapsをGoogleマップAPIを使用して、私のグーグルマップです。それは動作しますが、エラーを出しています。

/*global google*/ 
import React from "react" 
import { compose, withProps, withHandlers, withState } from "recompose" 
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps" 

const MyMapComponent = compose(
    withProps({ 
     googleMapURL: "https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places", 
     loadingElement: <div style={{ height: `100%` }} />, 
     containerElement: <div style={{ height: `400px` }} />, 
     mapElement: <div style={{ height: `100%` }} />, 
    }), 
    withScriptjs, 
    withGoogleMap, 
    withState('places', 'updatePlaces', ''), 
    withHandlers(() => { 
     const refs = { 
      map: undefined, 
     } 

     return { 
      onMapMounted:() => ref => { 
       refs.map = ref 
      }, 
      fetchPlaces: ({ updatePlaces }) => { 
       let places; 
       const bounds = refs.map.getBounds(); 
       const service = new google.maps.places.PlacesService(refs.map.context.__SECRET_MAP_DO_NOT_USE_OR_YOU_WILL_BE_FIRED); 
       const request = { 
        bounds: bounds, 
        type: ['hotel'] 
       }; 
       service.nearbySearch(request, (results, status) => { 
        if (status == google.maps.places.PlacesServiceStatus.OK) { 
         console.log(results); 
         updatePlaces(results); 
        } 
       }) 
      } 
     } 
    }), 
)((props) => { 
    return (
     <GoogleMap 
      onTilesLoaded={props.fetchPlaces} 
      ref={props.onMapMounted} 
      onBoundsChanged={props.fetchPlaces} 
      defaultZoom={8} 
      defaultCenter={{ lat: 51.508530, lng: -0.076132 }} 
     > 
      {props.places && props.places.map((place, i) => 
       <Marker key={i} position={{ lat: place.geometry.location.lat(), lng: place.geometry.location.lng() }} /> 
      )} 
     </GoogleMap> 
    ) 
}) 

export default class MyFancyComponent extends React.PureComponent { 
    render() { 
     return (
      <MyMapComponent /> 
     ) 
    } 
} 

私はGithubの問題、Google、ここStackOverflowで解決策を探してみましたが、解決策はまだ見つかりませんでした。

マップ上の場所を変更(ドラッグ)するときに、エラーを修正するにはどうすればよいですか?

google map with markers

答えて

1

withHandlersfetchPlaces関数は高次関数であるので、変更することを期待:

fetchPlaces: ({ updatePlaces }) => { 
    //...   
} 

fetchPlaces: ({ updatePlaces }) =>() => { 
    //... 
} 
関連する問題