web-dev-qa-db-ja.com

react-google-mapsを使用してクリックして地図にマーカーを追加するにはどうすればよいですか？

コンポーネントベースのReact-google-mapsを使用して、ユーザーがマップを左クリックしたときに、マーカーをGoogleマップに追加する方法の非常に簡単な例を見つけるのに苦労しています。助けが必要。

const Map = withScriptjs(withGoogleMap((props) =>
  <GoogleMap
    defaultZoom={8}
    defaultCenter={{ lat: -34.397, lng: 150.644 }}
    onClick = {props.onMapClick}
   >
  {props.isMarkerShown && <Marker position={props.markerPosition} />}

 </GoogleMap>
))

export default class MapContainer extends React.Component {
  constructor (props) {
    super(props)
    this.state = {

   }
 }

render () {
  return (
  <div style={{height: '100%'}}>
    <Map
      googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places"
      loadingElement={<div style={{ height: `100%` }} />}
      containerElement={<div style={{ height: `400px` }} />}
      mapElement={<div style={{ height: `100%` }} />}
      placeMarker={this.placeMarker}
    />
  </div>
)
 }
 }
javascriptreactjsgoogle-mapsgoogle-maps-api-3react-google-maps
6
Van

これは、マップクリックでマーカーを表示する方法を示す一般的な例です。

const Map = compose(
    withStateHandlers(() => ({
        isMarkerShown: false,
        markerPosition: null
      }), {
        onMapClick: ({ isMarkerShown }) => (e) => ({
            markerPosition: e.latLng,
            isMarkerShown:true
        })
      }),
    withScriptjs,
    withGoogleMap
)
    (props =>
        <GoogleMap
            defaultZoom={8}
            defaultCenter={{ lat: -34.397, lng: 150.644 }}
            onClick={props.onMapClick}
        >
            {props.isMarkerShown && <Marker position={props.markerPosition} />}

        </GoogleMap>
    )

export default class MapContainer extends React.Component {
    constructor(props) {
        super(props)
    }

    render() {
        return (
            <div style={{ height: '100%' }}>
                <Map
                    googleMapURL="https://maps.googleapis.com/maps/api/js?key=AIzaSyC4R6AN7SmujjPUIGKdyao2Kqitzr1kiRg&v=3.exp&libraries=geometry,drawing,places"
                    loadingElement={<div style={{ height: `100%` }} />}
                    containerElement={<div style={{ height: `400px` }} />}
                    mapElement={<div style={{ height: `100%` }} />}
                />
            </div>
        )
    }
}

ライブデモ

7
Vadim Gremyachev

マーカーを追加した編集バージョンでこのコードを確認してください

const InitialMap = withGoogleMap(props => {
  var index = this.marker.index || [];

  return(
    <GoogleMap
      ref={props.onMapLoad}
      zoom={13}
      center={{ lat: 21.178574, lng: 72.814149 }}
      onClick={props.onMapClick}
    >
      {props.markers.map(marker => (
        <Marker
          {...marker}
          onRightClick={() => props.onMarkerRightClick(marker)}
        />
      ))}
    </GoogleMap>
  )
});

export default class MapContainer extends Component{
  constructor(props){
    this.state = {
      markers:[{
        position:{
          lat: 255.0112183,
          lng:121.52067570000001,
        }
      }]
    }
  }
  render(){
    return(
      <div style={{height:"100%"}}>
        <InitialMap
          containerElement={
            <div style={{height:"150px"}}/>
          }
          mapElement={
            <div style={{height:"150px"}} />
          }
          markers={this.state.markers} />
      </div>
    )
  }
}
3
Ashokkumar C