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

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的演示