有没有办法在没有脚本标签的情况下将 Google Maps API 导入反应？答案

【问题标题】：Is there a way to import the Google Maps API into react without a script tag?有没有办法在没有脚本标签的情况下将 Google Maps API 导入反应？
【发布时间】：2016-06-02 21:34:13
【问题描述】：

我正在尝试将 Google Maps API 集成到我的 ReactJS 和 Cordova 项目中，这样我就可以使用地点自动完成功能。我不需要显示整个地图。目前，我正在使用脚本标签将 Google Maps API 放入我的项目中。但是，我想避免这种情况，安装它并像我做所有其他 React 库一样导入它。有没有办法做到这一点？

【问题讨论】：

标签： html cordova google-maps reactjs ecmascript-6

【解决方案1】：

你可以通过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
}

这是处理离线的最佳方式。

You can read up on it more here.

【讨论】：

【解决方案2】：

总会有四个你的库 :) this 是 google 的第一个结果。享受:)

【讨论】：

我查看了很多可用的库。这个似乎没有自动完成组件，而其他人则需要脚本标签才能使库正常工作。当我只是在寻找位置自动完成时，我想避免安装整个映射库。

【解决方案3】：

我在我的地图组件中使用 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);
    }
  };

此方法还需要定义 google api 链接所需的回调。我把这个逻辑放在一个 useEffect 挂钩中，将回调绑定到窗口对象。


  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;
  }, []);

【讨论】：