Question

我已经开始玩Geolocation了，我可以得到坐标等等。我想在地图中显示这个，但是当我将地图返回到div时，没有任何内容显示出来。现在我查看了div，地图正在返回，但只是没有可见。这是有问题的div

请注意，这似乎只是一个微小地图的链接

  <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％宽度和高度值是指父元素所以你要说

使#map的尺寸与#location1
相同

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

在视图定义中说这个时：

id: 'map',

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

el view.el

[...] this.el是根据视图的tagName，className，id和attributes属性创建的。如果没有，则el为空div。

说id: 'map'没有从DOM中抓取#map以用作视图的el，它只会让<div id="map"></div>作为您的视图el 。您可能希望在视图定义中指定el：

el: '#map'

您似乎正在尝试使用replaceWith更正视图的el混淆。这应该或多或少有效，但你仍然会将地图绑定到零高度<div>，然后将零高度<div>放入DOM中。短路很好，但你看不到0px高的东西。

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

假设你有一些东西可以给#location1一个高度，那么就是这样的一个视图：

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/

Answer 2

确保this.el的高度非零。你正在摧毁#map并用全新的东西替换它......

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

您的位置

2 个答案: