有没有办法在没有脚本标签的情况下将Google Maps API导入到react中? [英] Is there a way to import the Google Maps API into react without a script tag?

问题描述

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

I am trying to integrate the Google Maps API into my ReactJS and Cordova project just so I can use the places autocomplete. I do not need to display the whole map. Currently, I am using a script tag to get the Google Maps API into my project. However, I would like to avoid this, install it, and import it like I do all my other React libraries. Is there a way to do this?

推荐答案

您可以通过javascript加载它；

You can load it via 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()函数-

loadMapsApi() function -

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

这是最好的方式，因为它可以离线处理.

This ways best as it handles being offline.

您可以阅读在这里更多.

这篇关于有没有办法在没有脚本标签的情况下将Google Maps API导入到react中?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！