Question

我正在尝试在我的应用中将react-google-maps用作经纬度输入。为了获得用户选择的位置，我使用了onclick事件，由于设置了标记，它几乎可以按预期工作，但是地图正在刷新并转到默认的中心，并在用户选择所需位置时进行缩放。我该如何避免这种奇怪的行为？

import React from "react";
import { withScriptjs, withGoogleMap, GoogleMap, Marker, MarkerWithLabel } from "react-google-maps";

export default class MapTest extends React.Component {
    constructor(){
        super();
        this.state={
            isMarkerShown: false,
            markerPosition: null
        }
    }
    onMapClick= (e) => this.setState({
        markerPosition: e.latLng,
        isMarkerShown:true}
    );


  render() {
    var Map= withScriptjs(withGoogleMap((props) =>
    <GoogleMap
      defaultZoom={12}
      center={ { lat:  4.4360051, lng: -75.2076636 } }
      onClick={this.onMapClick}
      >
    {this.state.isMarkerShown && <Marker position={this.state.markerPosition} />}
        </GoogleMap>));
      return (<Map {...this.props} />);

  }
}

Answer 1

那是因为您在每个render调用中都创建了一个新对象。

withScriptjs(withGoogleMap应该存储在可重复使用的地方

例如

class MapTest extends React.Component {
  //...

  Map = withScriptjs(
    withGoogleMap(props => (
      <GoogleMap
        defaultZoom={12}
        center={{ lat: 4.4360051, lng: -75.2076636 }}
        onClick={props.onClick}
      >
        {props.children}
      </GoogleMap>
    ))
  );

  render() {
    return <this.Map {...this.props} onClick={this.onMapClick}>
      {this.state.isMarkerShown && (
        <Marker position={this.state.markerPosition} />
      )}
    </this.Map>;
  }
}

演示在https://codesandbox.io/s/n05jm6j0jm

执行onclick时react-google-maps正在刷新地图

1 个答案: