Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/22.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/7/google-maps/4.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Reactjs gmaps标记范围问题的onPositionChanged处理程序_Reactjs_Google Maps_Google Maps Api 3_Google Maps Markers_React Google Maps - Fatal编程技术网

Reactjs gmaps标记范围问题的onPositionChanged处理程序

Reactjs gmaps标记范围问题的onPositionChanged处理程序,reactjs,google-maps,google-maps-api-3,google-maps-markers,react-google-maps,Reactjs,Google Maps,Google Maps Api 3,Google Maps Markers,React Google Maps,我尝试更新react google maps包装器的可拖动标记的当前位置,并将这些值传递回父级。 我的问题是,在onMarkerPositionChange中,这是FindLocationMarker类或标记本身,具体取决于调用函数的方式。 onpositionchange={()=>this.onMarkerPositionChange()}是我的另一个选择 我需要两者,位置标记和道具中功能的类。 在提供的示例中,此是标记。 evt未定义,我知道 如何为函数同时提供类范围和标记 class F

我尝试更新react google maps包装器的可拖动标记的当前位置,并将这些值传递回父级。
我的问题是,在
onMarkerPositionChange
中,这是FindLocationMarker类或标记本身,具体取决于调用函数的方式。
onpositionchange={()=>this.onMarkerPositionChange()}
是我的另一个选择

我需要两者,位置标记和道具中功能的类。
在提供的示例中,
是标记。
evt
未定义,我知道

如何为函数同时提供类范围和标记

class FindLocationMarker extends Component {

  onMarkerPositionChange = (evt) => {
    console.log(evt);
    let lat = this.position.lat();
    let lng = this.position.lng();

    this.props.handleMarkerPositionChange(lat, lng);
  }

  render() {
    return (
      <div>
        <Marker
          position={this.props.position}
          draggable
          onPositionChanged={this.onMarkerPositionChange}
        />
      </div>
      )
  }
}

export default FindLocationMarker;
类FindLocationMarker扩展组件{
onMarkerPositionChange=(evt)=>{
控制台日志(evt);
设lat=this.position.lat();
设lng=this.position.lng();
本.道具.手钉位置变化(lat,lng);
}
render(){
返回(
)
}
}
导出默认FindLocationMarker;

在下面的长时间讨论之后,我决定用Marker.jsx组件更新我对未来问题的答案

如果要获取标记位置onPositionChange,需要:

  • 将标记存储在参考中
  • 收听onPositionChange事件,然后访问参考中标记的位置
  • 例如:

    onPositionChanged() {
        const position = this.marker.getPosition();
    
        // do something with position
    }
    
    render() {
        return <Marker
            onPositionChanged={ ::this.onPositionChanged }
            ref={input => this.marker = input}
        />
    }
    
    onPositionChanged(){
    const position=this.marker.getPosition();
    //对位置做点什么
    }
    render(){
    返回this.marker=input}
    />
    }
    
    对不起,我无法让它工作。传递标记的唯一方法是在
    onpositionchange
    中使用非箭头函数,并将
    onMarkerPositionChange
    定义为非箭头函数。然后,当我将
    this
    绑定到它时,标记对象将被覆盖。参数未定义,始终(!!)标记组件是您的吗?标记是问题所在,而不是您的实现。它的行为很奇怪……不,不是。看一看:好吧,这个lib看起来很混乱,对我来说是反作用的,但是好吧。。。库正在使用此库:。在位置更改时触发的事件是位置更改。API文档说没有更多的参数应用于函数-这就是我们观察到的。所以我仔细研究了Map.jsx本身,它有一个广泛的getter API。您应该测试的是getPosition()。如何?使用ref={input=>this.marker=input}呈现地图,并在onMarkerPositionChange中尝试this.marker.getPosition(),感谢Tobias,效果非常好。我发现了一个类似但稍微复杂的解决方案。但是你的方法更干净,我更喜欢这个。穆查斯·格雷西亚斯