Переместить центр карты, когда местоположение меняется?

Question

Привет, ребята, я использую библиотеку react-google-maps. Я пытаюсь перенастроить свою карту (увеличить масштаб маркера) каждый раз, когда меняется мое местоположение, но я немного теряюсь в том, как реализовать все это. Я вижу, что маркер обновляется, но карта остается на своей позиции defaultCenter.

import React, { Component } from 'react';
import PropTypes from 'prop-types';
import {
  GoogleMap,
  Marker,
  withScriptjs,
  withGoogleMap
} from 'react-google-maps';

import environment from '../../config/environment';

class Map extends Component {
  static propTypes = {
    defaultZoom: PropTypes.number,
    center: PropTypes.shape({
      lat: PropTypes.number,
      lng: PropTypes.number
    }),
    location: PropTypes.shape({
      lat: PropTypes.number,
      lng: PropTypes.number
    }),
    onPositionChanged: PropTypes.func
  };

  static defaultProps = {
    defaultZoom: 14,
    center: {
      lat: 60.1699,
      lng: 24.9384
    },
    location: {},
    onPositionChanged: () => {}
  };

  constructor(props) {
    super(props);
    this.mapRef = React.createRef((ref) => {
      this.mapRef = ref;
    });
  }

  componenDidUpdate() {
    console.log(`I'm about to update with props: ${JSON.strongify(prevProps, undefined, 2)}`);
  }

  onPositionChanged = (location) => {
    console.log(`This the new location onPositionChange:${JSON.stringify(location, undefined, 2)}`);
    const newLocation = new window.google.maps.LatLng(location.lat, location.lng);
    // [NOTE]: try using the panTo() from googleMaps to recenter the map ? but don't know how to call it.

    return (
      <Marker
        position={newLocation}
      />
    );
  }

  render() {
    const {
      center,
      defaultZoom,
      location,
      onPositionChanged
    } = this.props;

    return (

      <GoogleMap
        className="google-map"
        onClick={onPositionChanged(location)}
        defaultZoom={defaultZoom}
        defaultCenter={center}
        ref={this.mapRef}
      >

        {/* <Marker
          position={location}
        /> */}

        { this.onPositionChanged(location) }
      </GoogleMap>
    );
  }
}

const SchedulerGoogleMap = withScriptjs(withGoogleMap(Map));
const SchedulerMap = props => (
  <SchedulerGoogleMap
    googleMapURL={`https://maps.googleapis.com/maps/api/js?key=${
      environment.GOOGLE_MAPS_API_KEY
    }&v=3`}
    loadingElement={<div style={{ height: '20vh' }} />}
    containerElement={<div style={{ height: '100%' }} />}
    mapElement={<div style={{ height: '20vh', width: '100%' }} />}
    {...props}
  />
);


export { Map, SchedulerMap, SchedulerGoogleMap };

Answer 1

Это то, что мне показалось подходящим, на случай, если любой другой человек столкнется с той же проблемой.

... ommited_code

class Map extends Component {

... ommited_code

  componentDidUpdate(prevProps) {
    if (prevProps.location !== this.props.location) {
      this.mapRef.panTo(
        new window.google.maps.LatLng(this.props.location.lat, this.props.location.lng)
      );
    }
  }

  render() {
    const {
      center,
      defaultZoom,
      location
    } = this.props;

    return (

      <GoogleMap
        className="google-map"
        defaultZoom={defaultZoom}
        defaultCenter={center}
        ref={(ref) => {
          this.mapRef = ref;
        }}
      >
        <Marker position={new window.google.maps.LatLng(location.lat, location.lng)} />
      </GoogleMap>
    );
  }
}

...ommited_code

Answer 2

Просто передайте center реквизит своему компоненту GoogleMap вместо defaultCenter реквизита.center реквизит изменчив, тогда как defaultZoom is not.

Answer 3

panTo() - это метод класса google.maps.Map.(https://developers.google.com/maps/documentation/javascript/reference/map#Map.panTo)

Кажется, это та функция, которую вы ищете, поэтому вам нужно вызвать ее на карте Google, ссылаясь на className, который вы задали для своей карты, а затем присвоите методу panTo LatLang объект, который вы создали:

window.google.maps.Map(document.getElementsByClassName("google-map")).panTo(newLocation);