为什么我的旧标记即使在 react google maps 中的道具更改后仍然可见

问题描述

我正在尝试更新地图上的标记位置,我正在使用状态变量传递 lat lng 值,我有一个按钮触发器来更改标记 lat lng,但是当我这样做时,有 2地图上显示标记,我不知道我哪里出错了。 请帮帮我

import React,{ Component } from 'react';
import { withScriptjs,withGoogleMap,GoogleMap,Marker } from 'react-google-maps';
import { compose,withProps } from 'recompose';
const MAP_com = compose(
  withProps({
    googleMapURL: 'https://maps.googleapis.com/maps/api/js?v=3.exp&libraries=geometry,drawing,places&key=xxxxxxxxx',loadingElement: <div style={{ height: '100%' }} />,containerElement: <div style={{ height: '400px' }} />,mapElement: <div style={{ height: '100%' }} />,}),withScriptjs,)((props) => (
  <GoogleMap defaultZoom={8} defaultCenter={{ lat: -34.397,lng: 150.644 }}>
    {console.log(props)}

    {props.isMarkerShown && <Marker position={props.mark} />}
  </GoogleMap>
));

export default class map_1 extends Component {
  constructor(props) {
    super(props);

    this.state = {
      markerPosition: null,ch: false,};
  }

  click = () => {
    this.setState({
      markerPosition: {
        lat: 12.971599,lng: 77.594566,},ch: true,});
  };
  render() {
    return (
      <div>
        <button onClick={this.click}>click</button>
        <button onClick={() => this.setState({ ch: true,markerPosition: { lat: -34.397,lng: 150.644 } })}>map</button>
        <MAP_com isMarkerShown={this.state.ch} mark={this.state.markerPosition}></MAP_com>
      </div>
    );
  }
}

this is the output image

解决方法

暂无找到可以解决该程序问题的有效方法,小编努力寻找整理中!

如果你已经找到好的解决方法,欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@)