javascript - 如何在点击 li 元素时触发谷歌地图上的标记事件

Question

我被困在这里了，我已经研究过有关此主题的其他问题，但似乎找不到答案。我试图获取谷歌地图上的标记，以便在单击列表中的相应项目时显示信息窗口，但不知道如何完成。这是代码

import React, { Component } from 'react';
import {Map, InfoWindow, Marker, GoogleApiWrapper} from 'google-maps-react';

var  AllPlaces = [
  {
    "name" : "Pizza",
    "lat": "40.7589",
    "lng":"-73.9851",
  },

  {
    "name" : "Cookies",
    "lat": "40.7690",
    "lng":"-73.9952",
  }
]

class MapContainer extends Component {
state = {
showingInfoWindow: false,
activeMarker: {},
selectedPlace: {},
query:'',
markerObjects:[]
};



onMarkerClick = (props, marker, e) => {
console.log(marker);
this.setState({
  selectedPlace: props,
  activeMarker: marker,
  showingInfoWindow: true
});
}

onLiClick = (markers) =>{
//AllPlaces.foreach(
  //if(markers.target.innerHTML === )
//google.maps.event.trigger(marker,'click')) This is where I am trying to create the function for when the Li item is clicked
}


onMapClicked = (props) => {
if (this.state.showingInfoWindow) {
  this.setState({
    showingInfoWindow: false,
    activeMarker: null
  })
}
}


CreateInputField = () => {
return <input
placeholder = "Search Nearby Places"
/>
}

findPlaces = () => {
return(
  <ol className='Places'>
    {AllPlaces.map((arrayItem, index)=>
      <li
      key = {index}
      className='Place'
      //onClick={() => {this.onLiClick}}
      >{arrayItem.name}</li>
    )}
  </ol>
)
};

render() {
return (
  <div className = 'map-container' style={{marginleft:'250px'}}>
    <div>
      <div className = 'sideMenu'>
        <div className = 'List'>
          <h1 className = 'title'> Places to Eat </h1>
            {this.CreateInputField()}
        </div>
        <div className = 'PlaceList'>
          {this.findPlaces()}
        </div>
      </div>
    </div>
    <Map google={this.props.google} zoom={14}
      initialCenter = {{lat:40.7589, lng:-73.9851}}
      onClick={this.onMapClicked}>
      <Marker
        onClick={this.onMarkerClick}
        title = {AllPlaces[0].name}
        name={AllPlaces[0].name}
        position = {{lat:AllPlaces[0].lat,lng:AllPlaces[0].lng}}/>
      <Marker
        onClick={this.onMarkerClick}
        title = {AllPlaces[1].name}
        name={AllPlaces[1].name}
        position = {{lat:AllPlaces[1].lat,lng:AllPlaces[1].lng}}/>
      <InfoWindow
        onOpen={this.windowHasOpened}
        onClose={this.windowHasClosed}
        marker={this.state.activeMarker}
        visible={this.state.showingInfoWindow}>
        <div>
          <h1>{this.state.selectedPlace.name}</h1>
        </div>
      </InfoWindow>
    </Map>
  </div>
  );
}
}

export default GoogleApiWrapper({
apiKey: 'AIzaSyC21SntdNn1vCb5VOAujCPIM7a9p5XkvRs'
})(MapContainer)

到目前为止，我已经尝试编写 if 语句来比较 innerHTML 和标记上的名称，但还没有找到一种方法来成功完成此操作(如果可以的话)，我不确定。我尝试创建所有标记的数组，但也不知道如何执行此操作。

Answer 1

您可以在每个标记上设置一个ref，以便您可以从函数中访问它。

像这样的东西应该可以工作。我在其标记属性上为每个标记设置一个引用，该属性与 InfoWindow 期望的标记对象相同。然后，我只是在 Locations 数组索引上访问它。

import React, { Component } from 'react';
import { Map, InfoWindow, Marker, GoogleApiWrapper } from 'google-maps-react';

var  AllPlaces = [
  {
    "name" : "Pizza",
    "lat": "40.7589",
    "lng":"-73.9851",
  },

  {
    "name" : "Cookies",
    "lat": "40.7690",
    "lng":"-73.9952",
  }
]

class MapContainer extends Component {
  state = {
    showingInfoWindow: false,
    activeMarker: {},
    selectedPlace: {},
    query:'',
  };

  markers = []

  onMarkerClick = (props, marker, e) => {
    this.setState({
      selectedPlace: props,
      activeMarker: marker,
      showingInfoWindow: true
    });
  }

  onLiClick = (i) =>{
    this.setState({
        showingInfoWindow: true,
        activeMarker: this.markers[i],
        selectedPlace: AllPlaces[i]
    })
  }


  onMapClicked = (props) => {
    if (this.state.showingInfoWindow) {
      this.setState({
        showingInfoWindow: false,
        activeMarker: null
      })
    }
  }


  CreateInputField = () => (
    <input
      placeholder = "Search Nearby Places"
    />
  )

  findPlaces = () => (
    <ol className='Places'>
      {AllPlaces.map((arrayItem, index)=>
        <li
        key = {index}
        className='Place'
        onClick={() => {this.onLiClick(index)}}
        >{arrayItem.name}</li>
      )}
    </ol>
  );

  render() {
    return (
      <div className = 'map-container' style={{marginleft:'250px'}}>
        <div>
          <div className = 'sideMenu'>
            <div className = 'List'>
              <h1 className = 'title'> Places to Eat </h1>
                {this.CreateInputField()}
            </div>
            <div className = 'PlaceList'>
              {this.findPlaces()}
            </div>
          </div>
        </div>
        <Map google={this.props.google} zoom={14}
          initialCenter = {{lat:40.7589, lng:-73.9851}}
          onClick={this.onMapClicked}>
          {AllPlaces.map((marker, i) => 
              <Marker
              ref={(e) => {if (e) this.markers[i] = e.marker}}
              onClick={this.onMarkerClick}
              title = {marker.name}
              name={marker.name}
              position = {{lat:marker.lat,lng:marker.lng}}
              />
          )}
          <InfoWindow
            onOpen={this.windowHasOpened}
            onClose={this.windowHasClosed}
            marker={this.state.activeMarker}
            visible={this.state.showingInfoWindow}>
            <div>
              <h1>{this.state.selectedPlace.name}</h1>
            </div>
          </InfoWindow>
        </Map>
      </div>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: 'AIzaSyC21SntdNn1vCb5VOAujCPIM7a9p5XkvRs'
})(MapContainer)