使用带有require js异步插件的谷歌地图不起作用

时间:2014-03-21 04:45:52

标签: javascript jquery google-maps google-maps-api-3 requirejs

当我尝试从map.getZoom()调用main.js时控制台的输出,控制台的输出似乎表明地图已加载但未显示:

 -34.397,150.644 maploader.js:19
 the map was loaded maploader.js:11
 The map is zoomed to 4 maploader.js:13
 From main main.js:22
 4 

当我尝试使用requirejs模块显示地图时,地图不显示:

gmaps.js

  // return the gmaps namespace for brevity...

  define(['async!async!http://maps.googleapis.com/maps/api/js?v=3.exp&key=API_KEY&sensor=true'],function(){
  return window.google.maps;
}); 

maploader.js

 define(['gmaps'],function(gmaps){
    return{
        //args:DOM element(a div),LatLng(a point),minimum Zoom(set to 4)...
            fetchMap:function(what,cent,mZoom)
            {
                var mapOptions={center:cent,zoom:4,minZoom:mZoom};
                var map=new gmaps.Map(what,mapOptions);
                if(map===null || typeof map==='undefined')
                    console.log('The map was not loaded');
                else
                    console.log('the map was loaded');
                var z=map.getZoom();
                console.log("The map is zoomed to "+z);
                return map;
            },
            createLatLng:function(lat,lng)
            {
                var p=new gmaps.LatLng(lat,lng);
                console.log(p.lat()+','+p.lng());
            }
    }
});

main.js

requirejs.config({
baseUrl:'scripts',
paths:{
    jquery:'lib/jquery.min',
    async:'lib/plugins/async',
    propertyParser:'lib/plugins/propertyParser',
    goog:'lib/plugins/goog'
}
});

require(['./maploader','jquery'],function(map,$){
   $(document).ready(function(){
     var myDiv=$("#map-canvas").get(0);
     var center=map.createLatLng(-34.397, 150.644);
     var myMap=map.fetchMap(myDiv,center,4);
     console.log('From main');
     console.log(''+map.getZoom());
  });
});

这是我的目录结构:

~/Desktop/maps/modules_test $ ls -LR
.:
css  index.html  scripts

./css:
 init.css

./scripts:
 gmaps.js  lib  main.js  maploader.js

./scripts/lib:
 jquery.min.js  plugins  require.js

./scripts/lib/plugins:
 async.js   font.js  image.js  mdown.js  propertyParser.js
 depend.js  goog.js  json.js   noext.js

更新:

这也不起作用,更糟糕的是它甚至不打印我的控制台日志

require(['./gmaps','./maploader'],function(gmaps,map){
    var initialize=function()
    {
        var myDiv=document.getElementById('map-canvas');
        var center=map.createLatLng(-34.397, 150.644);
        var myMap=map.fetchMap(myDiv,center,4);
        console.log('From main');
        console.log(''+myMap.getZoom());
    };

    gmaps.event.addDomListener(window,'load',initialize);
}); 

1 个答案:

答案 0 :(得分:1)

函数createLatLng()不返回中心值:

        createLatLng:function(lat,lng)
        {
            var p=new gmaps.LatLng(lat,lng);
            console.log(p.lat()+','+p.lng());
        }

没有return p;声明。