Question

我正在尝试使用带有react-google-maps的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＆libraries =几何，绘图，位置

在fetchplaces方法内部，新的window.google.maps.places.PlacesService（map）始终返回null，service.nearBySearch不会引发函数错误。

请帮助。

Answer 1

您的示例至少有两个问题

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

map对象对应于Map component的实例，而google.maps.places.PlacesService类则希望使用Google Maps对象。对于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}/>

第1行也有错字：

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

功能应重命名为nearbySearch

这是a demo，它演示了如何将Places Service与react-google-maps库一起使用。

google.maps.places.PlacesService（地图）始终返回null

1 个答案: