Как я могу получить информацию от Google Maps iFrame? - PullRequest
0 голосов
/ 25 марта 2019

Я хотел бы получить некоторую информацию из API карт Google. Я написал функцию в googleMap.html файле и хочу вернуть значения:

My React's componentDidMount:

componentDidMount() {
    this.iFrameNode = ReactDOM.findDOMNode(this.refs.iframe);
    this.iFrameNode.onload = () => {
        const promise1 = new Promise(resolve => {
            window.addEventListener('message', data => {
                resolve(data);
            });
            const iFrameNode = ReactDOM.findDOMNode(this.refs.iframe);
            iFrameNode.contentWindow.postMessage({}, '*');
        });

        promise1.then(value => {
            console.log(`visibleMarkers: ${value}`);
        });
    };
},

Google maps Код iFrame:

function getVisibleMarkers(mapInstance, markers) {
    const mapBounds = mapInstance.getBounds();
    return markers.filter(marker => mapBounds.contains(marker.getPosition()));
}

function handlePostMessage(message) {
    const visibleMarkers = getVisibleMarkers(window.googleMapsInstance, window.googleMapsMarkerInstance);
    window.parent.postMessage(JSON.stringify(visibleMarkers), '*')
}

function initialize() {
    window.addEventListener('message', handlePostMessage, false);
}

Сообщение сообщения от родителя в iFrame работает правильно, и вычисленное значение является правильным. Проблема в CORS в команде window.parent. Я получил эту ошибку:

Uncaught DOMException: Blocked a frame with origin "https://static.parastorage.com" from accessing a cross-origin frame.

Что я делаю не так? Есть ли другой способ связи между моим сайтом и iFrame google-maps?

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...