2

Googleマップをページに表示するのに問題があり、RequireJSとBackboneを使用していて、明らかに単純なものがありません（バックボーンを使い始めたばかりです）が、マップがページに表示されません。エラーはなく、.mapプロパティはgooglemapsオブジェクトのように見えます。

いくつかのポインタを取得するのは本当に良いでしょう

以下は私ができる限り単純化したものですが、動作を示しています。

マークアップの抜粋：

<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 に答える