google.maps.PlacesService(map)总是返回null

Question

我正在尝试使用带有react-google-maps的谷歌地图API获取附近的餐馆。

import React from 'react';
import { compose, withState, withProps, withStateHandlers, lifecycle } from 'recompose';
import { withScriptjs, withGoogleMap, GoogleMap, Marker, InfoWindow } from 'react-google-maps';
import dotenv from 'dotenv';
import { HOME_MAP } from './MapNavigationConstants';
import MapSearch from './MapSearch';
dotenv.config();
const MapWithInfoWindow = compose(
withProps({
googleMapURL: HOME_MAP,
loadingElement: <div style={{ height: `100%` }} />,
containerElement:<div style={{ height: `720px` }} />,
mapElement:<div style={{ height: `100%` }} />,
}),
withState('mapUrl', 'setMapUrl', ''),
withState('bounds', 'setBounds', null),
withState('center', 'setCenter', {
lat: 53.3498, lng: -6.2603
}),
withState('markers', 'setMarkers', [
{
position: {
lat: () => 53.3498,
lng: () => -6.2603
}
}
]),
withState('places', 'updatePlaces', ''),
withStateHandlers(() => ({
isOpen: false,
isExploreOn: false,
}), {
onToggleOpen: ({ isOpen }) => () => ({
isOpen: !isOpen,
})
}
),
lifecycle({
componentWillMount() {
const refs = {}
this.setState({
onMapMounted: ref => {
refs.map = ref;
},
onBoundsChanged: (bounds, center, markers) => {
this.props.setBounds(!bounds ? this.props.bounds : bounds);
this.props.setCenter(!center ? this.props.center : center);
this.props.setMarkers(!markers ? this.props.markers : markers);
},
fetchPlaces: () => {
this.props.setMapUrl('places');
const bounds = refs.map.getBounds();
const map = refs.map;      
const service = new window.google.maps.places.PlacesService(map);
console.log(service);
const request = {
bounds,
type: ['restaurants', 'cafe','bars']
};
service.nearBySearch(request, (results, status) => {
if (status === window.google.maps.places.PlacesServiceStatus.OK) {
this.props.updatePlaces(results);
}
});
}
})
},
}),
withScriptjs, 
withGoogleMap)((props) => 
<GoogleMap
ref={props.onMapMounted}
defaultCenter = {props.center}
defaultZoom = { 13 }
center={props.center}
bounds={props.bounds}
options={{gestureHandling: 'cooperative', 
scrollwheel: false,
disableDefaultUI: true,
}}
bootstrapURLKeys={{libraries: props.mapUrl}}
onBoundsChanged={props.onBoundsChanged}
>
<MapSearch 
onBoundsChanged={(bounds, center, markers) => props.onBoundsChanged(bounds, center, markers)} 
fetchPlaces={props.fetchPlaces}
/>
{
props.markers && props.markers.length > 0 && props.markers.map((marker, index) => (
<Marker
key={index}
position={{ lat: marker.position.lat(), lng:marker.position.lng() }}
onClick={props.onToggleOpen}
>
{props.isOpen && <InfoWindow onCloseClick={props.onToggleOpen}>
{props.children}
</InfoWindow>}
</Marker>
))
}{
props.places && props.places.length > 0 && props.places.map((place, index) => (
<Marker
key={index}
position={{ lat: place.location.lat(), lng:place.location.lng() }}
onClick={props.onToggleOpen}
>
{props.isOpen && <InfoWindow onCloseClick={props.onToggleOpen}>
{props.children}
</InfoWindow>}
</Marker>
))
}
</GoogleMap>
)
export default MapWithInfoWindow;

此处HOME_MAP=https://maps.googleapis.com/maps/api/js?key=$｛KEY｝&v=3.exp&库=几何图形、绘图、放置

在fetchplaces方法中，newwindow.google.maps.PlacesService(map(总是返回null，service.nearBySearch不会抛出函数错误。

请帮忙。

Answer 1

您的示例至少有两个问题

const map = refs.map;      
const service = new window.google.maps.places.PlacesService(map);
^^^

这里的map对象对应于Map组件的实例，而google.maps.places.PlacesService类则需要GoogleMaps对象。在react-google-maps库的情况下，PlacesService可以这样实例化：

mapMounted(element) {
const mapObject = element.context[MAP];
const service = new google.maps.places.PlacesService(map);
//...
}    

其中

<GoogleMap
ref={this.mapMounted}
defaultZoom={this.props.zoom}
defaultCenter={this.props.center}/>

第行也有一个打字错误：

service.nearBySearch(request, (results, status) => {
^^^^^^^^^^^^

函数应重命名为nearbySearch

这里有一个演示，演示如何将PlacesService与react-google-maps库一起使用。