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

panTo()是google.maps.Map类的方法。（https://developers.google.com/maps/documentation/javascript/reference/map#Map.panTo）

这似乎是您要寻找的功能，因此您需要通过引用为地图设置的className在Google地图上调用它，然后为panTo方法提供LatLang对象您创建的：

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

Answer 2

这似乎对我有用，以防万一其他人遇到相同的问题。

... 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

位置更改时重新放置地图中心？

2 个答案: