javascript - 无法让谷歌地图与 requirejs 一起使用

Question

我对 require js 还很陌生，我已经尝试了在谷歌上可能找到的有关谷歌地图和 require js 的所有内容。我的页面上的其他一切都正常，但谷歌地图除外，如果我刷新页面，谷歌地图显示正常，但在页面导航时则不会。

这是我的ma​​in.js

require(['jquery','semantic','gmap'],function($,sm,gmap){
function initGMap(){
        console.log('Initiating google maps');
        //please ignore 'Info' 
        var myMap = new gmap.Map(document.getElementById('gmap-canvas'),{
                center: new gmap.LatLng(Info.lat, Info.lon),
                zoom: 15,
                mapTypeId: gmap.MapTypeId.ROADMAP
        });

        var infowindow = new gmap.InfoWindow({
            content: Info.contStr
        });

        var marker = new gmap.Marker({
           position: new gmap.LatLng(Info.lat, Info.lon),
           map: myMap,
           title: 'My Title',

        });

        infowindow.open(myMap, marker);

        gmap.event.addListener(marker, 'click', function() {
          infowindow.open(myMap,marker);
        });

        $('#gmap-canvas').on('load',function(){
            gmap.event.trigger(myMap, 'resize');
            map.setZoom( myMap.getZoom() );
        })

    }
    gmap.event.addDomListener(window, 'load', initGMap);
    $(document).bind("projectLoadComplete",  initGMap);

});

这就是我的 gmap.js 的样子

define('gmap',['async!https://maps.googleapis.com/maps/api/js?key=API_KEY'],function(){
return window.google.maps;})

除了 requirejs 本身之外，页面上没有任何其他脚本文件，使用基本脚本标记，例如

<script data-main="scripts/main" type="text/JavaScript" src="scripts/require.js"></script>

注意:我正在使用语义UI，但如果这有什么区别

任何建议将不胜感激!!

Answer 1

google.maps.event.addDomListener(window, 'load', initGMap); 是我的情况的罪魁祸首。即使页面加载完成后，事件 'load' 也不会被触发，因此我没有使用此语句，而是在 $(document) 中调用了 initGMap() 。准备好()。

此案例的完整解决方案

新gmap.js

define('gmap',['async!https://maps.googleapis.com/maps/api/js?key=API_KEY'],function(){

    self.mapStart = function(){


            console.log('Initiating google maps');


            var myMap = new google.maps.Map(document.getElementById('gmap-canvas'),{
                    center: new google.maps.LatLng(Info.lat, Info.lon),
                    zoom: 15,
                    mapTypeId: google.maps.MapTypeId.ROADMAP
            });

            var infowindow = new google.maps.InfoWindow({
                content: Info.contStr
            });

            var marker = new google.maps.Marker({
               position: new google.maps.LatLng(Info.lat, Info.lon),
               map: myMap,
               title: 'My title',

            });

            infowindow.open(myMap, marker);

            google.maps.event.addListener(marker, 'click', function() {
              infowindow.open(myMap,marker);
            });

    }

    return self;    
})

ma​​in.js

require(['gmap','jquery','semantic'],function(gmap,$,sm){


$(document).ready(function(){
       gmap.mapStart();
    });

});