首页 > 编程语言> > javascript – 使用modernizr.js / yepnope.js加载Google Maps API

javascript – 使用modernizr.js / yepnope.js加载Google Maps API

2019-07-03 16:22:38 作者：互联网

有没有人有任何工作代码允许使用modernizr.load或yepnope加载Google Maps API？

我能够加载JQuery& GMap3使用modernizr,但是除非我制作传统的脚本标记,否则Google Maps API不起作用.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Please help me load Google Maps API with modernizr!</title>
    <style>
        #map { width: 500px; height: 300px; }
    </style>
    <script src="/js/modernizr-2.6.2.min.js"></script>
</head>

<body>
    <h1>Please help me load Google Maps API with modernizr!</h1>

    <div id="map">
        Placeholder
    </div>

    <script>
        function pageInit() {
            $("#map").gmap3({
                map:{
                    options: {
                        center: [18.01714, -76.750113],
                        zoom: 15,
                        mapTypeId: google.maps.MapTypeId.TERRAIN,
                    }
                }
            });
        }
    </script>


    <!-- I WANT TO REMOVE THE SCRIPT TAG BELOW AND REPLACE WITH MODERNIZR LOAD! -->
    <script src="//maps.google.com/maps/api/js?sensor=false&amp;language=en"></script>
    <!-- ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ -->


    <script>
        Modernizr.load([{load: [
            '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
            '/js/gmap.jquery-5.1.1.min.js',
        ],complete: function () {loaded();}},]);

        function loaded() {
            $(document).ready(function() {
                pageInit();
            });
        }
    </script>
</body>
</html>

逻辑逻辑告诉我删除脚本标记后应该执行以下更改： –

Modernizr.load([{load: [
    '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
    '//maps.google.com/maps/api/js?sensor=false&amp;language=en',
    '/js/gmap.jquery-5.1.1.min.js',

但是,如果我执行此更改,地图不会加载,我现在在Javascript控制台中收到此错误： –

Load denied by X-Frame-Options: http://maps.google.com/maps/api/js?sensor=false&amp;language=en does not permit cross-origin framing.

解决方法:

这是我能想到的最好的： –

    <script>
        Modernizr.load([{load: [
            'preload!//maps.googleapis.com/maps/api/js?sensor=false&callback=loaded',
            '//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js',
            '/js/gmap.jquery-5.1.1.min.js',
        ], complete: function () {
            var script = document.createElement('script');
            script.type = 'text/javascript';
            script.src = '//maps.googleapis.com/maps/api/js?sensor=false&callback=loaded';
            document.body.appendChild(script);
        }}]);

        function loaded() {
            $(document).ready(function() {
                pageInit();
            });
        }
    </script>

预载似乎更快！但是我认为根据Firebug告诉我的情况,它会抓取文件两次.

标签：javascript,google-maps,modernizr,yepnope
来源： https://codeday.me/bug/20190703/1368464.html