如何在谷歌地图反应中获取所有标记

时间:2018-07-29 11:08:24

标签: javascript reactjs google-maps google-maps-react

我的项目中有$client_id = "xxxxxxxxxxxxxxxxx"; $ch = curl_init(); curl_setopt($ch, CURLOPT_URL, 'https://api.imgur.com/3/image/pNAHgGq2WvXAUey'); curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "DELETE"); curl_setopt($curl, CURLOPT_HTTPHEADER, array('Authorization: Client-ID ' . $client_id)); $result = curl_exec($ch); $httpCode = curl_getinfo($ch, CURLINFO_HTTP_CODE); curl_close($ch); var_dump($result); ,但是我不知道如何从地图上获取所有标记?

google-maps-react

2 个答案:

答案 0 :(得分:1)

我有一个类似的问题。我想删除所有旧标记并添加新标记列表。这是我要修复的代码:

const MyMap = (props) => {

  const [markers, setMarkers] = React.useState([])

  React.useEffect(() => {
    var markerArr = []
    points.map(p => {
      markerArr.push(<Marker position={{lat: p.lat, lng: p.lng}} />)
      }
    )
    setMarkers(markerArr)
  }, [])

  const MarkerUpdater = (day) => {
    var markerArr = []
    points.map(p => {
      markerArr.push(
        <Marker position={{lat: p.lat, lng: p.lng}} />
        )
      }
    )
    setMarkers(markerArr)
  }

  return <Map> {markers} </Map>
}

注意

您应该在要更新标记的任何地方致电MarkerUpdater

答案 1 :(得分:0)

您可能打算访问google.maps.Marker对象,如果这样,您可以考虑利用Callback Refs

1)分配ref属性以存储对Marker节点的引用:

<Marker  ref={this.onMarkerMounted}
      key={item.id}
      title={item.name}
      name={item.name}
      position={{ lat: item.lat, lng: item.lng }}
/>  

2)将标记实例保存到markerObjects数组中:

export class MapContainer extends Component {
  constructor(props) {
    super(props);
    this.state = {
      markerObjects: []
    };


    this.onMarkerMounted = element => {
      this.setState(prevState => ({
        markerObjects: [...prevState.markerObjects, element.marker]
      }))
    };
  }

  render() {
    const google = window.google;
    const data = this.props.data;

    return (
      <div className="map-container">
        <Map
          google={this.props.google}
          className={"map"}
          zoom={4}
          defaultCenter={{ lat: -35.0317893, lng: 125.219989 }}
          position={{ lat: -35.0317893, lng: 125.219989 }}
        >
          {data.map(item => (
            <Marker ref={this.onMarkerMounted}
              key={item.id}
              title={item.name}
              name={item.name}
              position={{ lat: item.lat, lng: item.lng }}
            />
          ))}
        </Map>
      </div>
    );
  }
}