3

我已经开始使用地理定位，我可以获得坐标等。我想在地图中显示它，但是当我将地图返回到 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 Home

你的地点

<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>
4

2 回答 2

3

你在这里有各种各样的问题，所以我们会从上到下。

当你这样说时：

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

上的 100% 宽度和高度值是#map指父元素，所以你说

制作#map相同的大小#location1

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

当您在视图定义中这样说时：

id: 'map',

您只是告诉 Backbone 设置它为您的视图创建id="map"的：<div>

埃尔 view.el

[...]this.el是从视图的tagName、className和属性（如果指定id）创建的。attributes如果不是，el则为空div。

说id: 'map'不会#map从 DOM 中获取用作 view's el，它只是让您拥有<div id="map"></div>as your view's el。您可能希望el在视图定义中指定：

el: '#map'

您似乎正在尝试el使用replaceWith. 这应该工作，或多或少，但你仍然将地图绑定到零高度<div>，然后将零高度<div>放入 DOM。Short 很好，但你看不到 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/

于 2012-10-31T01:27:25.500 回答
1

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

于 2012-10-31T00:05:33.450 回答