使用谷歌地圖backbone.js

我想與backbone.js一起使用谷歌地圖。所以我創建了一個視圖如下。但這不適合我。任何投入？使用谷歌地圖backbone.js

(function($){ 
    var CreateMap = Backbone.View.extend({ 

     tagName: "div", 

     initialize: function() { 
      _.bindAll(this, 'render'); 

      var myOptions = { 
       zoom: 8, 
       center: new google.maps.LatLng(-34.397, 150.644), 
       mapTypeId: google.maps.MapTypeId.ROADMAP 
      }; 

      this.map = new google.maps.Map(this.el, myOptions); 

      this.render(); 
     }, 

     render: function() { 
      return this; 
     } 
    }); 

    var mapview = new CreateMap({el: $("#map_canvas")}); 

})(jQuery);

來源

2011-10-08 Anush Shetty

**要呈現什麼**？你需要在渲染函數中做一些事情來實際渲染一個帶有相應地圖的div！看看Google地圖文檔，看看如何「渲染」你在this.map中獲得的地圖 - 骨幹不知道如何渲染，它只是一個空的div！ – PhD

友情提示：正確縮進代碼。它使得它更容易閱讀。我現在正在對你的帖子做這件事，所以你知道我的意思是爲了將來的參考。 – Milimetric

不是傳遞#map_canvas div，而是設置它，以便將mapview.render（）。el注入到DOM中。您可以在骨幹路由器類中執行此操作。從初始化函數調用渲染函數是沒有必要的。如果在此之後，您仍然看不到任何東西，請爲您的視圖添加一個className，並確保您具有與該類關聯的正確CSS寬度/高度樣式。

來源

2012-01-19 13:38:22 Micros

您是否將Backbone傳遞到包裝函數的範圍？

來源

2012-07-27 11:05:11 antihero

As PhD noted，你需要有render實際上做點事情。這是我自己的工作示例，它假設頁面上有一些現有的<div id="map"></div>：

APP = {}; 

APP.Map = Backbone.Model.extend({ 
    defaults: { 
    center: new google.maps.LatLng(-34.397, 150.644), 
    zoom: 8, 
    mapTypeId: google.maps.MapTypeId.ROADMAP 
    } 
}); 
APP.map = new APP.Map(); 

APP.MapView = Backbone.View.extend({ 
    id: 'map', 
    initialize: function(){ 
    this.map = new google.maps.Map(this.el, this.model.attributes); 
    this.render(); 
    }, 
    render: function(){ 
    $('#map').replaceWith(this.el); 
    } 
}); 
APP.mapView = new APP.MapView({model: APP.map});

來源

2012-08-02 21:07:17

使用谷歌地圖backbone.js

回答

相關問題