时间戳

首页 > 解决方案 > 如何使用 react-google-maps 将 GoogleMap React 组件重新居中到新地址？

reactjs - 如何使用 react-google-maps 将 GoogleMap React 组件重新居中到新地址？

问题描述

我正在使用 React 中的“react-google-maps”库渲染一个 GoogleMap 组件。我可以设置一个defaultLocation在地图最初加载时可以正常工作的初始值。在文档中，它说该组件采用“中心”道具，可以将 lat 和 lng 传递给该道具，但我无法将其重新渲染/重新居中到新位置。它始终显示默认位置。知道我做错了什么吗？

有没有办法可以在类之外使用状态，addAdressComponent以便我可以动态设置初始值defaultCenter而不是在渲染部分使用道具？

import { withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
/*global google*/

const MapWithMarker = withGoogleMap((props) => (
  <GoogleMap
    defaultZoom={12}
    defaultCenter={{ lat: 47.376888, lng: 8.541694 }}
    options={{
      disableDefaultUI: true,
    }}
  >
    <Marker position={{ lat: 47.376888, lng: 8.541694 }} />
  </GoogleMap>
));

class addAddressComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      lat: 0,
      lng: 0,
    };
    this.onSuggestSelect = this.onSuggestSelect.bind(this);
  }

  onSuggestSelect(suggest) {
    console.log(suggest.location);
    this.setState(() => {
      return {
        lat: 10.0,
        lng: 20.022,
      };
    });
  }
  render() {
    return (
      <div className="wrapperClass">
        <MapWithMarker
          containerElement={<div style={{ height: '244px' }} />}
          mapElement={<div style={{ height: '100%' }} />}
          className="mapCSS"
          center={(this.state.lat, this.state.lng)}
          style={{
            width: '348px',
            height: '250px',
          }}
        />
      </div>
    );
  }
}

export default addAddressComponent;

标签： reactjsreact-google-maps

解决方案

您需要将该center属性传递给GoogleMap组件内的MapWithMarker组件。中心参数也需要是这样的对象：

{ 纬度：-34.397，液化天然气：150.644 }

以下示例允许您使用按钮更改地图的中心：

import logo from './logo.svg';
import './App.css';
import { withScriptjs, withGoogleMap, GoogleMap, Marker } from 'react-google-maps';
import {useState} from "react";
const MyMapComponent = withScriptjs(withGoogleMap((props) =>
    <GoogleMap
        defaultZoom={13}
        center={props.center}
        defaultCenter={{ lat: -34.397, lng: 150.644 }}
    >
      {props.isMarkerShown && <Marker position={{ lat: -34.397, lng: 150.644 }} />}
    </GoogleMap>
))
function App() {
  const [position, setPosition] = useState({ lat: -34.397, lng: 150.644 });
  return (
    <div className="App">
      <button onClick={() => setPosition({lat: 30, lng: 10})}>,
        Click me
      </button>
      <MyMapComponent
          isMarkerShown
          googleMapURL="https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places"
          loadingElement={<div style={{ height: `100%` }} />}
          containerElement={<div style={{ height: `100%` }} />}
          center={position}
          mapElement={<div style={{ height: `1000px`}} />}
      />
    </div>
  );
}
export default App;

推荐阅读