Question

我在浏览器页面上显示谷歌地图时遇到问题，我正在使用RequireJS＆amp; 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;
});

Backbone，requireJS，Googlemaps - 地图未显示

1 个答案: