如何解决作为回应,麻烦将onClick从Google Maps中的Marker传递到app.js
我想在单击标记时记录onClick
事件,并将其传递给App.js。地图正在加载并且代码运行,但是当我单击标记时,我得到的只是Map.js中的onClick
console.log
返回空对象。
子组件:
function MyComponent( places,onMarkerClickMap ) {
let allTheMarkers =
.
.
.
})
let markerClick = onMarkerClickMap;
let foundMarkers = places.foundPlaces.map(place => {
return (
<Marker
key={place.id}
position={{ lat: place.lat,lng: place.lng }}
icon={place.alive ? icon1 : iconDead}
onClick={() => {console.log(markerClick)}}
/>
);
})
return (
<LoadScript
googleMapsApiKey={API}
>
<GoogleMap
mapContainerStyle={containerStyle}
center={center}
zoom={11.3}
options={{styles: mapStyles}}
>
{foundMarkers ? foundMarkers : allTheMarkers}
</GoogleMap>
</LoadScript>
)
}
父组件:
handleMarkerClick = (e) => {
const id = e.target;
console.log(id);
}
render() {
return (
<div className="container">
<div className="wrapper">
<Map
places={this.state.places}
foundPlaces={this.state.foundPlaces}
onMarkerClickMap={this.handleMarkerClick}
/>
</div>
</div>
);
}
解决方法
您不打markerClick
。我认为您应该执行以下操作:
<Marker
key={place.id}
position={{ lat: place.lat,lng: place.lng }}
icon={place.alive ? icon1 : iconDead}
onClick={() => markerClick()}
/>
,
不确定控制台记录整个功能是否会给您有用的信息。
如果执行此操作,控制台是否会记录ID? onClick = {()=> {markerClick()}}
cos markerClick本质上是handleMarkerClick函数
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。