Backbone,requireJS,Googlemaps - 地图未显示

Question

我在浏览器页面上显示谷歌地图时遇到问题,我正在使用RequireJS和Backbone,显然遗漏了一些简单的东西(我刚开始使用骨干网),但地图永远不会在页面上呈现.没有错误,.map属性看起来像谷歌地图对象.

得到一些指示真的很好

以下是我可以做到的简化,但展示了行为:

标记摘录:

<style>
#mapCanvas img { width:auto, max-width: auto; display:inline; }
#mapCanvas {height:600px;}
</style>

<div class="span8">
    <div id="mapCanvas">

    </div>
</div>

码:

requirejs.config({
  baseUrl: '../resources/js',
  paths: {
        jquery: 'https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
        jqueryui: 'https://ajax.googleapis.com/ajax/libs/jqueryui/1.9.2/jquery-ui.min',
        datatables: 'http://ajax.aspnetcdn.com/ajax/jquery.dataTables/1.9.4/jquery.dataTables.min',
        gmaps: 'http://maps.google.com/maps/api/js?sensor=false',
        backbone : 'libs/backbone.min',
        underscore: 'libs/underscore.min'
    },
  shim: {
    gmaps: {
        deps: ['jquery','async!http://maps.google.com/maps/api/js?sensor=false'],
        exports: 'google'
    },
    underscore: {
        exports: '_'
    },
    backbone: {
        deps: ['underscore', 'jquery'],
        exports: 'Backbone'
    }
  }
});


 require(["domReady!","jquery","underscore","backbone", "gmaps"], function(doc, $, _, Backbone, google) {

    var siteMarkers = Backbone.View.extend({
        el: "#mapCanvas",
        initialize: function() {

            this.LatLng = new google.maps.LatLng(53.785948,-1.40728)
            var myOptions = {
                zoom: 8,
                center: this.LatLng,
                mapTypeControl: true,
                mapTypeControlOptions: {style: google.maps.MapTypeControlStyle.DROPDOWN_MENU},
                navigationControl: true,
                mapTypeId: google.maps.MapTypeId.ROADMAP
            }

            this.map = new google.maps.Map(this.el, myOptions);
            this.render();
        },
        render: function() {
            return this;
        }
    });


     var markerView = new siteMarkers();


 });

提前致谢

Answer 1

而不是填补谷歌地图,将其定义为一个模块:

define('gmaps', ['async!http://maps.googleapis.com/maps/api/js?key=xxx&sensor=false'], function() {
    return google.maps;
});