Question

我是新手要求js，我已经尝试了谷歌关于谷歌地图和需要js的一切可能。其他一切在我的页面上都可以，但谷歌地图，如果我刷新页面谷歌地图显示正常，但在浏览页面时，它不会。

这是我的 main.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'也未被触发，因此我在initGMap()内调用$(document).ready()而不是使用此语句。

此案例的完整解决方案

新 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;    
})

<强> main.js

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


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

});

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

1 个答案: