使用谷歌地图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

回答

相关问题