React Google Maps API initMap не функция, нет пакетов
Получение ошибки ниже, что initMap не является функцией. Я пытался не использовать какие-либо дополнительные пакеты для асинхронной загрузки этого скрипта или для API Карт Google. Я пытался просто записать в консоль initMap, чтобы увидеть, когда скрипт загружен, но все еще получаю сообщение об ошибке, что это не функция. Я могу переместить эту функцию за пределы componentDidMount или даже за пределы компонента App, но ошибка та же.
Я предполагаю, что это как-то связано с тем фактом, что скрипт загружается через document.createElement, но функция initMap - нет, поскольку, когда я смотрю на другие примеры API Карт Google, он показывает как URL-адрес API, так и функцию initMap. на странице index.html.
Верно ли это предположение? Есть ли способ легко асинхронно загрузить функцию как скрипт или API Карт Google в React без использования каких-либо других пакетов?
Uncaught Ib {message: "initMap is not a function", name: "InvalidValueError", stack: "Error↵ at new Ib (https://maps.googleapis.com/m…ZVRgF122wCkVf4P67Y&v=3.32&callback=initMap:163:56"}
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import registerServiceWorker from './registerServiceWorker';
ReactDOM.render( < App / > , document.getElementById('root'));
registerServiceWorker();
import React, {
Component
} from 'react'
import './App.css'
let map;
export default class App extends Component {
componentDidMount() {
function initMap() {
console.info('loaded')
}
const script = document.createElement('script')
script.async = true
script.defer = true
script.src = "https://maps.googleapis.com/maps/api/js?key = {myAPIkey}=3.32&callback=initMap"
document.head.appendChild(script)
}
render() {
return ( <
div > {
this.map
} <
div style = {
{
width: 500,
height: 500
}
}
id = "map" / >
<
/div>
)
}
}body {
font-family: Arial, sans-serif;
height: 100%;
margin: 0;
padding: 0;
}
#map {
width: 500;
height: 500;
}<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "utf-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name = "theme-color" content = "#000000">
<title>React Map</title>
</head>
<body>
<div id = "root">
</div>
</body>
</html>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Действительно, как заметил Александр Старосельский, callback = initMap ищет функцию initMap в окне. Вы должны либо сделать функцию initMap глобальной, либо назначить функцию initMap внутри класса переменной объекта окна следующим образом:
window.initMap = this.initMap.bind(this);
Это сработало для меня, я также нашел это в списке stackoverflow.com/questions/32496382/…
Вы также можете удалить параметр запроса callback=initMap из URL-адреса src в теге скрипта, который вы используете для загрузки скрипта googleMaps.
callback=initMapищет функциюinitMapнаwindow.initMapвашего компонентаAppне прикреплен кwindowи, следовательно, не будет доступен для обратного вызова сценария.