마커 위치가 지도에서 올바르게 작동하지 않는 이유는 무엇입니까?

2364 단어 reactjavascript
아래 JS 코드가 있습니다.

여러 개의 마커가 표시되어야 하지만 지도를 클릭하면 두 개의 마커만 표시되는 이유는 무엇입니까?



마커도 태그<Marker key={i} position={latLng} 내부에 있으므로 제대로 작동해야 합니다. 어떤 이유로 두 번째 마커가 생성된 후 {props.isMarkerShown && <Marker position={props.markerPosition} />}가 마커에 대한 새 인스턴스를 생성하지 않는 것 같습니다...

import React from 'react';
import { compose, withStateHandlers } from "recompose";
import { InfoWindow, withGoogleMap, withScriptjs, GoogleMap, Marker } from 'react-google-maps';

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=AIzaSyCZ_nTRNVYtgm1qoelJ1nJ817OrNyG1JlA"
                    loadingElement={<div style={{ height: `100%` }} />}
                    containerElement={<div style={{ height: `400px` }} />}
                    mapElement={<div style={{ height: `100%` }} />}
                />
                {clicks.map((latLng, i) => (
                    <Marker key={i} position={latLng} />
                ))}
            </div>
        )
    }
}


https://developers.google.com/maps/documentation/javascript/react-map

좋은 웹페이지 즐겨찾기