1
Google지도 API를 사용하여지도에 장소를 표시하고 있습니다. 그러나, 나는 내지도에 위치를 드래그 할 때마다, 나는 다음과 같은 오류를 얻을 :Google지도 API에 오류가 발생했습니다. recompose 및 react-google-maps를 사용합니다.
여기, recompose 및 react-google-maps을 Google지도 API를 사용하여 내 Google 맵입니다. 작동하지만 오류가 발생합니다.
/*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 />
)
}
}
Google과 여기 StackOverflow에서 해결책을 찾고 있지만 해결책을 찾을 수 없습니다.
지도에서 위치를 변경 (끌기) 할 때 오류를 어떻게 해결할 수 있습니까?
fetchPlaces: ({ updatePlaces }) => {
//...
}
fetchPlaces: ({ updatePlaces }) =>() => {
//...
}
