response-google-maps обновляет карту при выполнении onclick - PullRequest
Новая
       20

response-google-maps обновляет карту при выполнении onclick

0 голосов
/ 25 января 2019

Я пытаюсь использовать response-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} />);

  }
}

1 Ответ

0 голосов
/ 25 января 2019

Это потому, что вы создаете новый объект в каждом 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

...