Несколько InfoWindows в реагировать-Google-карты выдает ошибку CORS - PullRequest
Новая
       17

Несколько InfoWindows в реагировать-Google-карты выдает ошибку CORS

0 голосов
/ 05 января 2019

Используя библиотеку реагирования "act-google-maps ", я пытаюсь заполнить несколько маркеров и информационных окон на своей карте. Однако, когда я пытаюсь это сделать, я получаю сообщение об ошибке CORS, которое, как я подозреваю, генерируется внутренними компонентами библиотеки, но я не уверен, с чего начать при устранении проблемы.

Код ниже:

Компонент карты:

... некоторый код, инициализирующий класс React ... 

/*
* Click-handling functions
*/
onMarkerClick(props, marker, e){
        /**
         * Open the infoWindow
         * (InfoWindow has built-in closure method)
         */

        this.setState({
            selectedPlace : props,
            activeMarker: marker,
            showingInfoWindow: true
        })

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

/* 
* Render, where I'll add a number of markers based on the state received by the component, stored in a variable called "jobs"
*/

    render(){

var MapMarkers = [];

        //for every job
        var allJobs = this.props.Jobs;
        if(allJobs){
            //iterate through...

            const handleMarkerTap = (marker) => {
                //use the .open function on the InfoWindow
                let infoWindow = marker.children;
                infoWindow.open();
            }

            /** Old Map Marker method*/

            var i = 0;

            for(let job of allJobs){

                let InfoWindowStateIdentifier = "showingInfoWindow_"+i;

                var visibleState = () => {
                    if(!this.state[InfoWindowStateIdentifier]){
                        return false;
                    }
                    else{
                        return this.state[InfoWindowStateIdentifier];
                    }
                }

                MapMarkers.push(
                    <Marker  name={job.job_description}
                          position={{lat: job.job_location._lat, lng: job.job_location._long}}
                          onClick={this.onMarkerClick}
                />)
                        MapMarkers.push(
                    <InfoWindow
                        marker={job.job_description}
                        onClose={this.onClose}
                        visible={this.state.showingInfoWindow}
                        key={i}
                        content={job.job_description}
                        style={InfoStyle}
                        position={{lat: job.job_location._lat, lng: job.job_location._long}}

                    >
                        <div>
                            <h1>Place is:{this.state.selectedPlace.name}</h1>
                        </div>
                    </InfoWindow>
                )

                i++;
            }

        }


        return(
                <Map
                    ref = {this.MapRef}
                    google={this.props.google} 
                    style = {style}
                    center = {{
                        lat: this.props.userLocation.lat,
                        lng: this.props.userLocation.lng                    
                    }}
                    initialCenter = {{
                        lat: this.props.userLocation.lat,
                        lng: this.props.userLocation.lng
                    }}
                    zoom = {12}
                    onGoogleApiLoaded={({map, maps}) => this.renderMarkers()}
                    >

                    {MapMarkers}
                </Map>
        )
    }

}
...