Html 有没有一种方法可以在不使用脚本标记的情况下将Google Maps API导入react？

我正在尝试将Google Maps API集成到我的ReactJS和Cordova项目中，以便使用places autocomplete。我不需要显示整个地图。目前，我正在使用一个脚本标签将GoogleMapsAPI引入到我的项目中。但是，我希望避免这种情况，安装它，然后像导入所有其他React库一样导入它。有办法做到这一点吗？

总有一个lib-four:）是谷歌的第一个结果。享受：）

您可以通过javascript加载它

jQuery模块-

(function (global) {
    "use strict";

    function onDeviceReady () {
        document.addEventListener("online", onOnline, false);
        document.addEventListener("resume", onResume, false);
        loadMapsApi();
    }

    function onOnline () {
        loadMapsApi();
    }

    function onResume () {
        loadMapsApi();
    }

    function loadMapsApi () {
        if(navigator.connection.type === Connection.NONE || google.maps) {
            return;
        }
        $.getScript('https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=true&callback=onMapsApiLoaded');
    }

    global.onMapsApiLoaded = function () {
        // Maps API loaded and ready to be used.
        var map = new google.maps.Map(document.getElementById("map"), {});
    };

    document.addEventListener("deviceready", onDeviceReady, false);

})(window);

loadMapsApi（）函数-

function loadMapsApi () {
    if (navigator.connection.type === Connection.NONE || (global.google !== undefined && global.google.maps)) {
        return;
    }
    // load maps api
}

这是处理脱机状态的最佳方式

---

.

我在地图组件中使用JavaScript将脚本标记加载到DOM中。我知道这个解决方案最终仍然使用脚本标签，但我发现它是最优雅的解决方案

const loadMapsApi = () => {
    let index = window.document.getElementsByTagName("script")[0];

    let script = window.document.createElement("script");

    script.async = true;
    script.defer = true;
    script.src =
      "https://maps.googleapis.com/maps/api/js?key=YOUR_KEY_HERE&callback=initMap";

    if (index.parentNode !== null) {
      index.parentNode.insertBefore(script, index);
    }
  };

这种方法还需要定义GoogleAPI链接所需的回调。我把这个逻辑放在一个useffect钩子中，该钩子将回调绑定到窗口对象

  const initMap = () => {
    const map = new window.google.maps.Map(document.getElementById("map"), {
      center: mapOptions.center,
      zoom: mapOptions.zoom,
      styles: require('./options.json')
    });
  };

  useEffect(() => {
    window.initMap = initMap;
  }, []);

---

我看过很多可用的图书馆。这一个似乎没有autocomplete组件，其他的则需要脚本标记才能使库工作。我希望在查找位置自动完成时避免安装整个映射库。