如何在有界限的情况下使用fitBounds

Question

我到底在哪里叫fitBounds或map.fitbounds。我很困惑，一旦我有了界限，应该把它放在哪里，或者如何使用它。我已经将边界设置为局部边界状态。

我在这里看过这个帖子，反应-谷歌地图:如何使用fitBounds，panBy，panTo，panToBounds公共API？，或者我只是做了不同的事情，或者什么的，因为它对我没什么好处。

我创建了一个bounds const，然后每次我创建一个标记时，我都会将每个标记添加到执行bounds.extends(Marker in here)的边界上。

代码有点乱七八糟，所以我会指出我在其中做这些的地方。在filterItemsByRadius内部是我创建和设置边界的地方。在map函数的末尾，我认为将边界状态设置为界。

/* global google */
import { default as React, Component } from 'react';
import raf from 'raf';
import canUseDOM from 'can-use-dom';
import { connect } from 'react-redux';
import { Link } from 'react-router';
import {
  withGoogleMap,
  GoogleMap,
  Circle,
  InfoWindow,
  Marker,
  withScriptjs,
} from 'react-google-maps';
import geolib from 'geolib';
import { geolocated } from 'react-geolocated';
import ItemList from './ItemList';
import { Col } from 'react-bootstrap';

import Paper from 'material-ui/Paper';
import Img from 'react-image';
import RaisedButton from 'material-ui/RaisedButton';
import FontIcon from 'material-ui/FontIcon';
import CreateRadius from './CreateRadius';
import offerActions from '../../redux/actions/offerActions';

const googleMapURL =
  'https://maps.googleapis.com/maps/api/js?libraries=places,geometry&key=AIzaSyA7XEFRxE4Lm28tAh44M_568fCLOP_On3k';

const isJson = str => {
  try {
    JSON.parse(str);
  } catch (e) {
    return false;
  }
  return true;
};

const GeolocationGoogleMap = withScriptjs(
  withGoogleMap(props => (
    <GoogleMap defaultZoom={6} zoom={props.zoom} center={props.center} onClick={props.onMapClick}>
      {props.center && (
        <Marker
          position={props.center}
          title={"User's Location"}
          options={{ icon: require('./assets/blueDot.png') }}
        >
          {props.showCenterInfo && (
            <InfoWindow>
              <div>User's Location</div>
            </InfoWindow>
          )}
        </Marker>
      )}
      {/* <Circle
          center={props.center}
          radius={props.zoom}
          options={{
            fillColor: 'red',
            fillOpacity: 0.2,
            strokeColor: 'red',
            strokeOpacity: 1,
            strokeWeight: 1,
          }}
        /> */}
      {props.markers.map((marker, index) => {
        const onClick = () => props.onMarkerClick(marker);
        const onCloseClick = () => props.onCloseClick(marker);

        return (
          <Marker
            key={index}
            position={marker.position}
            title={marker.number.toString()}
            onClick={onClick}
            options={{ icon: 'https://image.ibb.co/evMHxF/shopping_zone_marker_1.png' }}
          >
            {marker.showInfo && (
              <InfoWindow onCloseClick={onCloseClick}>
                <div>
                  <ItemList marker={marker} />
                </div>
              </InfoWindow>
            )}
          </Marker>
        );
      })}
    </GoogleMap>
  )),
);

class OfferMap extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentPosition: null,
      center: null,
      content: null,
      radius: 15, // ACZ --> put this const in config_env.
      showCenterInfo: true,
      markers: [],
      zoom: 6,
      bounds: null,
    };

    this.handleMarkerClick = this.handleMarkerClick.bind(this);
    this.handleCloseClick = this.handleCloseClick.bind(this);
    this.handleMapClick = this.handleMapClick.bind(this);
    this.filterItemsByRadius = this.filterItemsByRadius.bind(this);
    this.radiusChange = this.radiusChange.bind(this);
    this.zoomChange = this.zoomChange.bind(this);
  }

  componentWillReceiveProps(props) {
    if (props.coords && !props.coords.positionError) {
      this.setState({ center: { lat: props.coords.latitude, lng: props.coords.longitude } });
    } else {
      fetch('http://ip-api.com/json')
        .then(res => res.json())
        .then(data => {
          this.setState({ center: { lat: data.lat, lng: data.lon } });
        })
        .catch(error => {
          this.setState({ content: `Error: The Geolocation service failed (${error.message}).` });
        });
    }
    this.setState({ markers: props.items });
  }

  handleMapClick() {
    this.setState({ showCenterInfo: false });
  }

  handleMarkerClick(targetMarker) {
    this.setState({
      markers: this.state.markers.map(marker => {
        if (marker._id === targetMarker._id) {
          return {
            ...marker,
            showInfo: true,
          };
        }
        return marker;
      }),
    });
  }

  handleCloseClick(targetMarker) {
    this.setState({
      markers: this.state.markers.map(marker => {
        if (marker._id === targetMarker._id) {
          return {
            ...marker,
            showInfo: false,
          };
        }
        return marker;
      }),
    });
  }

  filterItemsByRadius(userRadius) {
    const items = this.state.markers;
    const markers = [];
    const bounds = new google.maps.LatLngBounds();

    items.map((item, i) => {
      let itemGeolocation;
      let itemDescription = 'NO DESCRIPTION';
      let itemThumb;
      // Should be ready - tbaustinedit
      if (item) {
        itemDescription = item.description;
        itemThumb = item.media.mediaVault[item.media.defaultIdx] || {
          mediaType: 'txt',
        };
      }
      if (item.geolocation) {
        itemGeolocation = item.geolocation.coords;
      }
      if (this.state.center) {
        const currentLocation = {
          latitude: this.state.center.lat,
          longitude: this.state.center.lng,
        };
        const distanceArr = geolib.orderByDistance(currentLocation, [itemGeolocation]);
        const miles = (distanceArr[0].distance / 1609.34).toFixed(2);
        if (miles <= userRadius) {
          const loc = new google.maps.LatLng(itemGeolocation.lat, itemGeolocation.lng);
          bounds.extends(loc);
          markers.push({
            _id: item._id,
            position: itemGeolocation,
            number: i,
            content: itemDescription,
            price: item.price,
            quantity: item.quantity,
            currency: item.currency,
            category: item.category,
            title: item.title,
            offer: item.offer,
            thumbnail: itemThumb,
            showInfo: item.showInfo || false,
          });
        }
      }
    });
    this.setState({
      bounds,
    });
    return markers;
  }

  radiusChange(event) {
    console.log(event.target.value);
    this.setState({
      radius: event.target.value,
    });

    const { filter } = this.props.offers;
    filter.radius = event.target.value;
    this.props.sortOffersNew(filter);
  }

  zoomChange(e) {
    console.log('value', e.target.value);
    this.setState({ zoom: Number(e.target.value) });
  }

  render() {
    const markers = this.filterItemsByRadius(this.state.radius);
    return (
      <Col xs={12} smOffset={0} mdOffset={0}>
        <div>
          <div style={{ fontFamily: 'Roboto', fontStyle: 'normal' }}>
            Offers within radius of: {' '}
            <input type="text" defaultValue={this.state.radius} onChange={this.radiusChange} /> {' '}
            miles
            <br />
          </div>
          {/* <CreateRadius
            radiusChange={this.radiusChange}
            numOffers={markers.length}
            initRadius={this.state.zoom}
          /> */}
        </div>
        <br />

        <div
          style={{
            width: '100%',
            height: '500px',
          }}
        >
          <GeolocationGoogleMap
            googleMapURL={googleMapURL}
            loadingElement={<div style={{ height: '100%' }} />}
            containerElement={<div style={{ height: '100%' }} />}
            mapElement={<div style={{ height: '100%' }} />}
            center={this.state.center}
            showCenterInfo={this.state.showCenterInfo}
            content={this.state.content}
            radius={this.state.radius}
            onMapClick={this.handleMapClick}
            onMarkerClick={this.handleMarkerClick}
            onCloseClick={this.handleCloseClick}
            markers={markers}
            zoom={this.state.zoom}
            bounds={this.state.bounds}
          />
        </div>
      </Col>
    );
  }
}

function mapStateToProps({ browser, offers }) {
  return { browser, offers };
}

const dispatchToProps = dispatch => ({
  sortOffersNew: filter => dispatch(offerActions.sortOffers(filter)),
});

export default connect(mapStateToProps, dispatchToProps)(
  geolocated({
    positionOptions: {
      enableHighAccuracy: false,
    },
    userDecisionTimeout: 5000,
  })(OfferMap),
);

Answer 1

您可以通过向google生成的DOM元素添加一个ref来访问fitBounds。

首先，添加一个ref：<GoogleMap ref={(ref) => { this.map = ref; }}>...</GoogleMap>

一旦组件被挂载，您将能够使用ref调用fitBounds。this.map.fitBounds(bounds)

Answer 2

您可以在componentDidMount或呈现函数中使用

将ref添加到GoogleMap并应用非界限<GoogleMap ref={map => map && map.fitBounds(bounds)}> .... </GoogleMap>

Answer 3

您可以将ref分配给GoogleMap组件，然后使用生命周期挂钩调用fitBounds()函数。

import React, { useRef, useEffect } from 'react';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from "react-google-maps";
import { GOOGLE_API_KEY } from '../../config/config';


// =======================================================================
//  GOOGLE MAPS
// =======================================================================
const RegularMap = withScriptjs(
  withGoogleMap(
    ({ defaultCenter, markers }) => {
      const mapRef = useRef(null);

      // Fit bounds function
      const fitBounds = () => {
        const bounds = new window.google.maps.LatLngBounds();
        markers.map(item => {
          bounds.extend(item.position);
          return item.id
        });
        mapRef.current.fitBounds(bounds);
      };

      // Fit bounds on mount, and when the markers change
      useEffect(() => {
        fitBounds();
      }, [markers]);


      return (
        <GoogleMap ref={mapRef} defaultCenter={defaultCenter}>
          {markers.map(
            ({ position }, index) => <Marker key={`marker_${index}`} position={position} />
          )}
        </GoogleMap>
      );
    })
);


// =======================================================================
//  THE MAIN COMPONENT
// =======================================================================

const MapView = () => {
  const markers = [
    { position: { lat: 37.778519, lng: -122.405640 } },
    { position: { lat: 6.4454594, lng: 3.449074 } }
  ];

  return (
      <RegularMap
        defaultCenter={{ lat: 6.4454594, lng: 3.449074 }}
        markers={markers}
        googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${GOOGLE_API_KEY}`}
        loadingElement={<div className="loader" />}
        containerElement={<div className="mapContainer" style={{ height: "400px" }} />}
        mapElement={<div className="map" style={{ height: '100%' }} />}
      />
  );
}

export default MapView;