2

我在让谷歌地图显示在我的页面上时遇到问题，我正在使用 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();


 });

提前致谢

4

1 回答 1

5

而不是填充谷歌地图，将其定义为一个模块：

define('gmaps', ['async!http://maps.googleapis.com/maps/api/js?key=xxx&sensor=false'], function() {
    return google.maps;
});
于 2013-02-27T11:14:42.827 回答