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ホーム

あなたの場所

<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

デフォルトでは<div>、すべてのブロック要素と同様に、aはその親と同じ幅であり（余白、パディングなどがないことを前提としています）、コンテンツを含めるのに十分な高さです。特定のサイズにするCSSがない場合は#location1、ページ（またはその親）と同じ幅になり、高さはゼロになります。つまり、#map高さもゼロピクセルになります。#location1したがって、高さが割り当てられていることを確認する必要があります。

ビュー定義でこれを言うとき：

id: 'map',

あなたはBackboneにあなたのビューのためにそれが作成するようid="map"に設定するように言っているだけです：<div>

エル view.el

[...]は、指定されている場合、this.elビューの、、およびプロパティから作成さtagNameれます。そうでない場合は、空です。classNameidattributeseldiv

ビューとして使用するためにDOMからid: 'map'取得するのではなく、ビューとして使用するだけです。おそらく、ビュー定義で次のように指定する必要があります。#mapel<div id="map"></div>elel

el: '#map'

elを使用してビューの混乱を修正しようとしているようですreplaceWith。これは多かれ少なかれ機能するはずですが、それでもマップをゼロの高さにバインドしてから、<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/

于 2012-10-31T01:27:25.500 に答える
1

this.elの高さがゼロ以外であることを確認してください。#mapを破棄し、まったく新しいものに置き換えています...

于 2012-10-31T00:05:33.450 に答える