Backbone，requireJS，谷歌地圖 - 地圖不顯示

我有一個問題讓谷歌地圖顯示在我的頁面上，我正在使用RequireJS &骨幹，顯然缺少一些簡單的東西（我只是剛剛開始骨幹），但地圖從不在頁面上呈現。沒有錯誤，.map屬性看起來像一個谷歌地圖對象。Backbone，requireJS，谷歌地圖 - 地圖不顯示

將是非常好的得到一些指點

下面是簡化的，我可以做到，但表現出的行爲：

標記摘錄：

<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(); 


});

在此先感謝

來源

2013-02-27 SWa

爲了什麼it's值得我幾乎一模一樣的設置，它爲我工作。唯一的區別是我不會修剪gmaps，而是像define'gmaps'，['async！http：//maps.googleapis.com/maps/api/js？key = xxx＆sensor = false']那樣定義它， > \t google.maps – 2013-02-27 09:56:16

布里爾，你可以把這個作爲答案，所以我可以接受它嗎？適用於我 – SWa 2013-02-27 10:59:15

太棒了！很高興我可以幫助 – 2013-02-27 11:16:24

相反勻場的谷歌地圖，把它定義爲一個模塊：

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

來源

2013-02-27 11:14:42

謝謝，完美的作品:) – SWa 2013-02-27 11:23:45

@Kyle你是否將你的API關鍵字從字面上放在'xxx'的位置，或者你正在從你可以隱藏在github上的配置文件中讀取它？謝謝！ – Caroline 2014-04-12 17:03:01

Backbone，requireJS，谷歌地圖 - 地圖不顯示

回答

相關問題