javascript - 谷歌地图通过 Backbone javascript在div标签中返回但不显示

Question

我已经开始玩弄地理定位，我可以获得坐标等。我想在 map 中显示它，但是当我将 map 返回到 div 时，什么也没有显示。现在我查看了 div， map 正在返回但不可见。这是有问题的 div

注意这似乎只是一个指向小 map 的链接

  <a style="position: static; overflow-x: visible; overflow-y: visible; float: none;                 display:     inline; " target="_blank" href="http://maps.google.com/maps?ll=51.263519,-7.124185&amp;z=21&amp;t=m&amp;hl=en-US" title="Click to see this area on Google Maps"><div style="width: 62px; height: 24px; cursor: pointer; "><img style="position: absolute; left: 0px; top: 0px; -webkit-user-select: none; border-top-width: 0px; border-right-width: 0px; border-bottom-width: 0px; border-left-width: 0px; border-style: initial; border-color: initial; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; width: 62px; height: 24px; " src="http://maps.gstatic.com/mapfiles/google_white.png" draggable="false"></div></a>

这就是我在做的，Html 家

您的位置

<div data-role="content" id="location1">
<div  id="map" style="width:100%; height:100%"></div>

我的模型如下

      bb.model.Map = Backbone.Model.extend({
  defaults: {
    center: new google.maps.LatLng(51.26351898,-6.14462727),
    zoom: 20,
    mapTypeId: google.maps.MapTypeId.ROADMAP
  }
});

我的看法如下

     bb.view.Location = Backbone.View.extend(_.extend({  

   id: 'map',
   initialize: function(){
     this.map = new google.maps.Map(this.el, this.model.attributes);
 this.render();
   },
 render: function(){
 //    $('#map').replaceWith(this.el);
   $('#map').replaceWith(this.el);
      $('#location-page').page();

   },

}))

我也在使用以下脚本。

      <script type="text/javascript"  src="http://maps.google.com/maps/api/js?sensor=false"></script>   

Answer 1

您在这里遇到了各种问题，所以我们将从头到尾进行介绍。

当你这样说时:

<div data-role="content" id="location1">
    <div  id="map" style="width:100%; height:100%"></div>
</div>

#map 上的 100% 宽度和高度值引用父元素，所以你在说

make #map the same size as #location1

默认情况下，一个 <div> ，像所有 block 元素一样，将与其父元素一样宽(假设没有边距、填充......)并且足够高以包含其内容。如果你没有任何强制 #location1 的 CSS要成为特定大小，那么它将与页面(或它具有的任何父级)一样宽，并且高度为零。这意味着 #map也将是零像素高。所以你需要确保 #location1具有指定的高度。

当您在 View 定义中这样说时:

id: 'map',

你只是告诉 Backbone 设置 id="map"在 <div> it creates for your view 上:

el view.el

[...] this.el is created from the view's tagName, className, id and attributes properties, if specified. If not, el is an empty div.

说id: 'map'不捕获#map从 DOM 用作 View 的 el , 它只会给你留下 <div id="map"></div>作为您的观点 el .您可能想指定 el在 View 定义中:

el: '#map'

您似乎在尝试更正 View 的 el困惑使用 replaceWith .这或多或少应该可行，但您仍然会将 map 绑定(bind)到零高度 <div>然后把那个零高度 <div>进入DOM。矮没问题，但你看不到 0 像素高的东西。

此外，您不需要 Backbone.View.extend(_.extend({ ... })); , 你只需要 Backbone.View.extend({ ... }); .

假设你有东西要给#location1高度，然后是这样的 View :

Backbone.View.extend({
    el: '#map',
    initialize: function() {
        this.map = new google.maps.Map(
            this.el,
            this.model.toJSON()
        );
        this.render();
    },
    render: function() {
        return this; // This is standard practice.
    }
});

应该让事情发生。

演示:http://jsfiddle.net/ambiguous/ue4zL/1/