Question

我正在尝试整合＆＃34; react-google-maps＆＃34;在我的应用程序中显示地图。我正在最难理解他们的标记系统。

https://tomchentw.github.io/react-google-maps/#marker

我能够显示我的地图并正确显示所有标记。下一步是我遇到问题的地方。我需要能够点击每个标记并知道点击了哪个标记。我已经评论了以下代码，以显示我现在想在控制台中显示的道具。我认为我只需要在事件中传递另一个参数，但我不知道该怎么做。说实话，我相信我正在通过事件监听器但我甚至不能完全确定当我记录那个＆＃39; e＆＃39;变量。

你可以在我的github中看到我到目前为止所拥有的内容。如果单击标记，您将看到我正在记录的内容。

https://joweber123.github.io/take-me-there/login/James

请帮助，我无法在其他任何地方找到此信息。非常感谢你

    import React, { Component } from 'react';
    import { withGoogleMap, GoogleMap, Marker, } from "react-google-maps";
    import { compose, withProps } from "recompose";

    class List extends Component {

      //I eventually will use this information to set state and all of that, but for now I just don't understand how to pass information to this function from my marker on onClick

      handleMarkerClick(e){
        console.log(e);
      }
      render(){

        const { compose, lifecycle} = require("recompose");

        const {
          withGoogleMap,
          GoogleMap,
          Marker,
        } = require("react-google-maps");

        const MapWithAMarker = compose(
        withGoogleMap
      )(props =>

        <GoogleMap
          defaultZoom={8}
          defaultCenter={{ lat: Number(`${this.props.locations[Object.keys(this.props.locations)[Object.keys(this.props.locations).length-1]].location.lat}`), lng: Number(`${this.props.locations[Object.keys(this.props.locations)[Object.keys(this.props.locations).length-1]].location.lng}`) }}
          locations={this.props.locations}
        >
        {
          Object
          .keys(this.props.locations)
          .map(key =>
          <Marker
            key={key}
            position={{ lat: Number(`${this.props.locations[key].location.lat}`), lng: Number(`${this.props.locations[key].location.lng}`) }}
            locations={this.props.locations[key]}
            //I want to be able to pass the information that is stored in my locations prop here, but I have no idea how to do that.  
            onClick={props.onMarkerClick}
          />
        )
          }
        </GoogleMap>
      );

      return (
        <div className = "location-list one-third column center border-main full-height">
            <MapWithAMarker
              loadingElement={<div style={{ height: `100%` }} />}
              containerElement={<div style={{ height: `400px` }} />}
              mapElement={<div style={{ height: `100%` }} />}
              locations={this.props.locations}
              //I am not even really sure what I am doing here.  What gets printed out in my console gives me some information but what I really want to be able to do is to pass the locations props of my specific marker and have access to that information
              onMarkerClick={(e)=>this.handleMarkerClick(e)}
            />
        </div>
      );
    }
    }


    export default List;

Answer 1

我能够弄明白！我之前只是传递了事件监听器，所以当然它并没有包含我需要的任何信息。我也没有必要将它的父母传递给它，因为它只是触发它自己的事件就足够了。谢谢大家看看这个。

onClick={()=> this.props.handleMarkerClick(this.props.locations[key])}

我想我并没有问自己正确的问题，但是一旦我找到了这两个答案，我就会更加了解我需要做的事情。

React - Passing props to child onClick

Pass props to parent component in React.js

Answer 2

你能展示this.props.locations中包含的内容吗？通常你想要映射位置，每个位置都应该有某种id字段。您应该通过位置数组进行映射，而不是通过键映射。这样你就可以在调用onClick函数时传递id（甚至是坐标，如果它们位于对象本身，我猜它们会这样做）。

react-google-maps在标记点击上传递道具

2 个答案: